通过ajax到php文件获取单选按钮值 - Get the radio button value through ajax to php file

单击单选按钮后，当触发onclick事件时，不会传递单选按钮的值。这是我的代码：

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

当我点击单选按钮时，我得到错误

未定义的索引：radio1

我想在同一页面中单击单选按钮时显示它的值。

首先使用ajax来分离PHP页面，在那里您可以访问radio值。也要在收到数据后发出警报。

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

Crete一个单独的PHP文件post.PHP，用于访问无线电输入。由于您正在进行POST请求，因此需要使用$_POST而不是$_GET来获取单选按钮值。

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

我会使用较新版本的jquery。
你不能给两个元素相同的id。
我会重写代码如下：

$(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.com/jquery-1.12.3.min.js"></script>

试试这个-->

<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();
//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'];
}
?>

上面的代码用ajax处理，所以它不会刷新页面。

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