By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,853 Members | 941 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,853 IT Pros & Developers. It's quick & easy.

Pass value of radio button using GET method in Ajax

P: 23
Hi,

I am having a form which has a text box and 3 radio buttons. I am using GET method in Ajax to pass the value. I can pass the value of the textbox fine but how to pass the value of radio button?

I searched a few things on Google but I find the javascript below most useful in my case but there is some problem that my code is not running:


Expand|Select|Wrap|Line Numbers
  1. var test = document.getElementsByName("meal");
  2. for (i = 0; i < test.length; i++) {
  3. if (test[i].checked) 
  4.   // code to do something here ... should I store it in a hidden text field by saying - 
  5. getElementByID("third_text_field").value=myform.test[i].value; 
  6.  
  7. //If I do this I think I can send the value in a text form to javascript and then pass it in GET url link for PHP to handle or don't how to synchronise after passing the value back to form. I am a bit confused here.
  8.  
So basically what my code is like:

[HTML]<html>
<head>
<script>
[/HTML]
Expand|Select|Wrap|Line Numbers
  1. function submitting()
  2. {
  3.     var http;
  4.     try {  http = new ActiveXObject('Msxml2.XMLHTTP');   }
  5.     catch (e)
  6.     {
  7.         try {   http = new ActiveXObject('Microsoft.XMLHTTP');    }
  8.         catch (e2)
  9.         {
  10.           try {  http = new XMLHttpRequest();     }
  11.           catch (e3) {  test = false;   }
  12.         }
  13.      }
  14.  
  15.  
  16.    var params = document.getElementById("username").value;
  17.    var parameter = document.getElementById("meal").value;
  18.  
  19. // I know there is a problem here and the value returned might be undefined so I need some correction here
  20.  
  21.     http.onreadystatechange  = function()
  22.     {
  23.     if(http.readyState == 1)
  24.      {
  25.      document.getElementById('listing').innerHTML = '<font size=4>Checking Availability</font>';
  26.  
  27.       }
  28.         if(http.readyState  == 4)
  29.          {
  30.               if(http.status  == 200)
  31.                   document.getElementById("listing").innerHTML=test.responseText;
  32.               else
  33.                  document.getElementById("listing").innerHTML=test.status;
  34.          }
  35.     }
  36.  
  37.    test.open("GET","menu_list.php?username="+params+"&meal="+parameter, true);
  38.  
  39.    test.send(null);
  40. }
Expand|Select|Wrap|Line Numbers
  1. </script>
  2. </head>
  3.  
  4. <body>
  5.     <form method="post" name="myform" action="">
  6. Enter your name please:
  7. <input type="text" name="username" >
  8.  
  9. Select spices below:
  10. <input type="radio" name="meal" value="breakfast">
  11. <input type="radio" name="meal" value="lunch">
  12. <input type="radio" name="meal" value="dinner">
  13.  
  14.  
  15. <input type="button" value="Click to view menu"  onclick="submitting();">
  16. <div id = "listing">
  17. </div>
  18.  
  19. </form>
  20. </body>
  21. </html>

I am trying to figure out the javascript myself since it is not returning any result. But if someone here knows whether the javascript I want to use is correct or not as per syntax or if something is missing, it will be a great help for me to learn the basics.

Cheers.
Nov 28 '07 #1
Share this Question
Share on Google+
5 Replies


P: 23
Hi,

I am having a form which has a text box and 3 radio buttons. I am using GET method in Ajax to pass the value. I can pass the value of the textbox fine but how to pass the value of radio button?

I searched a few things on Google but I find the javascript below most useful in my case but there is some problem that my code is not running:


Expand|Select|Wrap|Line Numbers
  1. var test = document.getElementsByName("meal");
  2. for (i = 0; i < test.length; i++) {
  3. if (test[i].checked) 
  4.   // code to do something here ... should I store it in a hidden text field by saying - 
  5. getElementByID("third_text_field").value=myform.test[i].value; 
  6.  
  7. //If I do this I think I can send the value in a text form to javascript and then pass it in GET url link for PHP to handle or don't how to synchronise after passing the value back to form. I am a bit confused here.
  8.  
So basically what my code is like:

<html>
<head>
<script>
function submitting()
{
var http;
try { http = new ActiveXObject('Msxml2.XMLHTTP'); }
catch (e)
{
try { http = new ActiveXObject('Microsoft.XMLHTTP'); }
catch (e2)
{
try { http = new XMLHttpRequest(); }
catch (e3) { test = false; }
}
}


var params = document.getElementById("username").value;
var parameter = document.getElementById("meal").value;

I know there is a problem here and the value returned might be undefined so I need some correction here

http.onreadystatechange = function()
{
if(http.readyState == 1)
{
document.getElementById('listing').innerHTML = '<font size=4>Checking Availability</font>';

}
if(http.readyState == 4)
{
if(http.status == 200)
document.getElementById("listing").innerHTML=test. responseText;
else
document.getElementById("listing").innerHTML=test. status;
}
}

http.open("GET","menu_list.php?username="+params+" &meal="+parameter, true);

http.send(null);
}
</script>
</head>

<body>
<form method="post" name="myform" action="">
Enter your name please:
<input type="text" name="username" >

Select spices below:
<input type="radio" name="meal" value="breakfast">
<input type="radio" name="meal" value="lunch">
<input type="radio" name="meal" value="dinner">


<input type="button" value="Click to view menu" onclick="submitting();">
<div id = "listing">
</div>

</form>
</body>
</html>


I am trying to figure out the javascript myself since it is not returning any result. But if someone here knows whether the javascript I want to use is correct or not as per syntax or if something is missing, it will be a great help for me to learn the basics.

Cheers.
I have correct my error in code but still can't figure to get the value for the radio button. Anyone can let me know please?
Nov 29 '07 #2

acoder
Expert Mod 15k+
P: 16,027
Try:
Expand|Select|Wrap|Line Numbers
  1. var test = document.getElementsByName("meal");
  2. for (i = 0; i < test.length; i++) {
  3.  if (test[i].checked) parameter = test[i].value;
  4. }
Nov 29 '07 #3

P: 23
Try:
Expand|Select|Wrap|Line Numbers
  1. var test = document.getElementsByName("meal");
  2. for (i = 0; i < test.length; i++) {
  3.  if (test[i].checked) parameter = test[i].value;
  4. }
Thank you Acoder. Your help is much appreciated :-)
I had a feeling I was missing something very basic.

Cheers.
Nov 29 '07 #4

acoder
Expert Mod 15k+
P: 16,027
No problem. Glad it helped.
Nov 29 '07 #5

P: 1
hey ,thanks from all with this debate
Sep 14 '10 #6

Post your reply

Sign in to post your reply or Sign up for a free account.