homepage Welcome to WebmasterWorld Guest from 54.166.53.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
form submission with Javascript
ktsirig

5+ Year Member



 
Msg#: 3192498 posted 9:49 pm on Dec 18, 2006 (gmt 0)

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

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



 
Msg#: 3192498 posted 10:08 pm on Dec 18, 2006 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3192498 posted 10:11 pm on Dec 18, 2006 (gmt 0)

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

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



 
Msg#: 3192498 posted 10:15 pm on Dec 18, 2006 (gmt 0)

Or do something like this:

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

:)

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3192498 posted 10:18 pm on Dec 18, 2006 (gmt 0)

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

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



 
Msg#: 3192498 posted 3:12 pm on Dec 19, 2006 (gmt 0)

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

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 3192498 posted 4:12 pm on Dec 19, 2006 (gmt 0)

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

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



 
Msg#: 3192498 posted 6:28 pm on Dec 19, 2006 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

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