homepage Welcome to WebmasterWorld Guest from 54.226.80.196
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Enter Button - search form submit
tonynoriega




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

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




msg:4130480
 9:58 pm on May 10, 2010 (gmt 0)

What you have here is not a form.

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

incrediBILL




msg:4130487
 10:09 pm on May 10, 2010 (gmt 0)

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

tonynoriega




msg:4130911
 5:03 pm on May 11, 2010 (gmt 0)

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




msg:4130939
 5:33 pm on May 11, 2010 (gmt 0)

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




msg:4130942
 5:37 pm on May 11, 2010 (gmt 0)

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




msg:4131017
 7:23 pm on May 11, 2010 (gmt 0)

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

thx

claus




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

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




msg:4131439
 3:46 pm on May 12, 2010 (gmt 0)

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




msg:4131513
 5:20 pm on May 12, 2010 (gmt 0)

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




msg:4131522
 5:27 pm on May 12, 2010 (gmt 0)

*head just exploded.

Fotiman




msg:4131524
 5:29 pm on May 12, 2010 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
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