Submit - button click twice

JavaScript
1

Im using zurb F5 using their abide to validate my form, i have to click the submit button twice to submit the form im using jquery ajax method to post im guessing i screwed up in jquery part - code below - im sure im missing something obvious.

 $('#fm_ctnt').submit(function(e){
		
		//prevent default form submitting.
		e.preventDefault()
		
		$(this).on('valid', function () {
			
				$('#submit').fadeOut(200,function(){
				$('.sending').fadeIn(200);
			});
			
			$.ajax({
				url: 'process.php',
				type: 'POST',
				data: {name:$("input[name='name']").val(),
					   email:$("input[name='email']").val(),
					   subject:$("input[name='subject']").val(),
					   message:$("textarea[name='message']").val(),
					  },
				
				success: function(data) {
					
					
					if(data==1)
					{
						$('.sending').html('<h2>Sent Successfully Thank You!</h2>');
						$('#fm_ctnt').fadeOut(1000);
						
						$("#fm_ctnt input:not(#submit)").val('');
						$('#fm_ctnt textarea').val('');
						
						txt_name = null;
					}
					else alert("error sending");
				},
				error:function(err)
				{
					alert("error sending");
				}
			});
			
		});
	});
2

Hi,

I’m not sure what your question is.

The code you posted looks correct at first glance (apart from the fact that you are checking for an error inside your success function).

I don’t know if it is relevant, but jQuery does have a .dblclick() method which you can trigger accordingly.

3

thanks for the reply, sorry for the confusion in question.

Right now with that code pasted above i have to click to submit two times for it to do anything , usually forms submit button have just one click to submit if fileds are empty the validation kicks in if the fields are met it will process it to ajax.

i want to get rid of that second click on submit, this is happening on Chrome, Firefox, Safari,IE,Firefox android , Chrome android,

4

Well, there’s nothing I can see that suggests a double click being necessary.

Could you post a link to a page where I can see this?

5

I have sent you a private message with the link for the site.

6

Hi there,

I just checked out the page and was able to submit the form with one click.
Validation worked just fine, too.

Which browser OS are you experiencing this in?

7

if you try to submit the form without triggering the validation it takes 2 clicks to submit its taking one click to validate one more to submit form ?

im experiencing this on windows 7 chrome, firefox and IE.

8

Ah ok, I triggered the validation first.
I’ll have another look.

9

Howdy!

I think I got to the cause of the problem.

In this code block:

$(document).ready(function() {
  $('#fm_ctnt').submit(function(e) {
    e.preventDefault()

    $(this).on('valid', function() {

      $('#submit').fadeOut(200, function() {
        $('.sending').fadeIn(200);
      });

      $.ajax({
        url: 'process.php',
        type: 'POST',
        data: {
          name: $("input[name='name']").val(),
          email: $("input[name='email']").val(),
          subject: $("input[name='subject']").val(),
          message: $("textarea[name='message']").val(),
        },
        success: function(data) {
          if (data == 1) {
            $('.sending').html('<h2>Sent Successfully Thank You!</h2>');
            $('#fm_ctnt').fadeOut(1000);

            $("#fm_ctnt input:not(#submit)").val('');
            $('#fm_ctnt textarea').val('');

            txt_name = null;
          } else alert("error sending");
        },
        error: function(err) {
          alert("error sending");
        }
      });
    });
  });
});

Remove the $(document).ready(function() { ... }

This gives you:

$('#fm_ctnt').submit(function(e) {
  e.preventDefault()

  $(this).on('valid', function() {

    $('#submit').fadeOut(200, function() {
      $('.sending').fadeIn(200);
    });

    $.ajax({
      url: 'process.php',
      type: 'POST',
      data: {
        name: $("input[name='name']").val(),
        email: $("input[name='email']").val(),
        subject: $("input[name='subject']").val(),
        message: $("textarea[name='message']").val(),
      },
      success: function(data) {
        if (data == 1) {
          $('.sending').html('<h2>Sent Successfully Thank You!</h2>');
          $('#fm_ctnt').fadeOut(1000);

          $("#fm_ctnt input:not(#submit)").val('');
          $('#fm_ctnt textarea').val('');

          txt_name = null;
        } else alert("error sending");
      },
      error: function(err) {
        alert("error sending");
      }
    });
  });
});

I have no idea why this fixes it, but it did for me.
Does this work for you?

10

Yep that worked perfectly, so weird…Thank you so much for taking the time