通过Ajax将单选按钮数据（值）发送到PHP

Question

In the below JavaScript, I am unable to send radio button data to PHP. Example: if radio button "Mother" is selected, the selected value of "Mother" should be send through ajax. But my problem is that I am unable to send the selected radio button value from ajax. I Google'd it, but I am unable to solve it. Can you share the code for solving this problem.

This is the JavaScript code:

<script language="JavaScript">
    var HttPRequest = false;
    function doCallAjax() {
        var test = $("#txtUsername").val();
        var test2 = $("#txtPassword").val();

        if(test=='')
        {
            alert("Please Enter Register Number");
        }
        else if(test2=='')
        {
            alert("Please Enter Date Of Birth");
        }
        else
        {
            HttPRequest = false;
            if (window.XMLHttpRequest) { // Mozilla, Safari,...
                HttPRequest = new XMLHttpRequest();
                if (HttPRequest.overrideMimeType) {
                    HttPRequest.overrideMimeType('text/html');
                }
            } else if (window.ActiveXObject) { // IE
                try {
                    HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {}
                }
            } 

            if (!HttPRequest) {
                alert('Cannot create XMLHTTP instance');
                return false;
            }
            **// iam using this For Validation to send data to different urls based on selection**

            var game1 = $('input[type="radio"]:checked').val();

            if (game1 === "Mother") {
                var url = 'http://localhost:9999/check.php';
            }
            else if (game1 === "Father") {
                alert('Father');
            }
            else {
                HttPRequest = false;
                alert('select 1');
            }

            **this is Where ima stucked**
            var pmeters = "tUsername=" + encodeURI( document.getElementById("txtUsername").value) +
                "&tPassword=" + encodeURI( document.getElementById("txtPassword").value );
                "&game=" + $('input[type="radio"]:checked').val();

            HttPRequest.open('POST',url,true);
            HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            HttPRequest.setRequestHeader("Content-length", pmeters.length);
            HttPRequest.setRequestHeader("Connection", "close");
            HttPRequest.send(pmeters);

            HttPRequest.onreadystatechange = function()
            {
                if(HttPRequest.readyState == 3)  // Loading Request
                {
                    document.getElementById("mySpan").innerHTML = "Now is Loading...";
                }

                if(HttPRequest.readyState == 4) // Return Request
                {
                    if(HttPRequest.responseText == 'Y')
                    {
                        window.location = 'success.html';
                    }
                    else if (HttPRequest.responseText == 'z')
                    {
                        document.getElementById("mySpan").innerHTML = "";
                        window.alert("bad registernumber or dob");
                    }
                    else if (HttPRequest.responseText == 'b')
                    {
                        document.getElementById("mySpan").innerHTML = "";
                        window.alert("userexist");
                    }
                }
            }
        }
    }
</script>

This is html code

<br/>
<input type="radio" name="game" value="Mother">Mother
<br />
<input type="radio" name="game" value="Father">Father
<br />
<input type="radio" name="game" value="Self">Self
<br />
<input type="radio" name="game" value="Other">Other
<br />
</table>
<br>
<input name="btnLogin" type="button" id="btnLogin" OnClick="JavaScript:doCallAjax();" value="Login">

Answer 1

First I would suggest you to use jQuery , because it is really simplier and better.

Then you can use the following code to post the checkbox/radio value:

$("#game").val()

Here you can find the really simple syntax for Ajax with jQuery.

Answer 2

Please remove $('input[type="radio"]:checked').val() and replace with a var game. Before that please use below code to get value of checked radio button in var game.

var elements = document.getElementsByName("game");
var game;
for(var i = 0; i < elements.length; i++ ){
 if(elements[i].checked){
   game = elements[i].value;
  }
}

So now your code will look like

var pmeters = "tUsername=" + encodeURI( document.getElementById("txtUsername").value) +
                        "&tPassword=" + encodeURI( document.getElementById("txtPassword").value );

                            "&game=" + game;