homepage Welcome to WebmasterWorld Guest from 54.211.230.186
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Form Submission
Pressing the Enter key, and/or using image button
tonynoriega

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4406201 posted 5:18 pm on Jan 12, 2012 (gmt 0)

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

WebmasterWorld Administrator coopster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4406201 posted 5:33 pm on Jan 12, 2012 (gmt 0)

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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4406201 posted 5:32 pm on Jan 13, 2012 (gmt 0)

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. :-)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved