SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Submit - button click twice

    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.


    Code:
     $('#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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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. #5
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have sent you a private message with the link for the site.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    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. #7
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Ah ok, I triggered the validation first.
    I'll have another look.

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Howdy!

    I think I got to the cause of the problem.

    In this code block:

    Code:
    $(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:

    Code:
    $('#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. #10
    SitePoint Member
    Join Date
    Dec 2013
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep that worked perfectly, so weird..Thank you so much for taking the time


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •