I'm stuck with this one! When I alert the object that I stringify the gender's value stays the same all the time! How to change this to work?
I have this piece of code:
<!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>
By all means test it and see what it does!
Thank you!
I'm stuck with this one! When I alert the object that I stringify the gender's value stays the same all the time! How to change this to work?
I have this piece of code:
<!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>
By all means test it and see what it does!
Thank you!
Share Improve this question edited Nov 4, 2011 at 10:29 Rostislav Matl 4,5534 gold badges31 silver badges55 bronze badges asked Nov 4, 2011 at 10:20 Joe_BJoe_B 2173 gold badges10 silver badges19 bronze badges3 Answers
Reset to default 3The element id must be unique into a page, so the first error is use the same id for 2 different radio. Use a unique 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
Then to retrieve the selected gender into your myJSONobj function use must use something like:
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'
};
or (a little bit more generic):
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
};
The identifier for 2 radiobuttons is the same: gender. You should rename one of them.
You cannot have two HTML elements with same ID. If this is the case then most browsers will return the first element in the source when you try to access them via document.getElementById. Here is a work around (only the changes are shown).
Revised 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
Revised JavaScript:
"gender":
document.getElementById("gender_M").checked
? document.getElementById("gender_M").value
: (
document.getElementById("gender_F").checked
? document.getElementById("gender_F").value
: undefined
)
Note that getting the value from radio buttons, check-boxes, select and multi-select elements is not simple as doing a .value. Normally you need to loop over the elements to find the checked/selected element. If you have more then two radio buttons for example it is best that you use a looping construct (and wrap it in a function) like so:
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"])