Solved

ajax form submits twice

Posted on 2014-07-17
5
981 Views
Last Modified: 2014-07-18
Experts, I've spent three frustrating days on a really simple procedure.  I need to evaluate a form that may change according to the selected option.  The class "required" points to the fields for validation.

My validator works great, but the form submits twice!

I've tried three solutions: event.preventDefault() and event.preventPropagation() ideas, return false -- nothing seems to work.  (See the attached js and php snippets.)

I've tried a number of plugins, but couldn't configure them to evaluate elements by their class.

Can you suggest anything else?  Any workarounds?  Do I need to try a different approach?

Pul-lease, help!
snippet.js
snippet.php
0
Comment
Question by:Glen Gibb
  • 2
  • 2
5 Comments
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
all the errors I saw about this is people still want to use a SUBMIT button (<input type="submit"...) instead a normal button (<input type="button"...)

I did not check your files but I'm sure you've one

The idea is to preventDefault and submit your form programatically instead using the submit button
0
 

Author Comment

by:Glen Gibb
Comment Utility
I'll give that a go.  Call submit on button click?
0
 
LVL 13

Assisted Solution

by:duncanb7
duncanb7 earned 250 total points
Comment Utility
Did you try to put e.preventDefault() and e.stopPropagation();  before $.ajax statement
and put $(this).unbind('submit') before "return false" (not "$(this).unbind('submit').submit();")
as the following code ?  Is it same ?

Duncan
e.preventDefault();
e.stopPropagation();
$.ajax (
			{	
				type: "post",
				url: $(this).attr('action'),
				data: $(this).serialize(),
				async: true,
				success: function(data)
				{
					//$(this).unbind('submit').submit();
					showResponse('success!');  
				},
				error: function(request, status, error, data)
				{
				alert('submit: ' + status + ', ' + error);
				} // end success ...		
			}); // end ajax ...
			$(this).unbind('submit');
                        return false;

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
Comment Utility
I'll give that a go.  Call submit on button click?

you need :

$("#fakeSubmitButton").click(function() {
  var form = $('#frm_client');
  if(validate('frm_client')) {
			$.ajax (
			{	
				type: "post",
				url: form.attr('action'),
				data: form.serialize(),
				async: true,
				success: function(data)
				{
                                     form.submit(); // this is the only place you submit it

Open in new window

0
 

Author Closing Comment

by:Glen Gibb
Comment Utility
Wow, I tried your suggestions with interesting results!

Leakim, I changed to a button.click and put a breakpoint on the form.submit.  When I ran the code, it hit the breakpoint only once.  But I got double the double - 4 sql commands for every item entered!

Duncan, I placed the prevents above the ajax, and the unbind just before the false, and now I'm back to just two sql commands for each item.

It seems that jQuery is not double-submitting; it must be the php.

I've checked this thoroughly but must have missed something.

I'd welcome any further suggestions, but thanks for your input.
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now