Welcome to WebmasterWorld Guest from 54.144.243.34

Forum Moderators: incrediBILL

Enter Button - search form submit

   
9:37 pm on May 10, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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 -->
9:58 pm on May 10, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



What you have here is not a form.

You ned the <form> tags for it to be a form.
10:09 pm on May 10, 2010 (gmt 0)

WebmasterWorld Administrator incredibill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



Yes, <form> tags will make a world of difference.
5:03 pm on May 11, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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.
5:33 pm on May 11, 2010 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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.
5:37 pm on May 11, 2010 (gmt 0)

WebmasterWorld Administrator incredibill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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.
7:23 pm on May 11, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



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

thx
11:55 pm on May 11, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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 ;)
3:46 pm on May 12, 2010 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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. :)
5:20 pm on May 12, 2010 (gmt 0)

WebmasterWorld Administrator incredibill is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



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.
5:27 pm on May 12, 2010 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



*head just exploded.
5:29 pm on May 12, 2010 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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) ;)
 

Featured Threads

My Threads

Hot Threads This Week

Hot Threads This Month