preventDefault() and stopImmediatePropagation not working

Question

I have a form which use Jquery and Ajax to send data to the server side, but data submitting twice even though I have applied preventDefault() and stopImmediatePropagation in my function.

This my Form



  
    
      
        
          1
      
      
        
          2
      
      
        3Finish
      
    
    
      
        
          Full Name *
          
          The Name is required
        
          Email
            (optional)
          
        
        
          Phone number *
          
          The phone number is requiredEnter valid phone number
        
        
          Other number (optional)
          

        
        
          Password
            *
          
          The password is required
        

        
          
            
              Previous
          
          
            Next 
            
          
          
            Finish
          
        
      
      

        
          Address *
          
          The address is required 
        
        
          Package
          
        

        

          
            
              
                
              
              

              
              
                
                  Select image
                  Change
                  
                
                Remove
              
            
          
        


        
          
            
              Previous
          
          
            Next 
            
          
          
            Finish
          
        
      
      

        Referee details
        
        
          Referee Name *
          
          The Referee Name is required
        
        
          Referee Email
            (optional)
          
        
        
          Referee Phone number *
          
          The referee phone number is requiredEnter valid referee phone number
        

        
          Terms and Conditions *
          

          
            
            
            I agree with the Terms and Conditions.
          

          The checkbox must be checked
        
          
            
              Previous
          
          
            Next 
            
          
          

            
          
        
      
    
  

  
    

      
    


  
  
    
      Already have an account? Log In

This is my jQuery:

$(document).ready(function() {
  $("#commentForm").submit(function(e) {
    e.stopImmediatePropagation();
    e.preventDefault();

    $.ajaxSetup({
      headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      }
    }),

    $.ajax({
      url: '/create_member',
      type: 'POST',
      data: new FormData(this),
      processData: false,
      contentType: false,
      beforeSend: function() {
        $("#register").text("Processing....")
      },
      success: function(data) {
        if (data.message) {
          swal({
            title: "Success",

            text: "" + data.message,
            icon: "success",
          });
        } else if (data.error) {
          swal({
            title: "Sorry",

            text: "" + data.error,
            icon: "error",
          });
        }
        $("#commentForm")[0].reset();
        $("#register").text("Register")
      }
    });
    return false;
  })
})

Dongdong · Accepted Answer

I saw you have many validation attributes, so probably you are using JQuery validate plugin, submit is already implemented inside, so you cannot add another one like that.

here is official document: https://jqueryvalidation.org/validate/

you can try this solution: Why do you have to submit twice before jQuery Validate submitHandler is triggered?

or this one: Jquery Validate Plugin Prevent Double Submit On Validation

preventDefault() and stopImmediatePropagation not working

Answers (1)

Related Questions