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=".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.

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./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.

• javascript
• php
• jquery
• ajax

• $_GET['radio1']; and type : "POST", dont match.. choose wisely – guradio Commented May 19, 2016 at 5:15
• What kind of a question is this?! – Ikhlak S. Commented May 25, 2016 at 8:50

5 Answers 5

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;
?>

  <input type="radio"  id="status" name="status" value="1" /> Mbyllur<br />
  <input type="radio"  id="status" name="status" value="0" /> Hapur<br />


  function MyAlert()  
      {  
  var radio1=$('input[type="radio"]:checked').val();
  var pass_data = {
                    'radio1' : $('input[name=status]:checked').val(),
              };
              alert(pass_data);
              $.ajax({
                    url : "",
                    type : "POST",
                    data : pass_data,
                    success : function(data) {
                    }
              });
              return false;
      } 

1. I would use a newer version of jquery .

2. You can't give two elements the same id.

3. I would rewrite the code as follow :

$(function() {
	$(document).on('change', '[name="radio1"]' , function(){
  	var val = $('[name="radio1"]:checked').val();
    alert(val);

    
    /* 

    Ajax code 1 (GET) : 
    $.get('/myurl?val='  + val, function(){

    });


    Ajax code 2 (POST) : 
    $.post('/myurl', {val : val},  function(){

    });

    */
  }); 

});

<form name="Form1" id="color" style="font-size: 100%" action="#" >  
<input type="radio"  name="radio1" value="blue"/>Blue  <br />
<p> <input type="radio"  name="radio1" value="red"/>Red  
</form>  
<script src="https://code.jquery./jquery-1.12.3.min.js"></script>

Try This -->

<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./ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">  
function MyAlert()  
    {  
var radio1=$('input[type="radio"]:checked').val();
//alert(radio1);
var pass_data = {
            'radio1' : radio1,
        };
        //alert(pass_data);
        $.ajax({
            url : "request.php",  // create a new php page to handle ajax request
            type : "POST",
            data : pass_data,
            success : function(data) {
            }
        });
        return false;
    }  
</script>

request.php

<?php
if(isset($_POST['radio1']))
{
    echo $radio1=$_POST['radio1'];
}
?>

Above code handle with ajax so, its not refresh the page.

<script>
    $(document).ready(function() {
        $("#Enviar").click(function (e) {

            var cedula = document.getElementById("Cedula").value;
            var Nombre = document.getElementById("Nombre").value;
            var Apellido = document.getElementById("Apellido").value;
            var Sexo = $('input:radio[name=SexoC]:checked').val();
            var Edad = document.getElementById("Edad").value;
            var FechaN = document.getElementById("date").value;
            var Tele = document.getElementById("tel").value;
            var Direccion = document.getElementById("Direccion").value;
            var Invitacion = document.getElementById("Invitacion").value;
            var CasaG = document.getElementById("CasaG").value;
            var Rango = document.getElementById("Rango").value;

            var cadena = "Cedula="+cedula+"&Nombre="+Nombre+"&Apellido="+Apellido+"&Sexo="+Sexo+"&Edad="+Edad+"&Fecha="+FechaN+"&Tele="+Tele+"&Direccion="+Direccion+"&Invitacion="+Invitacion+"&CasaG="+CasaG+"&Rango="+Rango;

                    $.ajax({
                        type:'POST',
                        url:'datos/Registrar.php',
                        data: cadena,
                        beforeSend: function(){
                        console.log(cadena);
                     },
                        success:function(Resp){
                            alert(Resp);
                        }
                    });
                    return false;

        });
    });
        </script>