Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here are some generic steps to follow. Please note, these are examples, not complete code. You must find the correct ways to apply this information in your case.</p> <p>First, in WP, add your function as an ajax callback:</p> <pre><code>add_action ( 'wp_ajax_my_action', 'invfr_sendmail' ); // The AJAX command is 'my_action' </code></pre> <p>You must make some modifications in your function. For one, echoing things there won't give a reply. But let's start at the beginning! Inside your callback function <code>invfr_sendmail</code>, add the code that receives the form from jQuery. Since they come as an encoded string, we must parse them on the top:</p> <pre><code>$my_form_data = array(); // Create an empty array parse_str( $_POST['my_form_data'], $my_form_data ); // Fills $my_form_data </code></pre> <p>Now, instead of using <code>$_POST['fieldname']</code>, you use <code>$my_form_data['fieldname']</code>.</p> <p>In the end of your PHP code, you must send the JSON encoded replies to jQuery. For example:</p> <pre><code>$success = true; $errors = array( 'This one was wrong', 'That one too' ); $some_other_value = false; // Put these variables in an array $results = compact( 'success', 'errors', 'some_other_value' ); wp_send_json( $results ); </code></pre> <p>Send your form via AJAX and listen for the answer.</p> <pre><code>jQuery('form#my_form_name').on('submit', function(event){ event.preventDefault(); // Stops the form from being submitted via POST var data = { command: 'my_action', // The same name you used in WP 'add_action' above my_form_data: jQuery('form#my_form_name').serialize() }; jQuery('.loading').show(); jQuery.ajax({ type: 'POST', url: ajaxurl, data: data }).done( function( response ) { // This runs when the server replies something if (response.success) { // This corresponds to the $success variable we set jQuery('#someElement').html('The operation was a success!') } if (response.errors) { // This would be the $errors array from PHP response.errors.each( function(errorMessage) { jQuery('#someElement').append( errorMessage ); } ); } if (response.some_other_value) { // Here nothing happens if $some_other_value in PHP was false } }).fail( function( jqXHR, textStatus, errorThrown ) { // This runs when the request fails (i.e. timeout) jQuery('#someElement').html( 'The AJAX request failed with error message ' + errorThrown ); }).always( function() { // This runs always after an AJAX request, even a failed one jQuery('.loading').hide(); }); }); </code></pre> <p>Hope this example will set you well on your way with your plugin!</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload