form submission with Javascript

[ktsirig]

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]

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]

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]

Or do something like this:

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

:)

[Fotiman]

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]

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]

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]

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.