Form submit not working after first attempt?

this is how action is on submit button

                                          <button   type="submit" name="submit" value="submit"  onclick="validate()" id="submit" class="btn submit-btn">Submit</button>

this is my script which validate form on clicking submit and call send function which sends emaill

                              <script>
                function validate(){

            $("#contact_form").on('submit',function(e) {
             e.preventDefault();
             
                        var name = $('#name').val();
                        var email = $('#email').val();
                        var mobile = $('#mobile').val();
                        var msg = $('#message').val();

                        $(".error").remove();
                        // $(".error").css("color", "red");

                              if (name.length < 1) {
                                $('#name').after('<span class="error">This field is required</span>');
                                 }

                              if(email == "" ){
                                $('#email').after('<span class="error">This field is required</span>');
                                 } 
                                 else if(email.indexOf('@') <= 0 ){
                                        
                                $('#email').after('<span class="error">Enter a valid email</span>');
                                }else if((email.charAt(email.length-4) != '.' ) && (email.charAt(email.length-4) != '.' )){
                                     $('#email').after('<span class="error">Enter a valid email</span>');
                                }else{
                                    //
                                }
                                
                                   
                                 
                                  
                             if (mobile == "") {
                                $('#mobile').after('<span class="error">This field is required</span>');
                                 }
                            else if(mobile.length != 10) {
                                $('#mobile').after('<span class="error">Please enter valid mobile number. </span>');
                                 }else{
                                    //
                                 }


                                 if (msg.length < 1) {
                                $('#message').after('<span class="error">This field is required</span>');
                                 }
                                 send();
                                 return false;
                            });
                              
                     }
                              
                   
            </script>         

this is my script for send function

                                    <script>
                        function send(){
                            
                            var form_data = $('form').serialize(); // if(name && email && mobile && message ){
                           
                              if ($("#name").val() )
                                  {
                                       $.ajax({
                                                type: "post", 
                                                url: "send.php",
                                                dataType: "json", // Add datatype
                                                data: form_data,
                                                success: function () {
                                                    $('#mymodal').modal('show');
                                        
                                                      } 
                                             }); 
                                    document.getElementById("contact_form").reset();

                                  }
                                }
                           
                    </script>

how can fix the issue , the form is not submiting second time unless I refresh the page ?

It looks like you can do with simplifying some of your code.

Rename the validation function to isValid, and ensure that it returns either true or false.
You can then move the send() command to a new validation function that is much simpler.

function validation(event) {
    event.preventDefault();
    if (isValid()) {
      send();
    }
}

and in the onclick attribute don’t forget to pass the event object to the validation function.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.