Enter Button - search form submit

[tonynoriega]

Would anyone know why in FF and Chrome the enter button does not submit like it does in IE, in my search field text input box?

I have to manually click the search image...

Is that a code issue, or a browser addon glitch.. or sorts ( i heard from a friend)

<div class="searchbox" id="searchbox">
 <script type="text/ecmascript">
function RunSearch() {
window.location = "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" />
 <input type="hidden" name="qlOld" id="qlOld" value="" />
 <input type="hidden" name="colOld" id="colOld" value="web1" />
  <input type="image" name="imageField" src="/_images/search-mag.gif" width="20" height="20" onclick="RunSearch();" />

</div>
</div> <!-- /searchbox -->

[claus]

What you have here is not a form.

You ned the <form> tags for it to be a form.

[incrediBILL]

Yes, <form> tags will make a world of difference.

[tonynoriega]

tried that already, completely kills it in every browser... trust me, i have no idea why, but it does...

when i replace the <form></form> tags around in the input fields, enter text into text field, and hit enter, or click the submit button, it does nothing.... not in IE, FF or Chrome,...even FF on a mac.

[Fotiman]

Try this:

<form action="http://searcher.example.com:8765/query.html">
<div>
<input type="hidden" name="ql" value="" />
<input type="hidden" name="col" value="web1" />
<input type="text" size="20" name="qt" id="search" /> 
<input type="hidden" name="qlOld" id="qlOld" value="" /> 
<input type="hidden" name="colOld" id="colOld" value="web1" /> 
<input type="image" name="imageField" src="/_images/search-mag.gif" width="20" height="20" />
</div>
</form>

No JavaScript necessary.

[incrediBILL]

when i replace the <form></form> tags around in the input fields, enter text into text field, and hit enter, or click the submit button, it does nothing

That's because without <form>...fields...</form> there is no form to take the action.

[tonynoriega]

@Fotiman - Perfect, thank you very much. Works great. I wish we had "upvoting" features on here, you would have got mine.

thx

[claus]

If you make a search form you should make it a form. Meaning, use the <form> elements.

What you are trying to do is to make a form that activates a javascript.

The way to do this is not to make a non-form that looks like a form. That is not valid use of HTML (even though it may well validate).

The right way to do it is to use the onsubmit event of the form element.

Like this:

<form action="#" onsubmit="RunSearch()">
<input type="text" size="20" name="qt" id="search" />
<input type="hidden" name="qlOld" id="qlOld" value="" />
<input type="hidden" name="colOld" id="colOld" value="web1" />
<input type="image" name="imageField" src="/_images/search-mag.gif" width="20" height="20" />
</form>

Fotiman's example is valid, and a perfectly normal and fine way to submit the query using a form... but he does not tell you how to do what you were trying to accomplish. Which was something else: to run the javascript on submit.

So, now you know ;)

[Fotiman]

Actually, the "right" way to do this (IMO) is the way I posted in my example. As I said, no JavaScript required. claus, your example will not work for users that have JavaScript disabled. So yes, you *could* attach an onsubmit handler to the form, but one might also say that this is not really a "valid" use of the onsubmit handler, as you've now made JavaScript a dependency when it doesn't need to be. I told him what he was trying to accomplish... without needing to add the JavaScript dependency. :)

[incrediBILL]

claus, your example will not work for users that have JavaScript disabled

But the beauty of Claus' method is that bots can't execute it so all those idiot spammers out there submitting to our web forms are out of luck as well as the occasional person running without javascript.

The simple all-purpose and bot-free solution is...

<script>
write form via javascript
</script>
<noscript>
THIS PAGE REQUIRES JAVASCRIPT TO ENABLE FORM
</noscript>

Sure, doesn't work unless they turn on javascript but 95% have it enabled, those that don't will see the big message and enable it if they want to submit bad enough. Just avoiding all the flood of spam or other automated abuse is more than worth doing it this way IMO.

[tonynoriega]

*head just exploded.

[Fotiman]

The form in question in this thread is a search form... no reason to worry about spammers

those that don't will enable it if they need it bad enough

I think this is a poor assumption to make. Of the users with JavaScript disabled, some of those don't have permission to make that change (those in a corporate environment). In general, I don't think that requiring JavaScript in this day and age is all that bad. However, I also don't think that requiring JavaScript as a means of fighting spammers is effective either, since once they know where the form processing page really is, it doesn't matter how you try and protect the form itself. (But that's starting to veer off topic) ;)