Solved

ajax form submits twice

Posted on 2014-07-17
5
996 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
ID: 40203584
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
ID: 40203767
I'll give that a go.  Call submit on button click?
0
 
LVL 13

Assisted Solution

by:duncanb7
duncanb7 earned 250 total points
ID: 40203924
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
ID: 40204220
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
ID: 40205236
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

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, …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

861 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

29 Experts available now in Live!

Get 1:1 Help Now