Form Submission

Pressing the Enter key, and/or using image button

[tonynoriega]

New to JS, so please bare with me.
I have a fairly simple search form field on my site:

<script type="text/javascript">
function RunSearch() {
window.location.href = "http://searcher.example.com:8765/query.html?ql=&col=web1&qt=" + document.getElementById("search").value;
}
</script>
<div class="formSrchr">
<input type="text" size="20" name="qt" id="search" value="Search" onfocus="if(this.value == 'Search') {this.value=''}" onblur="if(this.value == ''){this.value ='Search'}" />
<input type="hidden" name="qlOld" id="qlOld" value="" />
<input type="hidden" name="colOld" id="colOld" value="web1" />
<input type="image" name="imageField" alt="search" src="/_images/search-mag.gif" onclick="RunSearch();" />
</div>

However, in Chrome and Firefox, when you press enter, it does not submit the form. Works in IE.

I understand I need to add an

<input type="submit" style="visibility:hidden;" >

field.

But how can I still utilize the input image button, and submit by pressing enter?

Don't I have to pick one or the other?

thx

[coopster]

It may be the onclick() method that is causing the issue. We had a brief discussion in that regard back in 2007 that may be of interest to you:

[webmasterworld.com...]

[rocknbil]

But how can I still utilize the input image button, and submit by pressing enter?

You don't need Javascript here. Seriously. And you can still use an image to submit. Test this.

<form method="get" action="http://searcher.example.com:8765/query.html">
<input type="hidden" name="ql" value=""/>
<input type="hidden" name="col" value="web1"/>
<div class="formSrchr">
<input type="text" size="20" name="qt" id="search" value="Search" onfocus="if(this.value == 'Search') {this.value=''}" onblur="if(this.value == ''){this.value ='Search'}" />
<input type="hidden" name="qlOld" id="qlOld" value="" />
<input type="hidden" name="colOld" id="colOld" value="web1" />
<input type="submit" name="imageField" id="mySubmit" value="Search"/>
</div>
</form>

Now, style the submit button with CSS. I guessed at width and height, adjust them accordingly:

#mySubmit {
display:block;
width: 150px;
height: 50px;
border:none;
outline:none;
text-indent:-50000px /* what hides "Search" from the button */
background: url(/_images/search-mag.gif) top left no repeat;
}

Additionally, you can add a hover state. If your image is 50 pixels high, increase the canvas to twice that (100px) and duplicate the image in a different color below, like

NORMAL STATE
MOUSEOVERSTATE

Then add

#mySubmit:hover { background-position: bottom left; }

- The form is no longer Javascript dependent.
- When you press ENTER, now that there is a submit button, it will submit. The way that works is when you're focussed in anything but a textarea, pressing submit finds the first submit button in the form and submits.
- You now have mouseover states for the button. :-)
- No X and Y coordinates for the input type=image are submitted.
- You can focus any Javascript you use on validating there's a value in the search field. On that topic, always put your call in the form, not the button because if someone presses enter, they haven't clicked the button.

<form method="get" action="http://searcher.example.com:8765/query.html" onsubmit="return validate();">

<script type="text/javascript">
function validate() {
var obj = document.getElementById("search");
if (obj && (obj.value=='')) {
alert('Please enter sometihing to search for.');
return false;
}
return true; // never gets here if false
}
</script>

By returning false from the function, it stops the form's natural action. If no error, return true, and it will submit.

Try this . . . it will work. :-)