Jump to content

getting the value of radio button


jimfog
 Share

Recommended Posts

I want to get the value of the radio button the user selected and send that with JSON to the server.I am not interested in learning the JSON syntax to use-more or less I know that. I want to know how to "grab" the value of the radio button selected by the user. THis is the HTML:

<td> <label class="label" for="buztype">buztype</label><br></td>                                            <input type="radio" id="1"    name="buztype" value="1"> petshop<br>                      <input type="radio" id="2"     name="buztype" value="2"> salon spa <br>                      <input type="radio"  id="3"    name="buztype" value="3">medical <br>

What js code will be needed to accomplish the task described above?

Link to comment
Share on other sites

This may be of some help: http://www.w3schools...dio_checked.asp Or you can try this: Say the id for the form above is: id="formBuzType"

var form = document.getElementById('formBuzType');	 // loop through the radio buttons to find which one is checked, then set var valueSelected to the value of the selected radio button	 for(var i = 0; i < form.buztype.length; i++)  // buztype is the name of the radio buttons which is an array; ie buztype[0].value is 1, buztype[1].value is 2, buztype[2].value is 3 based on what you have above.	 { 		  if(form.buztype[i].checked)		  {                       var valueSelected = form.buztype[i].value;		  } 	  }

Hope this helps.

Edited by Don E
Link to comment
Share on other sites

The code you gave me does not work...it might be correct in itself but in the broader code context I think there is something wrong-see the whole code

$(function() {    $('.error').hide();    $("#savepersonal").click(function() {	    event.preventDefault();		 $('.error').hide(); 	 	    var name = $("input#name").val(); 	    if (name == "") { 	  $("label#name_error").show(); 	  $("input#name").focus(); 	  return false;     }       var lastname = $("input#lastname").val(); 	    if (lastname == "") { 	  $("label#lastname_error").show(); 	  $("input#lastname").focus(); 	  return false;     }var form = document.getElementById('formBuzType');         // loop through the radio buttons to find which one is checked, then set var valueSelected to the value of the selected radio button         for(var i = 0; i < form.buztype.length; i++)  // buztype is the name of the radio buttons which is an array; ie buztype[0].value is 1, buztype[1].value is 2, buztype[2].value is 3 based on what you have above.         {                   if(form.buztype[i].checked)                  {                       var valueSelected = form.buztype[i].value;                  }           }    	 $.ajax({	  type: "POST",	  url: "testajax.php",	  data: {"name":name,"lastname":lastname,"btype":valueSelected}	 });      return false;   	       });     }); 

Link to comment
Share on other sites

Hey Jim, I'm not too familiar with jquery but the following code may give you insight on what you're probably missing in your code that's not allowing it work:

<!doctype html><html><head><meta charset="UTF-8"><title>Form radio button checking</title> <script type="text/javascript"> function checkValue() // if you pass the form, checkValue(form){      var form = document.getElementById('formBuzType'); // if you passed the form, you wouldn't need this line.     for(var i = 0; i < form.buztype.length; i++)     {          if(form.buztype[i].checked)          {          var selectedValue = form.buztype[i].value;          }      }       alert(selectedValue);     return false;}  </script>  </head> <body> <form id="formBuzType" method="post" action="#" onSubmit="return checkValue();" > <!-- you can pass the form here as well by doing: return checkValue(this);  --><input type="radio" id="1"    name="buztype" value="1"> petshop<br>    <input type="radio" id="2"     name="buztype" value="2"> salon spa <br>    <input type="radio"  id="3"    name="buztype" value="3">medical <br><input type="submit" value="Submit"/></form></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...