AJAX - 获取单选按钮的值并将其发送到PHP

时间:2015-02-21 20:49:25

标签: php html ajax

我已经有一段时间没有这个问题了,我想我已经卡住了。我一直在阅读如何使用AJAX将数据发送到PHP文件。

问题是,我真的不知道如何在HTML页面中获取单选按钮的值,然后通过AJAX将该值发送到PHP文件,然后该文件将处理该值。

例如:

如果我有2个单选按钮

<input type="radio" name="radio" value="yes">
<input type="radio" name="radio" value="no">

我想使用这些单选按钮的值并使用AJAX将其发送到我的PHP文件。

接下来我将能够在PHP中处理这些值。 如何让AJAX将所选单选按钮的值发送给PHP?

先谢谢!

编辑:

完整代码:

HTML文件

<script type="text/javascript">
    function updatePremium() {
        var input1= $("#premium-yes").val();
        var input2= $("#premium-no").val();
        $.post( "upd_premium.php", { input1: input1, input2: input2 } );
    }
</script>

<div class="usersRow2">
    <form action="" method="POST"><label>Premium:</label> <p class="text-info-premium"><?php echo ucwords($premium_check) ?><i class="icon-star"></i></p> <div class="controls-premium"><a href='#' id="edit-premium" class="btn"><i class="fa fa-pencil"></i> Edit</a></div></form>
</div>

<script>
$('#edit-premium').click(function() {
 var text = $('.text-info-premium').text();
 var input = $('<input type="radio" name="premium" id="premium-yes" value="yes">Yes <input type="radio" name="premium" id="premium-no" value="no">No <div id="premium"></div>')

 $('.text-info-premium').text('').append(input);
 $('#edit-premium').remove();
 $('<a href="#" id="update-premium" onClick="updatePremium()" class="btn">Update</a>').insertAfter('#premium');

 $('<i class="fa fa-times" title="Cancel Edit"></i> <br /><br /><br />').insertAfter('#update-premium');
 $('.fa-times').click(function() {
    location.reload();
 });

});
</script>

PHP文件

if($_POST['input1'] == 'yes') {
    print_r($_POST);
}

1 个答案:

答案 0 :(得分:0)

使用jQuery。从docs开始,帖子很简单:

$.post( "test.php", { name: "John", time: "2pm" } );

现在,您需要获取输入的值并将它们传递给帖子:

<input type="radio" name="radio" value="yes" id="input1">
<input type="radio" name="radio" value="no" id="input2">

<script>
    var input1= $( "#input1" ).val();
    var input2= $( "#input2" ).val();
    $.post( "yourphpfile.php", { input1: input1, input2: input2 } );
</script>