homepage Welcome to WebmasterWorld Guest from 54.196.168.78
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 / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
form submission with Javascript
ktsirig




msg:3192500
 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




msg:3192526
 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




msg:3192528
 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




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

Or do something like this:

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

:)

Fotiman




msg:3192536
 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




msg:3193307
 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




msg:3193391
 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




msg:3193553
 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