Javascript 无法使用JSON获取性别单选按钮值_Javascript_Json

Javascript 无法使用JSON获取性别单选按钮值

javascript json

Javascript 无法使用JSON获取性别单选按钮值,javascript,json,Javascript,Json,我受不了这个！当我提醒对象我将性别值字符串化时，性别值始终保持不变！如何将此更改为工作模式我有一段代码： <!DOCTYPE HTML> <html> <head> <title>Practical 2 - exercise</title> <script type="text/javascript"> function myJSONobj(){ var JSONO

我受不了这个！当我提醒对象我将性别值字符串化时，性别值始终保持不变！如何将此更改为工作模式

我有一段代码：

<!DOCTYPE HTML>
<html>
    <head>
    <title>Practical 2 - exercise</title>
    <script type="text/javascript">
        function myJSONobj(){

        var JSONObject={
            "name" : document.getElementById("name").value,
            "surname" : document.getElementById("surname").value,
            "email" : document.getElementById("eMail").value,
            "gender" : document.getElementById("gender").value
        };

        var jsonstr=JSON.stringify(JSONObject);
        alert(jsonstr);

        var jobjson=JSON.parse(jsonstr);
        alert(jobjson.gender);
        }
    </script>
    </head>
    <body>
    <form method="post" action="display.php">
            <p>
            Your name:
            </br>
            <input type="text" id="name" name="theName" placeholder="Fill in your name" autofocus="autofocus" required="required"/>
            </p>
            <p>
            Your surname:
            </br>
            <input type="text" id="surname" name="theSurname" placeholder="Fill in your surname" required="required"/>
            </p>
            <p>
            Your email:
            </br>
            <input type="email" id="eMail" name="theMail" placeholder="mail@mail.com" required="required"/>
            </p>
            <p> Please select your gender:
            <br/>
            <input type="radio" id="gender" name="gender" value="M" /> M
            <input type="radio" id="gender" name="gender" value="F" required="required" /> F
            </p>
            <input onClick="myJSONobj();" type="button" id="theSubmit" name="theSubmit" value="Fire away!!"/>
    </form>
    </body>
</html>

一定要测试它，看看它能做什么

谢谢大家!

两个单选按钮的标识符相同：性别。您应该重命名其中一个按钮。

两个单选按钮的标识符相同：性别。您应该重命名其中一个。

您不能有两个ID相同的HTML元素。如果是这种情况，那么当您尝试通过document.getElementById访问它们时，大多数浏览器将返回源中的第一个元素。这里是一个解决方案，仅显示更改

修订版HTML：

<input type="radio" id="gender_M" name="gender" value="M" /> M
<input type="radio" id="gender_F" name="gender" value="F" required="required" /> F

请注意，从单选按钮、复选框、select和multi-select元素中获取值并不像执行.value那样简单。通常，您需要在元素上循环以查找选中/选定的元素。例如，如果您有两个以上的单选按钮，则最好使用循环结构并将其包装在如下函数中：

function getValueOfRadios(radios) {
    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
            return radios[i].value;
        }
    }
}
// ... other code ...
"gender" : getValueOfRadios(document.forms[0]["gender"])

修订版HTML：

<input type="radio" id="gender_M" name="gender" value="M" /> M
<input type="radio" id="gender_F" name="gender" value="F" required="required" /> F

function getValueOfRadios(radios) {
    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
            return radios[i].value;
        }
    }
}
// ... other code ...
"gender" : getValueOfRadios(document.forms[0]["gender"])

元素id在页面中必须是唯一的，因此第一个错误是对两个不同的收音机使用相同的id。使用唯一的id：

<input type="radio" id="gender-M" name="gender" value="M" /> M
<input type="radio" id="gender-F" name="gender" value="F" required="required" /> F

或者更一般一点：

var radios = document.getElementsByName('gender');
var gender = '';
for(var i=0;i<radios.length;i++)
{
   if(radios[i].checked)
      gender = radios[i].value;
}

var JSONObject={
        "name" : document.getElementById("name").value,
        "surname" : document.getElementById("surname").value,
        "email" : document.getElementById("eMail").value,
        "gender" : gender
    };

元素id在页面中必须是唯一的，因此第一个错误是对两个不同的收音机使用相同的id。使用唯一的id：

<input type="radio" id="gender-M" name="gender" value="M" /> M
<input type="radio" id="gender-F" name="gender" value="F" required="required" /> F

或者更一般一点：

var radios = document.getElementsByName('gender');
var gender = '';
for(var i=0;i<radios.length;i++)
{
   if(radios[i].checked)
      gender = radios[i].value;
}

var JSONObject={
        "name" : document.getElementById("name").value,
        "surname" : document.getElementById("surname").value,
        "email" : document.getElementById("eMail").value,
        "gender" : gender
    };