makaveev.com

I spent too much time today in experiments and finally realized something very important when it comes to submitting a form, using a JavaScript(not the usual way with a Submit button): be careful when using the submit() JavaScript function - it will cause you at least a headache if you don’t have in mind a couple of things.

First of all, I would like to tell you that it is OK if you want to submit a form, using JavaScript. Sometimes it is really useful(especially when you have to submit a form in IE only by pressing the "Enter" key after you type a text in a text box - e.g. when you have a Search function). In Mozilla Firefox, for example, this is not necessary because after pressing the "Enter" key, the form is submitted w/o any JavaScript.

So, here is an example which we will take for illustration purposes only. Here is the HTML code for one simple search form.

<form id="form1" action="search.php" method="post">

<input type="text" name="q" /><input type="submit" name="submit" value="Search" />

</form>

This simple code will just submit the value of the text field "q" to the script called "search.php". So far, so good. In Firefox, when you press the "Enter" button after you type your search query in the box, the form will be simply submitted and you’ll get some results if there is a match. In IE6, you will get any results ONLY if you click the "Search" button. Nothing happens if you just press the "Enter" key as it is in Firefox. What we need in this case is very small and simple JavaScript to submit the form after pressing the "Enter" key.

We all know that there is a function in JavaScript, called submit(), which we can use in this case^[1]. We have to specify a form name or form ID when using it.

document.getElementById("form1").submit()

Be careful here! You have already a form element with name "submit" in the form. That's why, when you try to use submit() in this form, you will get a JavaScript error:

document.getElementById("form1").submit() is not a function

The solution is to rename the button(or you can simply remove it if you are allowed to) to something else(e.g. "do_search" will be perfect). After that you can set the onclick event to this button to execute the following function:

function sendForm()
{
	document.getElementById("form1").submit()
}

and the result will look like this:

<form id="form1" action="search.php" method="post">

<input type="text" name="q" /><input type="submit" name="do_search" value="Search" onclick="sendForm()" />

</form>

Our goal was a little different than the illustrated. We still need to develop a way which can submit the text in the text box using only the "Enter" button and this was need to work in all modern browsers. So, we will just enhance a little the JavaScript function sendForm(). We will add one if statement which will detect which key was just pressed(we know that "Enter" key code is 13^[2]).

function sendForm(event)
{
	if(event.keyCode == 13)
	{
		document.getElementById("form1").submit()
	}
}

How can we use this function? Here is an example:

<form id="form1" action="search.php" method="post">

<input type="text" name="q" onkeypress="sendForm(event)" /><input type="submit" name="do_search" value="Search" />

</form>

What happened with the onclick event on the "Search" button? Since we modified the function sendForm() it won’t work anymore when clicking the button. So, we need a separate function which will only submit the form, then we will embed the new function in the old new. This is what I am talking about:

function sendForm(event)
{
	if(event.keyCode == 13)
	{
		submitForm()
	}
}

function submitForm()
{
	document.getElementById("form1").submit()
}

This is the final result:

<form id="form1" action="search.php" method="post">

<input type="text" name="q" onkeypress="sendForm(event)" /><input type="submit" name="do_search" value="Search" onclick="submitForm()" />

</form>

Now you have a form, which can be submitted in both ways - pressing "Enter" key and clicking "Search" button - not only in Firefox but in IE6.

I suppose you know how can you use this example not only for one form but for as many forms as you want on your site. Here are the necessary changes:

function sendForm(event,lmnt)
{
	if(event.keyCode == 13)
	{
		submitForm(lmnt)
	}
}

function submitForm(lmnt)
{
	document.getElementById(lmnt).submit()
}

where lmnt is the ID of the form. What about the changes in the HTML? Take a look below:

<form id="form1" action="search.php" method="post">

<input type="text" name="q" onkeypress="sendForm(event,'form1')" /><input type="submit" name="do_search" value="Search" onclick="submitForm('form1')" />

</form>

Resources:

1. Submit a form using JavaScript
2. What is the unicode of the key pressed?