Solved

ajax form submits twice

Posted on 2014-07-17
5
1,045 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Displaying text in text field when clicking on ajax search result 10 60
Ahax pagination 9 50
Autocomplete with Jquery Question 2 36
Responsive Font Size 6 49
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
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, …
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…

696 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