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 = '<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f98d9c8a8db99e94989095d79a9694">[email protected]</a>';
$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
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 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.
Method 2
check_ajax_referer( 'secure-nonce-name', 'security' );
Try this instead above code
check_ajax_referer( $_POST['security'], 'secure_nonce_name' );
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0