We help IT Professionals succeed at work.

dropdown menu without submit button

rgb192
rgb192 used Ask the Experts™
on

want to update page when user
uses dropdown menu


do not want submit button

can not change this line
<form id="xyz">







<form id="xyz">
<select>
<option>Paint</option>
<option>Brushes</option>
<option>Erasers</option>
</select>
</form>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
You can use the onchange event
onchange="selectfunction(this.options[this.selectedIndex].value)"

And then pass it to the javascript function "selectfunction(var mystring)"
Add the following to a script on the page, preferably on the body onload.
document.getElementById('xyz').getElementsByTagName('select').onChange = "document.getElementById('xyz').submit()";

Open in new window

Commented:
<form  id="xyz"  name=xyz method=post action=page.php>
<select name=listselect onchange=xyz.submit()>
<option value=null SELECTED><-- Select --></option>
<option value="paint">paint</option>
<option value="brushes">brushes</option>
<option value="erasers">erasers</option>
</select>
</form>

page.php would be:
<STRONG>You have selected</STRONG>
<EM>
<?php
echo $HTTP_POST_VARS["listselect"];
?>
</EM>
Commented:
Change the select line to

<select onChange="document.getElementsByTagName('form')(0).submit()">

Author

Commented:

dont understand
 1st comment


2nd comment
document.getElementById('xyz').getElementsByTagName('select').onChange = "document.getElementById('xyz').submit()";
can i put this on the line before 'form'
because I cant change the <header></header> without editing many pages

3rd comment
my code submits to same page and do nto want to change this







4th comment
<select onChange="document.getElementsByTagName(\'form\')(0).submit()">onChange="document.getElementsByTagName(\'form\')(0).submit()">';

did not refresh page

Commented:
Remove the backslashes around form?
<html>

<form id="xyz">
<select onchange="alert(this.options[this.selectedIndex].value);" >
<option>Paint</option>
<option>Brushes</option>
<option>Erasers</option>
</select>
</form>
</html>
Then if you want to pass it to the function:

<html>
 <script type="text/javascript">  
function selectfunction(mystring)
{
alert(mystring + ' was selected');
}


</script>
<form id="xyz">
<select onchange="selectfunction(this.options[this.selectedIndex].value);" >
<option>Paint</option>
<option>Brushes</option>
<option>Erasers</option>
</select>
</form>
</html>

Commented:
If you want to generate source using PHP you have to make a server request of some sort-- either a simple page either reloading the current or a new page or loading a page in an IFRAME.  Try looking at AJAX --here' is link:http://www.dynamicdrive.com/dynamicindex16/chainedselects/index.htm
you need to add a onload event handler to make sure your element exists before trying to work with it, so this code should be able to be placed anywhere


<script type="text/javascript">
window.onload=function(){
document.getElementById('xyz').getElementsByTagName('select').onChange = "document.getElementById('xyz').submit()";
}
</script>

Open in new window

Author

Commented:
<select onchange="alert(this.options[this.selectedIndex].value);" >


produced an alert text box


all of these did nothing
<script type="text/javascript">





is there a way to make the page refresh when dropdown select

Commented:
This will:
<select onChange="document.getElementsByTagName('form')(0).submit()">

You just have to make sure you don't paste it twice again. And make sure it doesn't have backslashes in it.

Author

Commented:
<select onChange="document.getElementsByTagName('form')(0).submit()">


this does not refresh the page

but your alert box worked

Commented:
Yeah... I am stupid... square brackets:

<select onChange="document.getElementsByTagName('form')[0].submit()">

Author

Commented:
<select onChange="document.getElementsByTagName('form')[0].submit()">



refreshes page
to
index.php?a=updatecart&ci[15044]=1


could i refresh page to
index.php


Commented:
<select onChange="document.getElementsByTagName('form')[0].method="post";document.getElementsByTagName('form')[0].submit()">

Author

Commented:
now page does not refresh
Most Valuable Expert 2011
Top Expert 2016
Commented:
So you want to submit the form when the client makes a selection?  But what if he misfires his selection?  No chance for the client to make a second change?  I think this is a poor design.  People are used to using submit buttons - after they have made the correct selections.  If it were my application I would abandon the idea of submitting anything at "onChange" time.

Anyway, best of luck with it, and be sure to test your code with the W3C validator before you commit it to public facing web sites. ~Ray

Commented:
Besides the fact that Ray's comment is absolutley correct, this might be a solution.

Put the script into the page.
<script type="text/javascript">
</--
function sendForm() {
    document.getElementsByTagName('form')[0].method="post";
    document.getElementsByTagName('form')[0].submit()
}
//-->
</script>

Then change the select to this line:

<select onChange="sendForm();">

Author

Commented:
didnt refresh the page

Author

Commented:
thanks