How to get checked radio button value using AJAX in PHP?

Question

I'm going to get the checked radio button value using AJAX in PHP. I have done the following code, but i can't continue.

I need your help.

ajax_radio.php

<html>
  <head>
    <script type="text/javascript" src="ajax.js" ></script>
  </head>
  <body>
    <input type="radio" name="radio1">Blue</input>
    <input type="radio" name="radio2">White</input>
    <input type="radio" name="radio3">Red</input>
    <input type="button" name="btn" value="Click" onClick="hello('a')"></input><br />
   <input type="text" id="btn_get" name="get_btn_value"></input>
  </body>
</html>

ajax.js

var xmlHttp;
function GetXmlHttpObject(){
    try{
        xmlHttp = new XMLHttpRequest();
    }
    catch(e){
        try{
            xmlHttp = new ActiveXObject(Msxml2.XMLHTTP);
        }
        catch(e){
            try{
                xmlHttp = new ActiveXObject(Microsoft.XMLHTTP);
            }
            catch(e){
                alert("doesn't support AJAX");
                return false;
            }
        }
    }
}
function hello(a){
    GetXmlHttpObject();
    xmlHttp.open("GET","ajax_radio.html?",true);
    xmlHttp.onreadystatechange = response;
    xmlHttp.send(null);
}
function response(){
    if(xmlHttp.readyState == 4){
        if(xmlHttp.status == 200){
            var radio_text = xmlHttp.responseText;
            document.getElementById('btn_get').innerHTML = radio_text;
        }
    }
}

Do you know how to complete this? Thanks in advance. :)

Edit:

I can't post the code here right now, because of the low speed of network. I'm sorry.

I have shared it in rapidshare. Can you download it firstly, and help then? Thanks a lot.

I have to update it when i go back home. Too bad.

huuuuh, so you can't paste code because y our network is slow? I thought paste was a standard windows fucntion :D... — Younes
– Younes, Commented Jan 27, 2010 at 10:20
I can paste the code, but when i submit the page, it turns out to be blank. I try to post somewhere else or make a zip file. I'm sorry for that. — SUN Jiangong
– SUN Jiangong, Commented Jan 27, 2010 at 10:22
Just paste the source code for your ajax by wrapping it with <pre><code></code></pre> — DoctorLouie
– DoctorLouie, Commented Jan 27, 2010 at 10:32
Select your code and click this nice little button with the 1s and the 0s in the editor. Code has always to be intended by four spaces. — Felix Kling
– Felix Kling, Commented Jan 27, 2010 at 13:58
If someone actually does download it, do us all a favor and paste it in. — Tyler Carter
– Tyler Carter, Commented Jan 27, 2010 at 14:02

RJD22 · Accepted Answer · 2010-01-27 15:52:04Z

12

because I mostly use Jquery I wrote here a jquery snipped that checks radio button values because it is much easier and cleaner:

<script src="http://www.google.com/jsapi"></script>
<script>
    google.load("jquery", "1.4.0");
</script>
<script type="text/javascript">
    $(function() {
        $('#buttoncheck').click(function () {
            var var_name = $("input[name='radio1']:checked").val();
            $('#btn_get').val(var_name);
        });
    });
</script>
<html>
    <head>
        <script type="text/javascript" src="ajax.js" ></script>
    </head>
    <body>
        <input type="radio" value="Blue" name="radio1">Blue</input>
        <input type="radio" value="White" name="radio1">White</input>
        <input type="radio" value="Red" name="radio1">Red</input>
        <input id="buttoncheck" type="button" name="btn" value="Click"></input>
        <br />
        <input type="text" id="btn_get" name="get_btn_value"></input>
    </body>
</html>

Take a look for jquery here: Jquery

Explanation: This part selects the item with the ID #buttoncheck and checks if its ran: $('#buttoncheck').click(function () {

Then it will run the code in the function. This code gets the value of a input box with the name radio1. the ':checked' makes sure that it only selects the value of the checked radio button:

var var_name = $("input[name='radio1']:checked").val();

And last. This puts the value of the variable into the item with #btn_get as id:

$('#btn_get').val(var_name);

edited Jan 27, 2010 at 15:52

answered Jan 27, 2010 at 14:17

RJD22

10.4k3 gold badges30 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

SUN Jiangong Over a year ago

@Thank you so much RJD22, you're so great!!! You've saved me and given me a good tutorial. Although it's done, i have to dive in it. I'm learning to use jQuery now, but it's still hard for me to understand your code. And i still want to try to realize it with pure ajax.

Felix Kling Over a year ago

@garcon1986: jQuery is "pure" JS that uses "pure" Ajax. The only thing it is to make your life easier by not have to worry about cross browser compatibility and some other nice helpers.

SUN Jiangong Over a year ago

@Felix, Thanks for your explanation. jQuery is a pretty good tool for developpers. Cheers.

RJD22 Over a year ago

@garcon1986: The snipped I wrote is really simple. Because you want to learn how to use it I added a small explanation

RJD22 Over a year ago

@Danny yes fairly easily actually just change it to $("input[name='radio1']").change(function () {

|

Collectives™ on Stack Overflow

How to get checked radio button value using AJAX in PHP?

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related