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:

Copy

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

Solution 2:

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


  functionMyAlert()  
      {  
  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) {
                    }
              });
              returnfalse;
      } 

Solution 3:

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(){

    });

    */
  }); 

});

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

Solution 4:

Try This -->

<formname="Form1"id="color"style="font-size: 100%"action="#" ><inputtype="radio"name="radio1"id="radio1"onclick = "MyAlert()"value="blue"/>Blue  <br /></p><p><inputtype="radio"name="radio1"id="radio1"onclick = "MyAlert()"value="red"/>Red  
    </form><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><scripttype="text/javascript">functionMyAlert()  
    {  
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) {
            }
        });
        returnfalse;
    }  
</script>

request.php

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

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

Solution 5:

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

            var cedula = document.getElementById("Cedula").value;
            varNombre = document.getElementById("Nombre").value;
            varApellido = document.getElementById("Apellido").value;
            varSexo = $('input:radio[name=SexoC]:checked').val();
            varEdad = document.getElementById("Edad").value;
            varFechaN = document.getElementById("date").value;
            varTele = document.getElementById("tel").value;
            varDireccion = document.getElementById("Direccion").value;
            varInvitacion = document.getElementById("Invitacion").value;
            varCasaG = document.getElementById("CasaG").value;
            varRango = 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);
                        }
                    });
                    returnfalse;

        });
    });
        </script>