Jump to content
jimfog

getting the value of radio button

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?

Share this post


Link to post
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

Share this post


Link to post
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;   	       });     }); 

Share this post


Link to post
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>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...