Как выполнить запрос mysql в действие кнопки cf7

Question

Я использую контактную форму form7 с WordPress для сайта бронирования Gites. Моя проблема заключается в том, что когда клиент нажимает на кнопку формы, я должен выполнить запрос 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 file:

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