Question

我创建了一个表单，我希望获取用户输入的数据。我有javascript，到目前为止所有的数据。我在拉动所选单选按钮的数据时遇到问题。我读了一些文章，他们说“名称”必须是相同的，但这不起作用，如果我给它独特的'ID'，那么选择一个或其他单选按钮不起作用。我也不能使用jQuery

JS

var myNodeList = document.getElementsByName('cf');
var myArray = []; // empty Array
for (var i = 0; i < myNodeList.length; i++) {
    if(i<4)
        for ( i; i < 3; i++) {
            var self = myNodeList[i].value;
            myArray.push(self);
        }
    else if(i==4)
        myArray.push(document.getElementById('status').value);
    else if(i==5)
        myArray.push(document.getElementById('subscribe').value);
    else if(i==6)
        myArray.push(document.getElementsByName('support')[i]);
    else if(i==7)
        for ( i; i < myNodeList.length; i++) {
            var self = myNodeList[i].value;
            myArray.push(self);
        }
}
console.log(myArray)

HTML

 <!DOCTYPE html>
<html>
<head>
  <title>Contact Me</title>
  <link rel="stylesheet" type="text/css" href="contactform_Lab8.css">
</head>

<body>

<form id="contactus">
    <fieldset>
        <label for="name">Name:</label>
            <input id="name" type="text" name="cf" autofocus required>
        <label for="email">Email:</label>
            <input id="email" type="email" name="cf" required>
        <label for="phone">Phone:</label>
            <input id="phone" type="tel" name="cf" required>
        <label for="status">Status:         
            <select id="status" name="cf" required>
                <option value="client">Client</option>
                <option value="partner">Partner</option>
                <option value="vendor">Vendor</option>
            </select>
        </label>
        <label for="subscribe">
            <input id="subscribe" type="checkbox" name="cf" value="check" checked> 
        Send me your newsletter</label>
        <label for="sales">
            <label for="support">
                <input id="sales" type="radio" name="slsSupport" value="sales" checked>Sales
                <input id="support" type="radio" name="slsSupport" value="support">Support
            </label>
        </label>
        <label for="msg">Message:</label>
            <textarea id="msg" name="cf" rows="10" cols="30" required></textarea>
        </fieldset>
        <fieldset>
        <button type="submit">Send</button>
        <button type="reset">Reset</button>
        </fieldset>
</form>
<script src="contactform_Lab8.js"></script>

</body>

</html>

Answer 1

ID名称是唯一的，不应在同一页面中使用两次。您只能通过选中的单选按钮获取值：

var inputs = document.getElementsByTagName('input');

for(var i = 0; i < inputs.length; i++) {
    if(inputs[i].type.toLowerCase() == 'radio') {
        if (inputs[i].checked){
            alert('Checked radio buttons value is:' + inputs[i].value);
        }
    }
}

Answer 2

在Jquery

$("input[name=slsSupport]:checked").val();

在普通的js中你想要找到所有的单选按钮，给每个单选按钮一个Id然后逐个选择它们：

function GetSelected() {
   for(var i=0;i<2;i++) {
       var element = document.getElementById('radio'+i);
       if (element.checked === true)
          return element
   }
}

Answer 3

ID必须在所有HTML文档中都是唯一的。要对输入进行分组（例如，无线电），您必须为它们指定相同的名称（而不是ID）。

要使用JQuery查找值this question，并使用纯JS解决方案查找this other question.

html表单 - 从选定的单选按钮获取值

3 个答案: