0

i have to create a specifif form ta register data into the database and send a mail without refreshing the page

so i create a script.js file :

    (function ($) {
    $(document).ready(function () {

        jQuery('form[name="form_result"]').on('submit', function() {
            var form_data = jQuery(this).serializeArray();
            console.log('hello');
            form_data.push({"name" : "security", "value" : ajax_nonce });
            console.log(form_data);
            // Here is the ajax petition
            jQuery.ajax({
                url : ajax_url,
                type : 'post',
                data : form_data,
                success : function( response ) {
                    // You can craft something here to handle the message return
                    alert(response);
                },
                fail : function( err ) {
                    alert("there was an error: " + err );
                }
            });
            // This return prevents the submit event to refresh the page.
            return false;
        });    
      });
})(jQuery);

in my function.php file i declare has follow :

function javascript_variables(){ ?>
    <script type="text/javascript">
        var ajax_url = '<?php echo admin_url( "admin-ajax.php" ); ?>';
        var ajax_nonce = '<?php echo wp_create_nonce( "secure_nonce_name" ); ?>';
    </script><?php
}
add_action ( 'wp_head', 'javascript_variables' );


//AJAX REQUEST
function twentytwentychild_asset() {
    // ...
    wp_enqueue_script('jquery');

    // Charger notre script
    wp_enqueue_script(
        'twentytwentychild',
        get_stylesheet_directory_uri(). '/assets/js/script.js', 
        array('jquery'),
        '1.0', true
    );

    // Envoyer une variable de PHP à JS proprement
    wp_localize_script('twentytwentychild', 'ajaxurl', admin_url('admin-ajax.php'));
}
add_action('wp_enqueue_scripts', 'twentytwentychild_asset');


add_action('wp_ajax_send_form', 'send_form'); // This is for authenticated users
add_action('wp_ajax_nopriv_send_form', 'send_form');

function send_form(){
    // This is a secure process to validate if this request comes from a valid source.
    check_ajax_referer( 'secure-nonce-name', 'security' );
 
    /**
     * First we make some validations, 
     * I think you are able to put better validations and sanitizations. =)
     */
     
    if ( empty( $_POST["name"] ) ) {
        echo "Insert your name please";
        wp_die();
    }
 
    if ( ! filter_var( $_POST["email"], FILTER_VALIDATE_EMAIL ) ) {
        echo 'Insert your email please';
        wp_die();
    }
 
    if ( empty( $_POST["fcPhone"] ) ) {
        echo "Insert your phone please";
        wp_die();
    }

    $to = '[email protected]';

    $subject = 'Un potentiel consultant viens de faire une simulation!';

    $body  = 'From: ' . $_POST['name'] . '\n';
    $body .= 'Email: ' . $_POST['email'] . '\n';
    $body .= 'Message: ' . $_POST['fcPhone'] . '\n';

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

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

    echo 'Done!';
    wp_die();
     
}

and my template page it's a simple form :

<form action="" method="post" name="form_result">
    <div id="simulation_form">
        <div style="margin-bottom: 2rem; display: flex;">
            <div class="vc_col-sm-4">
                <div class="simulation_form_q">Votre name:*</div>
                <div class="simulation_form_r">
                    <input type="text" id="name" name="name" required>
                </div>
            </div>
            <div class="vc_col-sm-8">
                <div class="simulation_form_q">Votre email:*</div>
                <div class="simulation_form_r">
                    <input type="email" name="email" id="email" required>
                </div>
            </div>
            <div class="vc_col-sm-8">
                <div class="simulation_form_q">Votre numero de telephone:*</div>
                <div class="simulation_form_r">
                    <input type="text" name="fcPhone" id="telephone" required>
                </div>
            </div>
        </div>

        <input type="hidden" name="action" value="send_form" style="display: none; visibility: hidden; opacity: 0;"/>
        <div class="simulation_form_btn">
            <input type="submit" value="calculez vos revenus">
        </div>
    </div>
</form>

but when i send the Ajax request i have 403 error forbidden I don't know why i clear the cache and the cookie i use console log to debug the ajax request and it send all the data yet i have still that 403 ERROR and i don't know how to solve it

1
  • If it is returning 403, it may be related to the check_ajax_referer() function (nonce missing). Perhaps you could try to create your nonce using the wp_nonce_field() function and send it through your form, or add it to the JS data when making that AJAX request. May 5, 2021 at 14:50

3 Answers 3

1

Short answer — how can you solve the problem: When you call check_ajax_referer(), use secure_nonce_name as the first parameter, i.e. check_ajax_referer( 'secure_nonce_name', 'security' ).

A Longer Answer

The first parameter (which is the nonce action) for check_ajax_referer() needs to match the first parameter for wp_create_nonce(), but in your code, they are secure-nonce-name and secure_nonce_name respectively, hence that would result in the error 403 which basically means "invalid nonce".

So make sure the names are equal or that the nonce action is correct, e.g. use secure_nonce_name with both the above functions:

// In the script in javascript_variables():
var ajax_nonce = '<?php echo wp_create_nonce( "secure_nonce_name" ); ?>';

// Then in the AJAX callback (send_form()):
check_ajax_referer( 'secure_nonce_name', 'security' );

Additional Notes

  • You should consider using the REST API which, unlike the admin-ajax.php, gives a better, human-friendly message when an error is encountered while processing the request.
0
check_ajax_referer( 'secure-nonce-name', 'security' );

Try this instead above code

check_ajax_referer( $_POST['security'], 'secure_nonce_name' );
2
  • i change the ajax referer but i still have the 403 error May 5, 2021 at 15:21
  • i try to use the wp debug of wordpress and i think my error maybe related to this :Notice: WP_Scripts::localize est appelée de la mauvaise manière. Le paramètre <code>$l10n</code> doit être un tableau. Pour transmettre des données arbitraires aux scripts, utilisez plutôt la fonction <code>wp_add_inline_script()</code>. Veuillez lire <a href="https://fr.wordpress.org/support/article/debugging-in-wordpress/">Débogage dans WordPress</a> (en) pour plus d’informations. (Ce message a été ajouté à la version 5.7.0.) in /Applications/MAMP/htdocs/wordpress/wp-includes/functions.php on line 5313 May 5, 2021 at 15:55
0

I had same problem, first i created this in my form

wp_nonce_field('nader_ajax_login', 'nader_ajax_login_nonce')

but i had 403 error, finally solved with this in php function

check_ajax_referer('nader_ajax_login', 'nader_ajax_login_nonce')

the point is that its need to be exact same args in wp_nonce_field and check_ajax_referer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.