1

I have seen a number of methods dating back to about 2011 in order to take a form and have its data posted via ajax.jquery. I have tried a couple and am just getting the page to reload despite using preventdefault functions.

I am trying to take data from my form, have the jQuery listen for the form submit by targeting the actual form id and then call a PHP function in order to have that data posted to the db. Ultimately nothing happens other than a page reload. Since this is a WP page, I know that some of the functions and handling differ from regular webpages. Things like the ajax url, can be passed back to the functions etc. That is why I Am posting this here.

the form:

function add_entry(){
    ?>
    <form action="" method="post" id="ajax-add-to-form" autocomplete="off">
        <input type="text" id="FName" name="FName" placeholder="First Name" value="" required>
        <input type="text" id="LName" name="LName" placeholder="Last Name" value="" required>
        <select id="size" required>
            <option value="">Size</option>
            <?php  for($i=1; $i<=15; $i++){?>
                <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
            <?php } ?>
        </select>
        <input type="text" id="MobileNumber" name="MobileNumber" placeholder="Phone Number" value="" required>
        <input type="email" id="Customer_Email" name="Customer_Email" placeholder="Email Address" value="" required>
        <input type="submit"  name="ajax-add-to-form" value="Add to">
<?php
    
    }
add_shortcode('add_entry', 'add_entry');


</form>

the jquery

jQuery('document').ready( function(){
jQuery('#ajax-add-to-form').on('submit', function(e){
e.preventDefault(); 
jQuery('#jx-loading').show();
jQuery.ajax({
    type: 'post',
    url: my_ajax.ajax_url,
    data: { 
    action: 'ajax-php-function'},
    success: function(data)
    {jQuery('#jx-loading').hide();}
})          
}); 
return false;       
});

the php

function ajax-php-function() {          
    global $wpdb;   
    $table = "mytablename";     
    $FName= $_POST['FName'];    
    $LName= $_POST['LName'];    
    $MobileNumber= $_POST['MobileNumber'];  
    $Email = $_POST['Email '];          
    $data = array(
    'FName' => $FName,
    'LName' => $LName,      
    'MobileNumber' => $MobileNumber,        
    'Email' => $Email);     
    $success = $wpdb->insert( $table, $data );          
    if($success)
    {echo json_encode($last_data);} 
    else{       echo 'error';   }   die;            
}   
8
  • Hi, Theodoro, welcome to WPSE. Before going deeper in a answer, I would suggest to put e.preventDefault(); before anything else on the jQuery('#ajax-add-to-form').on('submit', function(e){ function. Let me know if works. – Celso Bessa Jan 4 at 21:19
  • @celsobessa thanks. Sorry I have updated the code above since I had already tried that but forgot to update here. It didnt make a difference which is why I am so lost – theodore Jan 4 at 21:27
  • Also, simplify your debugging by commenting out parts so that you can confirm each part as working one at a time - then try the entire process once each is happy. – Q Studio Jan 4 at 21:28
  • You mean function(e){e.preventDefault() - right? – Q Studio Jan 4 at 21:49
  • sorry yes someone else told me to try event there at the same time I was typing this. Didnt work – theodore Jan 4 at 21:49
0

Ultimately the form and its old handler were being trashed by some other element in the website. Could have been WP or one of the few plug ins I could not remove as it is the page builder (Elementor, Elementor Essentials). After disabling all the other plug ins it is narrowed down to that. The code solution was: ....

jQuery(document).on('submit', '#ajax-add-to-waitlist-form', function(e){
  e.preventDefault();

.......

Instead of

jQuery('#ajax-add-to-form').on('submit', function(e){
e.preventDefault(); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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