narendra narendra - 6 months ago 11
jQuery Question

How to get the radio button value through ajax to php file

After clicking the radio button, the value from the radio button is not being passed when the onclick event is triggered. Here is my code:

<form name="Form1" id="color" style="font-size: 100%" action="#">
<input type="radio" name="radio1" id="radio1" onclick = "MyAlert()" value="blue"/>Blue <br /></p>
<p> <input type="radio" name="radio1" id="radio1" onclick = "MyAlert()" value="red"/>Red
</form>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function MyAlert() {
var radio1=$('input[type="radio"]:checked').val();
var pass_data = {
'radio1' : radio1,
};
alert(pass_data);
$.ajax({
url : "",
type : "POST",
data : pass_data,
success : function(data) {
}
});
return false;
}
</script>
<?php
echo $radio1=$_GET['radio1'];
?>


When I click the radio button, I get the error


Undefined index: radio1


I want to display value of the radio button when clicking it within the same page.

Answer

Firstly make ajax to separate PHP page where you will access the radio value. Also make alert after you receive the data.

$.ajax({
    url : "post.php",
    type : "POST",
    data: pass_data,
    success : function(data) {
        // alert radio value here
        alert(data);
    }
});

Crete a separate PHP file post.php where you access radio input. Since you are making POST request you need to use $_POST instead of $_GET to get radio button value.

<?php 
    $radio1 = $_POST['radio1'];
    echo $radio1;
?>