使用JSON無法獲得性別單選按鈕值

我被這個問題困住了！當我提醒對象時，我將其字符串化，性別的值始終保持不變！如何改變這個工作？使用JSON無法獲得性別單選按鈕值

我有這樣一段代碼：

<!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="[email protected]" 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>

通過一切手段對其進行測試，看看它做什麼！

謝謝！

來源

2011-11-04 Joe_B

元素ID必須是唯一進入一個頁面，所以第一錯誤是爲2個不同的收音機使用相同的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

然後檢索選定的性別問題納入您的myJSONobj功能使用時必須使用類似：

var JSONObject={ 
     "name" : document.getElementById("name").value, 
     "surname" : document.getElementById("surname").value, 
     "email" : document.getElementById("eMail").value, 
     "gender" : document.getElementById("gender-M").checked ? 'M' : '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 
    };

來源

2011-11-04 10:42:06 Damiano

2個單選按鈕的標識符相同：gender。你應該重命名其中的一個。

來源

2011-11-04 10:32:30

您不能擁有兩個具有相同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

修訂的JavaScript：

"gender": 
    document.getElementById("gender_M").checked 
     ? document.getElementById("gender_M").value 
     : (
      document.getElementById("gender_F").checked 
       ? document.getElementById("gender_F").value 
       : undefined 
     )

注意，正從單選按鈕的值，在方框中打勾，選擇和多選元素不是簡單的做一個.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"])

來源

2011-11-04 10:41:19

使用JSON無法獲得性別單選按鈕值

回答

相關問題