Welcome to WebmasterWorld Guest from 54.234.216.180

Forum Moderators: open

Message Too Old, No Replies

form submission with Javascript

     

ktsirig

9:49 pm on Dec 18, 2006 (gmt 0)

5+ Year Member



Hello!
I am searching over the net for quite a long, but I have almost no idea concerning Javascript so I can't figure out the solution to my problem...
I have a form that show a drop-down menu, which takes all its values through a Mysql database via PHP. What I want to do is to submit the form to the next page (from index.php ---> retrieve_data.php) without the need of a "Submit" button.
When the user selects one of the given options, automatically he will be redirected to retrieve_data.php?id=5 for example...

Thank you in advance!

whoisgregg

10:08 pm on Dec 18, 2006 (gmt 0)

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member



This should get you started... :)

<select name="test_select" id="testSelect">
<option value="" selected="selected">Choose an option:</option>
<option value="5">Fiver</option>
<option value="10">Ten spot</option>
<option value="100">Bill</option>
</select>
<script type="text/javascript">
<!--
var theSelect = document.getElementById('testSelect');
theSelect.onchange = function(){
if(this.value && this.value!= ''){
location.href = '/directory/retrieve_data.php?id='+this.value;
}
}
//-->
</script>

Fotiman

10:11 pm on Dec 18, 2006 (gmt 0)

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



Of course, if you do that, your visitors with JavaScript disabled will have no way to submit the form. What you should do is provide a submit button and then remove the submit button using JavaScript. That way, it will work for all users, whether they have JavaScript disabled or not.

eelixduppy

10:15 pm on Dec 18, 2006 (gmt 0)

WebmasterWorld Senior Member eelixduppy is a WebmasterWorld Top Contributor of All Time 5+ Year Member



Or do something like this:

<noscript>
<input type="submit" />
</noscript>

:)

Fotiman

10:18 pm on Dec 18, 2006 (gmt 0)

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



Yes, but a <noscript> means less separation of layers. That is, you're including behavior stuff in your markup. If you want to keep a cleaner separation of content and behavior, then just include the input and then remove/hide it with JavaScript.

whoisgregg

3:12 pm on Dec 19, 2006 (gmt 0)

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Improved sample code based on Fotiman's recommendations:

<form action="/directory/retrieve_data.php" method="get">
<select name="id" id="testSelect">
<option value="" selected="selected">Choose an option:</option>
<option value="5">Fiver</option>
<option value="10">Ten spot</option>
<option value="100">Bill</option>
</select> <input type="submit" value="Go!" id="submitHide" />
</form>
<script type="text/javascript">
<!--
var theSelect = document.getElementById('testSelect');
var theSubmit = document.getElementById('submitHide');
theSubmit.style.display = 'none';
theSelect.onchange = function(){
if(this.value && this.value!= ''){
location.href = '/directory/retrieve_data.php?id='+this.value;
}
}
//-->
</script>

Fotiman

4:12 pm on Dec 19, 2006 (gmt 0)

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



Love it!

My final nitpick would be to remove the comment tags in the script:

<script type="text/javascript">
<!--
...
//-->
</script>

Would become:
<script type="text/javascript">
...
</script>

Below is a quote [javascript.crockford.com] from Douglas Crockford [crockford.com]:


Do not use the <!-- //--> hack with scripts. It was intended to prevent scripts from showing up as text on the first generation browsers Netscape 1 and Mosaic. It has not been necessary for many years. <!-- //--> is supposed to signal an HTML comment. Comments should be ignored, not compiled and executed. Also, HTML comments are not to include --, so a script that decrements has an HTML error.

whoisgregg

6:28 pm on Dec 19, 2006 (gmt 0)

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member



remove the comment tags in the script

Interesting. I'll uncheck the "Wrap Script in HTML Comment" setting in BBEdit. Thanks for the heads up Fotiman.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month