Блог

У меня есть страница, созданная на WordPress с отредактированной мной пользовательской темой. Я пытался создать свою собственную форму, используя ajax без какого-либо плагина. Проблема в том, что у меня нет никаких ошибок и т. Д., А форма по-прежнему ничего не делает (просто перезагружает страницу). Я сделал все, как на странице учебника, и до сих пор не знаю, что делать. Я понял, что php-код не выполняется. Как вы можете видеть, есть входные условия, которые не выполняются :/

Это то, что я сделал до сих пор:

HTML:

 <section id="contact_content">
        <form name="contact_me" action="" method="post">
        <?php if( get_field('contact_header') ): ?>
            <div id="contact_header"><?php the_field('contact_header'); ?></div>
        <?php endif; ?>
        <input type="text" name="form_name" placeholder="<?php the_field('contact_name'); ?>" id="contact_name"> <br />
        <input type="number" name="form_phone_number" placeholder="<?php the_field('contact_phone'); ?>" id="contact_phone"> <br />
        <input type="email" name="form_email" placeholder="<?php the_field('contact_mail'); ?>" id="contact_mail"> <br />
        <input type="text" name="form_comment" placeholder="<?php the_field('contact_message'); ?>" id="contact_message" style="height: 190px;"><br />
            <input type="hidden" name="action" value="send_form" style="display: none; visibility: hidden; opacity: 0;">
        <button type="submit" id="contact_button">wyślij</button>
        </form>
    </section>
  

function.php

 function javascript_variables(){ ?>
    <script type="text/javascript">
        let ajax_url = '<?php echo admin_url( "admin-ajax.php" ); ?>';
        let ajax_nonce = '<?php echo wp_create_nonce( "secure_nonce_name" ); ?>';
        //form AJAX validation
        $( 'form[name="contact_me"]' ).on( 'submit', function() {
            let form_data = $( this ).serializeArray();

            form_data.push( { "name" : "security", "value" : ajax_nonce } );

            $.ajax({
                url : ajax_url,
                type : 'post',
                data : form_data,
                success : function( response ) {
                    console.log( response );
                },
                fail : function( err ) {
                    console.log( "Błąd: "   err );
                }
            });
            return false;
        });
    </script><?php
}
add_action ( 'wp_head', 'javascript_variables' );
add_action('wp_ajax_send_form', 'send_form');
add_action('wp_ajax_nopriv_send_form', 'send_form');

function send_form(){

    check_ajax_referer( 'secure-nonce-name', 'security' );

    if ( empty( $_POST["form_name"] ) ) {
        echo "Wprowadź imię i nazwisko.";
        wp_die();
    }
    if ( ! filter_var( $_POST["form_email"], FILTER_VALIDATE_EMAIL ) ) {
        echo "Wprowadź poprawny adres e-mail.";
        wp_die();
    }
    if ( empty( $_POST["form_comment"] ) ) {
        echo "Wprowadź wiadomość.";
        wp_die();
    }
    if ( empty($_POST["form_phone_number"] ) ) {
        echo 'Wprowadź numer telefonu';
        wp_die();
    }

    $to = 'dawidt9882@gmail.com';
    $subject = 'Now message from a client!';

    $body  = 'From: ' . $_POST['form_name'] . 'n';
    $body .= 'Number: ' . $_POST['form_phone_number'] . 'n';
    $body .= 'Email: ' . $_POST['form_email'] . 'n';
    $body .= 'Message: ' . $_POST['form_comment'] . 'n';

    $headers = array('Content-Type: text/html; charset=UTF-8');

    wp_mail( $to, $subject, $body, $headers );

    echo 'Wiadomość została wysłana! ;p';
    wp_die();
}
  

Есть идеи? : c

Попробуйте это:

 $( 'form[name="contact_me"]' ).on( 'submit', function(ev) {
        ev.preventDefault();
        let form_data = $( this ).serializeArray();

        form_data.push( { "name" : "security", "value" : ajax_nonce, "action" : "send_form" } );

        $.ajax({
            url : ajax_url,
            type : 'post',
            data : form_data,
            success : function( response ) {
                console.log( response );
            },
            fail : function( err ) {
                console.log( "Błąd: "   err );
            }
        });
        return false;
    });
  

Итак, теперь js выглядит так:

         let ajax_url = '<?php echo admin_url( "admin-ajax.php" ); ?>';
        let ajax_nonce = '<?php echo wp_create_nonce( "secure_nonce_name" ); ?>';
        //form AJAX validation
        $( '#contact_button' ).on( 'click', function(ev) {
            ev.preventDefault();
            let form_data = $( this ).serializeArray();

            form_data.push( { "name" : "security", "value" : ajax_nonce, "action" : "send_form" } );

            $.ajax({
                url : ajax_url,
                type : 'post',
                data : form_data,
                success : function( response ) {
                    console.log( response );
                },
                fail : function( err ) {
                    console.log( "Błąd: "   err );
                }
            });
            return false;
        });
    </script><?php
  

И он по-прежнему ничего не делает. :/ Если я допустил ошибку, пожалуйста, отговорите меня от любого понятия.