Preventing Double Form Submission With jQuery Revisited
I had a request via IM for a more complete example of doing validation within a form submission. I threw together a quick example here to better explain my thought process. Please remember I'm new to jQuery so what I'm doing might not be an example of best practices. Feel free to suggest an alternative.
So essentially I need to capture the submit event of my form. In this case I'm assuming a single form so I simply refer to the tag name in my selector, but I'm sure you could just as easily refer to an id. Here is a simple wrapper to capture the form submission:
$('form').submit(function(){
//do something
});
});
So any time the form is submit I can take some action. Lets assume a super simple form on our page:
<div>
<div class="label">Name</div>
<div class="inputContainer"><input type="text" name="name" id="name" value="" /></div>
<div class="msgContainer" id="nameMsg">I said enter a name!!</div>
<div class="clear"></div>
</div>
<div>
<div class="label"> </div>
<div class="inputContainer" id="submitContainer"><input type="submit" name="submit" value="submit" /></div>
<div class="clear"></div>
</div>
</form>
Nothing too fancy, just a text input, a validation msg container and a submit button. The first thing I want to do is hide the validation message so I don't confuse my user. I can do this by simply adding a call like so:
//hide the validation msg
$('#nameMsg').hide();
$('form').submit(function(){
});
});
Cool. Now the validation message is hidden as soon as the DOM is ready. Now to put some logic in the submit event handler. This demo just does a simple check for length. Your business logic could be as complex as you need it to be.
//hide the validation msg
$('#nameMsg').hide();
$('form').submit(function(){
//validate that the username was entered
var n = $('#name').val();
if(!n.length){
$('#nameMsg').show();
}
});
});
We'll probably have a few fields to check in real life so lets set a variable to flag that all fields are valid. Then we'll check that variable and return out appropriately:
//hide the validation msg
$('#nameMsg').hide();
$('form').submit(function(){
var isValid = true;
//validate that the username was entered
var n = $('#name').val();
if(!n.length){
isValid = false;
$('#nameMsg').show();
}
if(isValid){
return true;
}
else{
return false;
}
});
});
Finally, if the form is valid then lets hide all of our validation messages and swap out the submit button for a 'Saving' message:
//hide all the validation msgs
$('.msgContainer').each(function(){
$(this).hide();
});
$('#submitContainer').html('<span>Saving...</span>');
return true;
}
Note the use of the class selector ('.msgContainer') and the call to each(). This will iterate over every element that has the class 'msgContainer' and the call to $(this).hide() will make sure they're all hidden. Then we set the html of the submit container and return out of the function.
Here is the complete example:
<head>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
//hide the validation msg
$('#nameMsg').hide();
$('form').submit(function(){
var isValid = true;
//validate that the username was entered
var n = $('#name').val();
if(!n.length){
isValid = false;
$('#nameMsg').show();
}
if(isValid){
//hide all the validation msgs
$('.msgContainer').each(function(){
$(this).hide();
});
$('#submitContainer').html('<span>Saving...</span>');
return true;
}
else{
return false;
}
});
});
</script>
<style>
.label{
float: left;
width: 100px;
}
.inputContainer{
float: left;
}
.msgContainer{
float: left;
color: red;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<h1>Enter your name!</h1>
<form name="testForm">
<div>
<div class="label">Name</div>
<div class="inputContainer"><input type="text" name="name" id="name" value="" /></div>
<div class="msgContainer" id="nameMsg">I said enter a name!!</div>
<div class="clear"></div>
</div>
<div>
<div class="label"> </div>
<div class="inputContainer" id="submitContainer"><input type="submit" name="submit" value="submit" /></div>
<div class="clear"></div>
</div>
</form>
</body>
</html>
RSS
$('#submitButton').attr("disabled", "true");
Assuming you had an id of submitButton on your submit button :)
Or see Tony's suggestion in this comment:
http://cfsilence.com/blog/client/index.cfm/2008/7/...
I'm going to adapt this to disable all button tags in every form on the page on submit and run it globally in an admin I'm writing to prevent double submissions.