Javascript从表单单选选项列表或文本字段（以使用的为准）中获取所选值，并输出为文本？

我对Stack还不熟悉，这是我的第一个问题，但我做了搜索，没有找到任何我想要完成的事情。我完全支持学习，因此任何有助于我更好地理解如何实现这一点的参考资料都将不胜感激，但如果有人想提供一些示例代码，我也不介意：p

好的，场景是这样的。我正在编写一个便笺创建者，它将根据我在表单中输入的一些字段自动生成客户端便笺。我已经编写了脚本从文本字段中获取值，但是我有一个字段，我希望它是一个单选选项或文本字段的组合，java需要获取所使用的字段和正确的值。感谢您的帮助，以下是我的代码：

    <script type="text/javascript">
    function getNotes() {
        //Grab Variables
        spokeTo = document.thisForm.spokeWith.value;
        problemItem = document.thisForm.problemWith.value;
        resolvedBy = document.thisForm.resolvedWith.value;
        thisTech = document.thisForm.techName.value;
        fSpace = "... "
        //Read in the location information and prep the output container
        outputValue = "";
        {
        //Test if things are blank
        if (spokeTo == "") { alert('Please Enter the Name of the Person.'); }
        else if (problemItem == "") { alert('Please Select the Problem.');  }
        else if (resolvedBy == "") { alert('Please Type Your Resolution.'); }
        else {
            //The loop that puts the output together
                outputValue += "Spoke With: " + spokeTo + "\n\n" + "Called About: " + problemItem + "\n\n" + "Resolution: " + resolvedBy +fSpace + thisTech;
            }
            //output to the user
            document.thisForm.outputArea.value = outputValue;
        }
    }
</script>

        <form name="thisForm">
        <p>
        1. Spoke With: <input type="text" id="spokeWith" class="input" name="spokeWith">
        </p>

        <p>
        2. Called About: 
            Hardware <input type="radio" id="problemWith" class="input" name="problemWith" value="Hardware">
            Software <input type="radio" id="problemWith" class="input" name="problemWith" value="Software">
            <input type="text" id="problemWith" class="input" name="problemWith"><br>
        </p>

        <p>
        3. Resolved By:<br /><br />
            <textarea name="resolvedWith" id="resolvedWith"></textarea>
        </p>

        <p>
        4. Your Name:<br>
            <input type="text" id="techName" class="input" name="techName" /><br>
        </p>

        <p>
            <input type="button" class="button" value="Make My Notes!" onClick="javascript:getNotes();" />
            <input type="reset" class="button" value="Start Over" />
        </p>

        <br><br>

        <textarea name="outputArea" id="outputArea"></textarea>
        <p class="finishMessage" id="finishMessage" name="finishMessage"></p>
    </form>

我指的是表单的步骤2部分，其中有单选选项和具有相同ID和名称的文本字段。我知道ID每页只能使用一次，所以这可能会改变，但我愿意接受任何建议/帮助。我对Javascript的使用还算温和，仍处于学习阶段

再次感谢

-------- 第二轮 --------

这是我在采纳了所提供答案的建议后修订的代码。我添加了一系列警报，让我知道我正在设法点击脚本的哪些部分，我无法通过第一个警报触发任何内容，也无法再获得任何输出。我错过了什么

<script type="text/javascript">
    function getNotes() {
    alert('You\'ve hit the function. Congratulations - you didn\'t break the whole damn thing.');
        //Grab Variables
        var spokeTo = document.thisForm.spokeWith.value;
        var resolvedBy = document.thisForm.resolvedWith.value;
        var thisTech = document.thisForm.techName.value;
        var fSpace = "&hellip; ";

        //Grab if radio else text
        var inputVal1 = document.getElementByClass('problemRadio').value;
        var inputVal2 = document.getElementByClass('problemWith').value;
        alert('You made it! Almost there.');
        // If Input Value 1 is not Null, Show Radio Value. Else, show Text Value
        var problemOutput;
        if (inputVal1.length > 0) {
        problemOutput = inputVal1;
        alert('I found value 1!');
        }
        else {
        problemOutput = inputVal2; 
        alert('I found value 2!'); 
        }

        //Read in the location information and prep the output container
        outputValue = "";

        //Test if things are blank
        if (spokeTo == "") { alert('Please Enter the Name of the Person.'); }
        else {
        alert('We Made it to Else to parse outputValue');
            //The loop that puts the output together
                outputValue += "Spoke With: " + spokeTo + "\n\n" + "Called About: " + problemOutput + "\n\n" + "Resolution: " + resolvedBy +fSpace + thisTech;
            }
            //output to the user
            document.thisForm.outputArea.value = outputValue;

    }
</script>

        <form name="thisForm">
        <p>1. Spoke With: <input type="text" id="spokeWith" class="input" name="spokeWith"></p>

        <p>2. Called About: 
            Hardware <input type="radio" id="problemRadio" class="problemRadio" name="problemRadio" value="Hardware">
            Software <input type="radio" id="problemRadio" class="problemRadio" name="problemRadio" value="Software">
            <input type="text" id="problemWith" class="problemWith" name="problemWith"><br>
        </p>

        <p>3. Resolved By:<br /><br />
            <textarea name="resolvedWith" id="resolvedWith"></textarea>
        </p>

        <p>4. Your Name:<br>
            <input type="text" id="techName" class="input" name="techName" /><br>
        </p>

        <p>
            <input type="button" class="button" value="Make My Notes!" onClick="javascript:getNotes();" />
            <input type="reset" class="button" value="Start Over" />
        </p>

        <br><br>

        <textarea name="outputArea" id="outputArea"></textarea>
        <p class="finishMessage" id="finishMessage" name="finishMessage"></p>
    </form>

---

一种方法是检查值以及是否存在其他错误

 var input1val = document.getElementById('input1Id').value;
 var input2val = document.getElementById('input2Id').value;

 var valfromeitherbox = (input1val.length > 0) ? input1val : input2val;

 /* UPDATE : ^ is the same as - 

 var valfromeitherbox;
 if(input1val.length > 0) { valfromeitherbox=input1val;
 } else { valfromeitherbox=input2val; }

 */

  document.getElementById('input3Id').value = valfromeitherbox;

 /* if val is empty in input1 use val from text box 2 */

---

抱歉，如果有点混乱，但希望您理解要点，我没有错过要点

抱歉，我还不知道在这里获取代码的最佳方法。在我弄明白之前总是看起来一团糟

我在你的更新中发现了一些东西

1 getElementbyId最好不要超过第一行

单选按钮上有2个重复的ID

3我们需要“检查”哪些单选按钮已检查

4总是方便地提醒我添加了一些变量来显示

我在下面对这段代码进行了粗略的测试，它看起来符合要求

请参阅下面代码中添加的注释

 <script type="text/javascript">
   function getNotes() {

    //Grab Variables
    var spokeTo = document.getElementById('spokeWith').value;
    var resolvedBy = document.getElementById('resolvedWith').value;
    var thisTech = document.getElementById('techName').value;
    var fSpace = "&hellip; ";

    alert("spokeTo:" + spokeTo 
      +" , resolvedBy: " +resolvedBy+", thisTech: "+thisTech);

    //Grab if radio else text

    var problemWith = document.getElementById('problemWith').value;

   alert("problemWith: "+problemWith);

/* set a default value */
var problemOutput="other";

/* if they added no notes */
if((problemWith=="") || ( problemWith==null)) {

/* check which radio is selected if any */
if(document.getElementById('problemHardware').checked) {
problemOutput = document.getElementById('problemHardware').value;
}

if(document.getElementById('problemSoftware').checked) {
problemOutput = document.getElementById('problemSoftware').value;
}

} else {
problemOutput=problemWith;
}
alert("problem output is: "+problemOutput);

    alert('You made it! Almost there.');


    //Read in the location information and prep the output container
    outputValue = "";

    //Test if things are blank
    if (spokeTo == "") { alert('Please Enter the Name of the Person.'); }
    else {
    alert('We Made it to Else to parse outputValue');
    /* The loop that puts the output together */

    outputValue += "Spoke With: " 
     + spokeTo + "\n\n" 
     + "Called About: " 
     + problemOutput + "\n\n" 
     + "Resolution: " + resolvedBy +fSpace + thisTech;
        }
        //output to the user
        document.thisForm.outputArea.value = outputValue;

}
  </script>

      <form name="thisForm">
    <p>1. Spoke With: <input type="text" id="spokeWith" class="input" name="spokeWith">  </p>

    <p>2. Called About: 
        Hardware <input type="radio" id="problemHardware" class="problemRadio" name="problemRadio" value="Hardware">
        Software <input type="radio" id="problemSoftware" class="problemRadio" name="problemRadio" value="Software">
        <input type="text" id="problemWith" class="problemWith" name="problemWith"><br>
    </p>

    <p>3. Resolved By:<br /><br />
        <textarea name="resolvedWith" id="resolvedWith"></textarea>
    </p>

    <p>4. Your Name:<br>
        <input type="text" id="techName" class="input" name="techName" /><br>
    </p>

    <p>
        <input type="button" class="button" value="Make My Notes!" onClick="javascript:getNotes();" />
        <input type="reset" class="button" value="Start Over" />
    </p>

    <br><br>

    <textarea name="outputArea" id="outputArea"></textarea>
    <p class="finishMessage" id="finishMessage" name="finishMessage"></p>
</form>

---

我想我明白了你的想法，也很欣赏你的出发点。我打算在几个小时后回家的时候试着玩这个，但我肯定明白你的意思，我想。。如果我错了，请纠正我：您正在创建一个变量，其中它等于input1Id或input2Id，这取决于获取ID2值的input2val是否为空值？因此，如果input2val.length大于0，它将从input2输出valfromeitherbox，但如果input2val.length等于0，则为零，然后它获取input1val的值？这是正确的-如果inputval1==或null或false或其他什么，然后使用input2的值-这就是我想你问的-更新的答案对这个Rob有很大的帮助，我非常感谢。当您提出正确的问题时，Stack community非常棒：迫不及待地想尝试将其应用到我的脚本中。希望一切顺利！啊，那不要紧哈，完成编码日就是一切了！：很高兴我能帮上忙。您好，我再次使用了您原来的if，else语句，而不是input1val.length>0？input1val:input2val；-因为我当时运气不好。。但我仍然没有任何结果，实际上现在根本没有输出。。我添加了新代码，如果你能再看一次，如果你看到有什么事情让我知道为什么它不起作用，我真的非常感谢你，罗伯，它工作得非常完美，现在仅凭这本参考资料，我就学到了很多关于我犯了哪些错误的知识，我更多的是通过阅读别人的代码来了解我自己的类型。谢谢你花时间坐下来给我写这封信，你太棒了。我已将此更改为我选择的答案。