通过AJAX发送HTML单选按钮选择

时间:2019-02-20 10:42:26

标签: php html ajax radio-button

首先,我会浏览大量其他文章,以尝试找到解决方案,但是我无法使我的代码正常工作。

我想做的是通过AJAX向PHP发送单选按钮选择中的变量。我不想添加一个提交按钮,我希望在切换单选按钮后处理PHP代码。

我的简单代码如下,类似于成功用于下拉菜单的on.change代码,但我一直在努力使单选按钮具有相同的功能。

感谢所有可用的帮助。

HTML无线电按钮

<form>
<div class="label"><b>Include Points?</b></div>
<input type="radio" name="Pts" value="On" /> On
<input type="radio" name="Pts" value="Off" checked="checked" /> Off
</form> 

JQUERY AJAX

jQuery(document).ready( function($) {
    jQuery('#Pts').on( 'click', function () {
         Pts = $('input:radio[name=Pts]:checked').val();
     jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'call_radio_practice',
            Pts: Pts,
        },
         success:function(output){
             jQuery('#practice').html( output );
         }
     });
    }).click();
});

PHP

$Pts = $_POST['Pts'];
print_r($Pts);

1 个答案:

答案 0 :(得分:1)

您没有此选择器jQuery('#Pts')(id为Pts)。

更改为在change上收听input:radio[name=Pts]事件

jQuery(document).ready( function($) {
    jQuery('input:radio[name=Pts]').on('change', function () {
         Pts = $('input:radio[name=Pts]:checked').val();
     jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'call_radio_practice',
            Pts: Pts,
        },
         success:function(output){
             jQuery('#practice').html( output );
         }
     });
    });
});