HTML Form with one textbox submits automatically.

I ran across this problem while building a search function for one of the web-pages at work. I already had couple of forms on that page that used jQuery to submit the form via AJAX. So, I just copied one of the forms and modified it to build the form for search. I was capturing the return key on the form to submit the data to the server. But instead of sending the AJAX request, the whole page got submitted and the page would refresh. I found this very annoying. As, similar code worked for the other two forms but it won’t work for this form. After couple of hours of trial and error and making sure that I didn’t have a typo and everything was correct, I found out that – “if you have only one textfield in your form then the browser would automatically submit the form on hitting the return key.” :O

To circumvent this weird behavior, I returned false from the jQuery event handler function after doing my processing of the form. Below is an executable bare-bones example code snippet of this scenario.


<html>
<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
	</script>
	<script type="text/javascript">
		$(document).ready(function(){

			$("#search_form").keypress(function(e) {
				if(e.which == '13') {

					//Do Processing.
					process();

					/*This is important if there is only one 
                                           textfield in your form.Try to comment 
                                           this and see the difference.*/
					return false;
				}
			});

			$("#submit_search").click(function() {
				process();
			});

			$("#search_string").focus();

		});
		function process() {
			var search_string = $("#search_string").val();

			if( jQuery.trim(search_string) == "") {
				alert("Please enter a non-empty search string!");
				return false;
			}

			alert("You searched for: " +  search_string);
		}
	</script>
</head>
<body>

	<form id="search_form">
		<input id="search_string" type="text" />

	<!--
		Uncomment this textfield and then comment the 
                "return false" statement and the page won't 
                refresh/submit. But keeping both - this and the 
                "return false" statement commented would execute 
                your process() function but it would refresh/submit
		your page.

		<input id="dummy_txt" type="text" />

	-->
		<input id="submit_search" type="button" value="Search" />
	</form>
</body>
</html>

The “return false” in the above code is the key. If you don’t have that statement then the form will get submitted to itself. But if you have more than one text-field in your form, then you do not need that “return false”. 🙂 And yes you do need a “return false”, just a return or “return true” won’t work either. 🙂

Advertisements
This entry was posted in HTML Forms. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s