Solved

ajax form submits twice

Posted on 2014-07-17
5
1,004 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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to dynamically set the form action using jQuery.
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…

816 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

13 Experts available now in Live!

Get 1:1 Help Now