2

Possible Duplicate:
Stop Enter/Return key submitting a form

I am trying to create a simple search form using css I found online. I want users to be able to hit the ENTER key from within a textbox and have it run a query without having the user to click on the button. I tried checking for the ENTER key on keydown, but the page keeps refreshing for some reason. What is the cause of this refresh?

.searchform { display: inline-block; zoom: 1; /* ie7 hack for display:inline-block */ *display: inline; border: solid 1px #d2d2d2; padding: 3px 5px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); background: #f1f1f1; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); background: -moz-linear-gradient(top, #fff, #ededed); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */ } .searchform input { font: normal 12px/100% Arial, Helvetica, sans-serif; } .searchform .searchfield { background: #fff; padding: 6px 6px 6px 8px; width: 202px; border: solid 1px #bcbbbb; outline: none; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); } .searchform .searchbutton { color: #fff; border: solid 1px #494949; font-size: 11px; height: 27px; width: 35px; text-shadow: 0 1px 1px rgba(0,0,0,.6); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; background: #5f5f5f; background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545)); background: -moz-linear-gradient(top, #9e9e9e, #454545); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */ } #search {margin-top:30px; marin-right:auto;}

With the following form: 

<div align="center" id="search"> <form class="searchform"> <input class="searchfield" style="color:#636363" type="text" value="Title/Album..." onkeydown="if (event.keyCode == 13) {querySong();}" onfocus="if (this.value == 'Title/Album...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Title/Album...';}" /> </form> <form class="searchform"> <input class="searchfield" style="color:#636363" type="text" value="Artist..." onkeydown="if (event.keyCode == 13) {querySong();}" onfocus="if (this.value == 'Artist...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Artist...';}" /> <input class="searchbutton" type="button" value="Song" onclick="querySong()"/>&nbsp <input class="searchbutton" type="button" value="Album" onclick="queryAlbum()"/> </form> </div>
Improve this question
0

1 Answer 1

Reset to default
2

You need to prevent the form from performing the default action on Enter which is to submit the form.

This is a bit heavy handed, you'll want to select the appropriate form for your case, but basically you just need to return false to prevent the default behavior.

$('form').submit( function() { return false; } );

Or without jQuery

var el = document.getElementById('formId'); if (el.addEventListener) { el.addEventListener('submit', preventDefaultAction, false); } else if (el.attachEvent) { el.attachEvent('submit', preventDefaultAction); } var preventDefaultAction = function () { return false; }
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

how would you do this without jquery?
Updated answer with non-jQuery way to do it.
hmm, that doesnt seem to have any effect.
Did you give your form an id <form id='foo'> and then change the first line in the code to look for that id?
Make sure you return false on your onkeydown and onclick handlers as well, I didn't notice you had those before (or just get rid of them and handle that in the Javascript code). Generally speaking, it's a better practice to hook events in Javascript instead of using those. Inline Javascript is no longer a best practice.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.