Question

我在wordpress文件中有两个单选按钮。我有两个contact-form-7短代码，如果点击收音机就想执行一个＆＃34;是＆＃34;如果单选按钮是＆＃34;否＆＃34;则另一个。我愿意使用ajax，因为我不希望页面重新加载但不知道如何使用它。如果你可以指导我会很棒。

示例HTML：

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

<script>
if(radio==yes){
call_php_shortcode1();
}elseid(radio == no){
call_php_shortcode2();
}
</script>

Answer 1

请完成以下步骤。

步骤1：将以下radion按钮代码复制并粘贴到php文件中。

<input type="radio" name="radio" value="yes" onclick="getRadioVaal(this.value)"/>Form1

<input type="radio" name="radio" value="no" onclick="getRadioVaal(this.value)"/> Form2  

<div id="result"></div>

步骤2：将以下javascript代码复制并粘贴到同一个php文件中。

<script type="text/javascript"> 
        function getRadioVaal(radio_val){
           // alert(radio_val);
            $.ajax({
            type: "POST",
            url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
            data: "action=get_radio_button_vale&radio_val="+radio_val,
            success:function(response){
                                $('#result').html(response);
            }
        });

        }
        </script>

步骤2：将以下代码snipeet复制并粘贴到主题 functions.php 文件中。

//Ajax call for display form on click radio button
function display_contact_form(){
     if($_POST['radio_val'] === 'yes'){
            echo do_shortcode('[contact-form-7 id="28" title="Contact form 1"]');
        }else if($_POST['radio_val'] === 'no'){
            echo do_shortcode('[contact-form-7 id="29" title="Contact form 2"]');
        }
       exit;

}
add_action( 'wp_ajax_get_radio_button_vale', 'display_contact_form' );
add_action( 'wp_ajax_nopriv_get_radio_button_vale', 'display_contact_form' );

Answer 2

首先点击单选按钮调用该功能：

$('#radioButtonContainerId input:radio').click(function() {
    if ($(this).val() === '1') {
      myFunction();
    } else if ($(this).val() === '2') {
      myOtherFunction();
    } 
  });

然后在函数内部可以调用ajax，

function myFunction(){
$.ajax(this.href, {
      success: function(data) {
         $('#main').html($(data).find('#main *'));
         $('#notification-bar').text('The page has been successfully loaded');
      },
      error: function() {
         $('#notification-bar').text('An error occurred');
      }
   });
}

你也可以直接调用ajax里面的单选按钮被检查状态。

希望这会对你有所帮助。

感谢。

单击单选按钮，Wordpress执行PHP功能

2 个答案: