在單選按鈕上單擊執行PHP函數，Wordpress

Question

我在wordpress文件中有兩個單選按鈕。我有兩個contact-form-7簡碼，如果收音機被點擊「是」，而另一個收音機按鈕是「否」，則想要執行一個。我願意使用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

呼籲點擊單選按鈕的功能第一：

$('#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也在單選按鈕內部被檢查狀態。

希望這會幫助你。

謝謝。

Answer 2

請通過以下步驟。

步驟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：複製和粘貼在相同PHP文件JavaScript代碼的下方。

<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：複製並在你的主題的functions.php文件粘貼下面的代碼snipeet。

//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');