My form submit is called twice

[Mark Reyes]

Hi All,

I have a mark-up shown below. It has many forms in one view (I have shown two only). I added a class(validateForm) on each form

<form id="qa-form-231" class="validateForm" action="validateQualItem.htm?tab=1&acc_value=0" method="post">
	<p>
		<textarea class="qa-remarks" rows="5" cols="23" name="strValidationRemarks"></textarea>
	</p>
	<p>
		<input class="action-button" type="submit" value="Validate" name="validate"/>
	</p>
</form>
.
.
<form id="qa-form-240" class="validateForm" action="validateQualItem.htm?tab=1&acc_value=0" method="post">
	<p>
		<textarea class="qa-remarks" rows="5" cols="23" name="strValidationRemarks"></textarea>
	</p>
	<p>
		<input class="action-button" type="submit" value="Validate" name="validate"/>
	</p>
</form>

Now, I hijack the form submission using below code. I used form plugin

$(document).ready(function(){
	var validateQAForm = function(arr, $form, options){
		if($form.find("textarea").val().length == 0){
			alert("Remarks is required!");
			return false;
		}
		return true;
	};
	var showValidateResponse = function(data, statusText, xhr, $form){
		//code here
	};
	var options = { 
	        beforeSubmit:  validateQAForm,  
	        success:       showValidateResponse, 
	        dataType:  "json"        
	    }; 
		
	$("form.validateForm").submit(function(event){	
		//alert($(this).size());
		$(this).ajaxSubmit(options);
		return false;
	});
}

My problem is, I see two alert message(Remarks is required!) instead of one and I notice that my submit event
is being called twice so thats why I add this code alert($(this).size()) and It alerts that the size of my
wrapped set is one.

I am really not sure where to check the cause. Any hints please?

[subhash kumar]

   $("form.validateForm").submit(function(event){    

Above code will be applicable for both the forms as both are with the class name "validateForm".

submit the particular form which you want.

[David Newton]

Just out of curiosity, why bother defining your functions as "var foo = function() { ... }" in this usecase? Obviously it'll work, it just seems like extra noise to me.

[Mark Reyes]

Above code will be applicable for both the forms as both are with the class name "validateForm"

Hi subhash, thanks for your interest in my question.. I actually have 10 or more forms like that and I generate them in the backend with JSP.
The number of forms depends on the number of entries in my DB.


I actually am still new to jquery, I was thinking that doing this

$("form.validateForm").submit(function(event){}

will fire up on only the form where the submit button was clicked. I cant reference the
form with an ID since the number of the form might vary. Is my approach wrong or is my understanding not right regarding attaching this submit event?

why bother defining your functions as "var foo = function() { ... }

Hi David, I just learned javascript last month and is still in the learning phase.. I read the book Murach Javascript in order to learn javascript and
the book is doing a lot of these so maybe I got caught up in making it a habit.

I actually don't understand it thoroughly but as per my little knowledge of javascript declaring 'named' (I am not sure if this is the right term) function adds the function to the context of the window object so I am using the var foo thing.. Maybe I am wrong though..

[David Newton]

function foo() { ... } is shorthand for var foo = function() { ... }

But neither method is creating functions in the global scope, since you're inside a function--they're local to the function.

[subhash kumar]

try to find out the parent of the submit button that is the form and then form id

you can take the reference from following code:

  
function getQualifiedName(formElement)
{
  var formName, formElementName;
  if(formElement.form.name)
    formName = formElement.form.name;
  else
    formName = formElement.form.id;
  if(formElement.name)
    formElementName = formElement.name;
  else
    formElementName = formElement.id;
  return 'document.forms["' + formName + '"].elements["' + formElementName + '"]';
}
  

pass this form id to ajax code.

[Bear Bibeault]

subhash kumar wrote:you can take the reference from following code:

What a mess!!! Using jQuery no such machinations are necessary.

And I don't care what some book says, the following format for defining functions:

var validateQAForm = function(arr, $form, options){      

is a mess.

I point out code such as this in my own books to discuss how functions are first-class objects, but code should never actually be written like that. It's just confusing and necessary.

With regards to the double submit problem, it's usually caused by a redundant call to the native .submit() method of a form when a submit is already in progress. I don't see anything like that in your code, but it's so fragmented that it's rather hard to read.

If you comment out the ajaxForm() call, does the form still submit? If so, normally, or via Ajax?

[Mark Reyes]

But neither method is creating functions in the global scope, since you're inside a function--they're local to the function

Hi David, this is +1 to my knowledge. Thank you!

Hi Bear,

Here's my second attempt to making this form clearer. I stripped out the HTML into this.

<form id="qa-form-231" class="validateForm" action="validateQualItem.htm" method="post">
	<p>
		<textarea></textarea>
	</p>
	<p>
		<input type="submit" value="Validate"/>
	</p>
</form>
.
.
<form id="qa-form-249" class="validateForm" action="validateQualItem.htm" method="post">
	<p>
		<textarea></textarea>
	</p>
	<p>
		<input type="submit" value="Validate"/>
	</p>
</form>

I have re-written my script to be like this. (..minus the messy part )

$(document).ready(function() {
	function validateQAForm(arr, $form, options){
		if($form.find("textarea").val().length == 0){
			alert("Remarks is required!");
			return false;
		}
		return true;
	};
	function showValidateResponse(data, statusText, xhr, $form){
		//code here
	};
	var options = { 
	        beforeSubmit:  validateQAForm,  
	        success:       showValidateResponse, 
	        dataType:  "json"        
	    }; 
	$("form.validateForm").submit(function(event){	
//		$(this).ajaxSubmit(options);
		return false;
	});
}

If you comment out the ajaxForm() call, does the form still submit? If so, normally, or via Ajax?

I actually dont have ajaxForm() but ajaxSubmit(). And I notice that the form was never submitted either normally or by ajax.

I added this in my code.

	$("form.validateForm").submit(function(event){	
//		$(this).ajaxSubmit(options);
		alert("I was clicked!");
		return false;
	});

And I was surprised to find out that there was two alerts of "I was clicked!".
I am thinking that I really am missing something basic here...
I surely would beg to hear any comments from the guru's please as I have been thinking about this for sometime....

Thanks!

[Gregg Bolinger]

I *think* it probably has to do with the fact that your selector is based on the class which is the same on both forms. If you want them to submit separately you'll need to setup different event handlers for each.

[Mark Reyes]

Hi All,

In order for me to test this one, I created this simple markup to check if it submits twice. I had the notion at first that this is form plugin problem.

<html>
<head>
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="jquery.form.js"></script>
</head>
<body>
	<form id="qa-form-231" class="validateForm" action="#" method="post">
		<p><textarea></textarea></p>
		<p><input type="submit" value="Validate"/></p>
	</form>
	<form id="qa-form-232" class="validateForm" action="#" method="post">
		<p><textarea></textarea></p>
		<p><input type="submit" value="Validate"/></p>
	</form>
	<script type="text/javascript">
		$(document).ready(function() {
			function validateQAForm(arr, $form, options){
				if($form.find("textarea").val().length == 0){
					alert("Remarks is required!");
					return false;
				}
				return true;
			};
			function showValidateResponse(data, statusText, xhr, $form){
				//code here
			};
			var options = { 
					beforeSubmit:  validateQAForm,  
					success:       showValidateResponse, 
					dataType:  "json"        
				}; 
			$("form.validateForm").submit(function(event){	
				//$(this).ajaxSubmit(options);
				alert("I was clicked!!");
				return false;
			});
		});
	</script>
</body>
</html>

To my surprise It did'nt alert twice.

I scan all link javascript file and found the culprit.

$(document).ready(function(){
	$(".action-button").click(function(){
		$(this).parents("form").children("#*.errors").remove().end().submit();
	});
});

Hijacking the submit button click was never a good idea I think. And I was thinking that creating a lot of $(document).ready(function(){}
*sometimes* adds complexity in debugging but it does presents a good way of managing your code. I learned in this thread that jquery does fire
up all registered event handlers and not only the first one that was declared..

Hi subhash, I notice that jquery simplifies everything and no need for making special script markup.

Also, referencing forms by class is really never a bad idea especially if there are many forms in one JSP.
Thank you guys! I did learn a lot in this thread from me being clumsy and a newbie at the same time!