mysql - 如何将 mysql 查询执行到 cf7 按钮操作中

Question

我在 gites 预订网站上使用了带有 wordpress 的 form7 联系表格。我的问题是，当客户按下表单的按钮时，我必须执行返回价格的 mysql 请求，并且必须将其显示在表单上，​​如何继续知道表单存在以及按钮的处理如下有人可以帮助我吗

<label> Votre nom (obligatoire)
[text* your-name] </label>

<label> Votre adresse de messagerie (obligatoire)
[email* your-email] </label>

<label> Objet
[text your-subject] </label>

<label> Votre message
[textarea your-message] </label>

<button type="button" onclick="myFunction()">Calcul du séjour</button>

[submit "Envoyer"]

<script>
function myFunction() 
{
   alert('sent ok');
}
</script>

Answer 1

您可以使用jQuery和Ajax请求。

在表单中添加 HTML 以显示价格和更改按钮，如下所示:

<span class="price"></span>

<button type="button" class="calc_price">Calcul du séjour</button>

在主题的function.php文件中创建以下函数:

// define the actions for the two hooks created, first for logged in users and the next for logged out users
add_action("wp_ajax_calculate_price", "calculate_price");
add_action("wp_ajax_nopriv_calculate_price", "calculate_price");

function calculate_price() {
    // Get Price Code here

    echo $price;

    die();
}

创建一个 JS 文件并将其放入队列，如下所示:

function script_enqueue() {
      wp_enqueue_script( 'ajax-script', get_template_directory_uri() . '/js/my-ajax-script.js', array('jquery') );
      wp_localize_script( 'ajax-script', 'my_ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ) ) );
 }
 add_action( 'wp_enqueue_scripts', 'script_enqueue' );

在JS文件中添加以下jQuery代码:

jQuery( document ).ready( function() {
   jQuery(".calc_price").click( function(e) {
        e.preventDefault(); 
        jQuery.ajax({
            type : "get",
            url : my_ajax_object.ajax_url,
            data: {
                action: 'calculate_price'
            },
            success: function(response) {
                jQuery("span.price").html(response.data);
            }
        });
    });
});