JavaScript - Display Div When Dropdown Selected
i have a simple form basically....and i want to display a div containing a message when a certain dropdown menu item is selcted...
as you will see...i have two divs in my message...one named website design and one named twitter design both set to display none when website design is selected i want the websitemessage div to display when twitter is selected i want the twitter message to display... any thoughts? here is some of the code Code: <form id="contactform" action="contact-submit.php" method="post"> <!-- form fields --> <div class="form"> <label for="name">Name<em>•</em></label> <input class="textbox required" type="text" name="name" id="name" /><br /> <label for="email">E-Mail<em>•</em></label> <input class="textbox required email" type="text" name="email" id="email" /><br /> <label for="subject">What are you interested in?<em>•</em></label> <select type="text" value="Choose a Service" name="subject" id="subject" onchange="Select(this,'budget',1);"/> <option selected> -- Select A Design Service --</option> <option id="website"> Website Design </option> <option> Twitter </option> <option> Ning or Tumblr </option> <option> Flyers </option> <option> Business Card or Brochure</option> <option> Album or Mixtape cover</option> <option>Other</option> </select><br /> <div id="websitemessage" style="display:none;"><label> Do you already have a Logo to use for this website? </label> <input style="width:auto;margin-left:10px;" type="radio" name="budget" value="Logo: Yes"> Yes <input style="width:auto;margin-left:10px;" type="radio" name="budget" value="Logo: Not yet"> Not yet </input> </div> <div id="twittermessage" style="color:#B5B5B5; display:none;"><SPAN>Twitter Designs start at </SPAN><span style="color:#000;"> $30</SPAN> </div> any ideas on what script i would put into the head tags to make that happen? Similar Tutorialslike for example i have text areas named upload1 and upload2 when I click or add input on upload1 a drop down list below upload2 will not change, but when I add input on upload2 the dropdown will select "parts" Hi there, I would like to create a page that has a dropdown menu populated with a list of images. When someone selects an image, the image and a URL to a webpage will display (screenshot below). Each image will have a different URL. How do I accomplish this? Thanks! Denise HI I'm using this form in my site, but I want to amend it so the form updates based on the option ID, not the option Value. This will make it easier for me to save the correct data in the value field.. Any ideas ? PHP Code: <html> <head> <script type="text/javascript"> function setOptions(chosen) { var selbox = document.myform.opttwo; selbox.options.length = 0; if (chosen == " ") { selbox.options[selbox.options.length] = new Option('Please select one of the options above first',' '); } if (chosen == "1") { selbox.options[selbox.options.length] = new Option('first choice - option one','oneone'); selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo'); } if (chosen == "2") { selbox.options[selbox.options.length] = new Option('second choice - option one','twoone'); selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo'); } if (chosen == "3") { selbox.options[selbox.options.length] = new Option('third choice - option one','threeone'); selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo'); } } </script> </head> <body> <form name="myform"><div class="centre"> <select name="optone" size="1" onchange="setOptions(document.myform.optone.options[document.myform.optone.selectedIndex].value);"> <option id="0" value=" " selected="selected"> </option> <option id="1" value="1">First Option</option> <option id="2" value="2">Second Choice</option> <option id="3" value="3">Third Choice</option> </select><br /> <br /> <select name="opttwo" size="1"> <option value=" " selected="selected">Please select one of the options above first</option> </select> <input type="button" name="go" value="Value Selected" onclick="alert(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].value);"> </div></form> </body> </html> So how do I get CHOSEN to equal the ID not the value ? Thanks I have a dropdown box with 2 options: Free or Upgraded I need to do 2 separate things depending on which one is chosen. If Free, then set the value in fourth text field to 9999 else, set value in Fourth field to 5555. Code: <head> <script type="text/javascript"> function calculate() { var myLevel = eval(document.earningsform.level.value) var memberType = eval(document.earningsform.type.value) if(memberType==free){ document.earningsform.fourth.value = 9999; } else{ document.earningsform.fourth.value = 5555; } </script> </head> <body> <table> <form action="calculator.php" method="POST" name="earningsform"> <tr> <td align="center">My Level: </td><td><input type="text" name="level" value="50" size="10"></td><td></td> </tr> <tr> <td align="center">Member Type: </td><td> <select name="type"> <option value="upgraded" name="upgraded" selected="selected">Upgraded</option> <option value="free" name="free">Free</option> </select></td> <td></td> </tr> <tr> <td align="center">4th Level: </td><td><input type="text" name="fourth" size="10" value="5"></td><td>7.5</td> </tr> </form> </table> </body> ive been racking my brain looking for a code solution for this....im a html and css pro....and a javascript NOOB lol heres what im tryna do....i have a form...that has a Code: <option> in it for 6 dropdown options.... in one of those possible options.. when SELECTED...i want the div layer that i currently have under it...to appear and i cant seem to figure it out....heres my code in its entirety i want budget div...to appear when the option website design is selected Code: <label for="subject">What are you interested in?<em>•</em></label> <select type="text" value="Choose a Service" name="subject" id="subject" /> <option selected> -- Select A Design Service --</option> <option id="website"> Website Design </option> <option> Twitter </option> <option> Ning or Tumblr </option> <option> Flyers </option> <option> Business Card or Brochure</option> <option>Other</option> </select><br /> <div id="budget" style="display:none;"><label> Do you know your budget for this Project? </label> <input style="width:auto" type="radio" name="message" value="Not Sure"> Not sure <input style="width:auto;margin-left:10px;" type="radio" name="budget" value="$400-$800"> $400-$800 <input style="width:auto;margin-left:10px;" type="radio" name="budget" value="$800-$1200"> $800-$1200 <input style="width:auto;margin-left:10px;" type="radio" name="budget" value="over $1200"> over $1200 </div> what can be the reasons for the same code which works perfectly in notepad to not show its result in a jsp application done using eclipse??anything to do with settings? I am not able to display the current date as default in dd/mm/yyyy format in drop down boxes..only dd and yyyy apears but month isnt apearing as default.. can u suggest alternative logic and its code to implement the same?? I'm not that familiar with classic ASP or Javascript but need to change an exisiting program to do the following: Add a link to a page but only for certain marketers. I have a classic ASP page that has a couple of hyperlinks for each marketer that is selected from a combobox drop down. The new hyperlink is to be added but only for select marketers. The rest don't even get to see this new hyperlink. I added a function in Javascript as such: Code: function IsPikeESCO(UID,UCD) { var strTemp; var mktrno,mktname; var frm; var IsPike; IsPike = false; frm = document.Downloads; strTemp=frm.MKTRACCT.options[frm.MKTRACCT.selectedIndex].text; mktrno=strTemp.substring(0,10); switch (mktrno) { case 8: IsPike = True; break; case 99: IsPike = True; break; case 162: IsPike = True; break; } return IsPike; } Now I need to check if True then display the hyperlink, so I came up with this, which I know is not correct: Code: <tr><td></td><td <%IF <a HREF="javascript:IsPikeESCO('<%response.write request("passUID")%>','<%response.write request("passUCD")%>')" = True THEN%> onMouseOver="/orradata/pike.DAT">Pike Data</font></a> <%END IF%> I want to be able to check the fuction for each marketer and if return is TRUE, then produce the hyperlink which will open a data file if clicked. Can someone help? I'm not sure how to use the <%IF statement in conjunction with a javascript function that checks for a return value, and based on that return value, does some action. When a particular radio option is selected and the user presses the submit button, based on what is selected I want a particular lightbox to popup [like an alert]. The JavaScript below is what I used to turn images I created into radio buttons so I could have my own custom styles instead of using the default DOM version. Any help is appreciated. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <LINK REL=StyleSheet HREF="global.css" TYPE="text/css" MEDIA=screen> <script type="text/javascript"> // Leave next 2 lines as is. Customization is a few lines down. var RadioCheckedImage = new Image(); var RadioUncheckedImage = new Image(); // Customization section: // Specify the relative or absolute URL of each image. Examples: RadioCheckedImage.src = "images/radio_on.png"; RadioUncheckedImage.src = "images/radio_off.png"; // No other customizations needed. function RadioClicked(radioid,radiosetname,formid) { // - first, uncheck all radio buttons of the set var form = document.getElementById(formid); for( var i = 0; i < form.length; i++ ) { if(form[i].name == radiosetname) { document.getElementById(form[i].id).checked = false; document.getElementById("Image"+form[i].id).src = RadioUncheckedImage.src; } } // - then, check the clicked button document.getElementById(radioid).checked = true; document.getElementById("Image"+radioid).src = RadioCheckedImage.src; return false; } </script> <script type="text/javascript"> $(document).ready(function(){ $('#submit_button').click(function() { if (!$("input[@name='name']:checked").val()) { alert('Nothing is checked!'); return false; } else { alert('One of the radio buttons is checked!'); } }); }); </script> </head> <body> <div id="container"> <img class="main_pic" src="images/cain.jpg" alt="..." /> <img class="herman_slice" src="images/herman.png" alt="..." /> <img class="cain_slice" src="images/cain.png" alt"..." /> <img class="is_slice" src="images/is.png" alt="..." /> <img class="what_slice" src="images/what.png" alt="..." /> <!-- Form --> <span style="display:none;"> <form id="MyFormID"> <input type="radio" name="thisradio" value="yes" id="RadioFieldID1"> <input type="radio" name="thisradio" value="yes" id="RadioFieldID2"> <input type="radio" name="thisradio" value="yes" id="RadioFieldID3"> <input type="radio" name="thisradio" value="yes" id="RadioFieldID4"> </form> </span> <!-- Start of Form --> <div class="radio_section"> <img id="ImageRadioFieldID1" src="images/radio_off.png" name="solidworks" width="42" height="44" onclick="RadioClicked('RadioFieldID1','thisradio','MyFormID')" style="cursor:pointer;"> <img class="smart_slice" src="images/smart_slice.jpg" alt="..." /> <img id="ImageRadioFieldID2" src="images/radio_off.png" name="solidworks" width="42" height="44" onclick="RadioClicked('RadioFieldID2','thisradio','MyFormID')" style="cursor:pointer;"> <img class="smart_slice" src="images/dumb_slice.jpg" alt="..." /> <img id="ImageRadioFieldID3" src="images/radio_off.png" name="solidworks" width="42" height="44" onclick="RadioClicked('RadioFieldID3','thisradio','MyFormID')" style="cursor:pointer;"> <img class="average_slice" src="images/average_slice.jpg" alt="..." /> <img id="ImageRadioFieldID4" src="images/radio_off.png" name="solidworks" width="42" height="44" onclick="RadioClicked('RadioFieldID4','thisradio','MyFormID')" style="cursor:pointer;"> <img class="idk_slice" src="images/idk_slice.jpg" alt="..." /> </div> <!-- End of Form --> <img class="submit_btn" src="images/submit_btn.jpg" alt="..." /> </div> </body> </html> Hey guys, Im trying to figure out how to display a string of text beneath the drop down when a specific option is selected. for example: if you select 'Colors' just plain text would appear the drop down and show the list of colors 'red, blue, green, yellow' or if you select 'Fruit' the plain text shows the list of fruit "orange, banana, apple, lemon' Any ideas or can you guys point me in the right direction? I have a similar code except its when you type in a number in a textarea it would output the coressponding data. I have two dropdown menus. 1st -> Drop Down Menu (name="optionDrop") has 5 values which are "ABC", "ABCD", "ABCDE", "True or False" and "Yes or No". 2nd -> Drop Down Menu (name="numberDrop") has 5 values which are "","1", "2", "3" and "4". Now this is what I want to achieve: If user select "ABC" from "optionDrop", then only display options "", "1" and "2" If user select "ABCD" from "optionDrop", then only display options "", "1", "2" and "3" If user select "ABCDE" from "optionDrop", then only display options "", "1", "2", "3" and "4" If user select "True or False" from "optionDrop", then do not display DropDown Menu and Display N/A (This I achieved but I want hidden numberDrop to equal 1, I have not achieved that part) If user select "Yes or No" from "optionDrop", then do not display DropDown Menu and Display N/A (This I achieved but I want hidden numberDrop to equal 1, I have not achieved that part) Does anyone know how this can be done and implemented in the javascript code I have? Below is Javascript Code: Code: function getDropDown() { var optionDrop = document.getElementsByName("optionDrop"); var na = document.getElementById("na"); var numberDrop = document.getElementsByName("numberDrop"); var answerA = document.getElementById("answerA"); var answerB = document.getElementById("answerB"); var answerC = document.getElementById("answerC"); var answerD = document.getElementById("answerD"); var answerE = document.getElementById("answerE"); var answerTrue = document.getElementById("answerTrue"); var answerFalse = document.getElementById("answerFalse"); var answerYes = document.getElementById("answerYes"); var answerNo = document.getElementById("answerNo"); if (optionDrop[0].value == "abc" || optionDrop[0].value == "abcd" || optionDrop[0].value == "abcde"){ numberDrop[0].style.display = "block"; na.style.display = "none"; }else if (optionDrop[0].value == "trueorfalse" || optionDrop[0].value == "yesorno"){ numberDrop[0].style.display = "none"; na.style.display = "block"; } } Htrml code: Code: <form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" > <table id="middleDetails" border="1"> <tr> <td>Question:</td> <td rowspan="3"> <textarea rows="5" cols="40" name="questionText"></textarea> </td> <td>Option Type:</td> <td> <select name="optionDrop" onClick="getDropDown()"> <option value="">Please Select</option> <option value="abc">ABC</option> <option value="abcd">ABCD</option> <option value="abcde">ABCDE</option> <option value="trueorfalse">True or False</option> <option value="yesorno">Yes or No</option> </select> </td> <tr> <td colspan="2"></td> <td>Number of Answers:</td> <td> <span id="na">N/A</span> <select name="numberDrop" id="numberDropId" onChange="getButtons()"> <option value=""></option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> </tr> </table> </form> I have a long list consisting of a name and associated number, like this: SITE01 2111 SITE02 4567 SITE03 5555 and so on. I would like to put two dropdown boxes where the user can select either the name or the number. Then based upon the users selection have both the name and number appear. I'm thinking of putting all the data in an array and using the dropdowns to query the array. That sounds good but I'm new to javascript and a detailed example of how to do this would be needed, if its even the right approach to take to accomplish this. Hi, I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now. The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again? I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>HTML Template</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <script type="text/javascript"> //<![CDATA[ function store(element) { // store values var cl = element; var text_list = new Array(); var value_list = new Array(); var length = cl.length; for (var foo=0; foo<length; foo++) { text_list[foo] = cl.options[foo].text; value_list[foo] = cl.options[foo].value; alert("text array " + foo + " " + text_list[foo]); alert("value array " + foo + " " + value_list[foo]); } populate(cl, text_list, value_list); } function populate(element, text, value) { // populate options with previously stored values var cl = element; var length = cl.length; cl.options.length=0; for (var bar=0; bar<length; bar++) { cl.options[bar]= new Option(text[bar], value[bar], false, false); } } function crafty_set_country(code) { var cl = document.getElementById('select'); store(cl); for (var i=0; i<cl.length; i++) { if (cl.options[i].value == code) { alert(cl.options[i].value + " found"); var value = cl.options[i].value; var text = cl.options[i].text; cl.options.length=0; cl.options[0]=new Option(text, value, true, true); /* for (var j=0; j<cl.length; j++) { alert("second loop " + cl.options[j].text); if (cl.options[i].value != code) { cl.options[j] } } */ } else { alert(cl.options[i].value); } } } //]]> </script> </head> <body> <form> <select id="select"> <option value="10">ten</option> <option value="20">twenty</option> <option value="30">thirty</option> <option value="40">fourty</option> <option value="50">fifty</option> <option value="60">sixty</option> </select> <input type="button" value="remove" name="button" onClick="crafty_set_country(50)"> <input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)"> </form> </body> </html> Many thanks! Martin hey guys The first dropdown has some options as : abc(a) bcd(a) cde(b) def(b) efg(c) fgh(c) The second dropdown has : a b c On selecting abc(a) in first dropdown the 'a' must get selected in second dropdown,on selecting cde(b) second dropdown must have 'b' and so on,also the second dropdown value should be disabled(grayed out) for user.Need the code in javascript.ty in advance. Hello, I am completely new to HTML/JS/CSS, therefore I know very little. I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July". I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected). If it matters, I am using IE8. Thanks! Hi, I have two dropdown lists with the second one being dependent on the selection in the first. Options in list 1: 1,3 or 4 List two should be enabled when 3 or 4 is selected in list 1. So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form: Code: <select name="fw[$i]" id="fw[$i]"> <option value="1">FWH</option> <option value="3">links</option> <option value="4">rechts</option> <option value="0" selected></option> </select><br /> <select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);"> <option value="0" selected>---</option> <option value="1">gut</option> <option value="2">schlecht</option> <option value="3">Strafschlag</option> <option value="4">OB</option> </select> $i is my index generated by my PHP script and runs from 1 to 18. Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field. Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable. Code: function showBox(field,val) { if (val > 1) { var box = 'lie[' + field + ']'; document.form1.box.disabled == false; } else { document.form1.box.disabled == true; } } Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem. Thanks in advance! Joe Hey, I was wondering if there was something in javascript that could tell if the text is selected. Selected as in when you click and hold your mouse down and go over text. Is there something in javascript to tell if you've selected any text? Thanks. I'm trying to make a comment script with show/hide divs and are so far OK, but... I want to hide one div when another is activated... Here is what I have so far: Code: <? for ($q = 1; $q <= 5; $q++) { echo '<div id="jdivStart'.$q.'" style="padding:0px 0px 0px 0px;width:100%x;">'; echo '<textarea style="color:#999999;" rows=2 cols="66" onfocus="jchange'.$q.'(\'jdiv'.$q.'\');">Write comment</textarea>'; echo '</div>'; echo '<div id="jdiv'.$q.'" style="display:none;">'; echo '<textarea style="color:#999999;" rows=6 cols="66"></textarea>'; echo '</div>'; ?> <script language="javascript" type="text/javascript"> function jchange<? echo $q; ?>(divname) { var currentShowingDivQ = document.getElementById('jdivStart<? echo $q; ?>'); var objDivQ = document.getElementById(divname); if (currentShowingDivQ && currentShowingDivQ != objDivQ) { currentShowingDivQ.style.display = 'none'; } if(objDivQ.style.display == 'none'){ objDivQ.style.display = 'block'; } else { objDivQ.style.display = 'none'; } } </script> <? } ?> So if I activate the first textbox, then when I activates the second I want to be able to hide the first again... Any help i appreciated :-) Hi i can't seem to get a drop downs selected index. This is my drop down box: Code: <select name="queba" id="queeba"> <option value="ban1">Bank1 <option value="ban2">Bank2 <option value="ban3">Bank3 <option value="ban4">Bank4 </select> thanks Hope I can explain this... I have a page with a couple dropdowns - dropdown-1 is for shape, and dropdown-2 is for color. Images appear to match what the user selects. The shape image has a transparent center, so that I can make a color image appear underneath, when they choose that. But to do so, I have to set a default color picture (pic4) appear, so that the shape(pic1) can be seen. The color dropdown works just fine. But if they go back and change the shape, it defaults to the original (pic4) What's a way to script this so it knows not to change pic4 if it's been selected. In other words, as a user I pick "round". It shows me a round circle. I select "orange", to change the circle's color. But I change my mind, I want a square, so I go back and change it, but my square is green again, even though I chose orange. Here's some of what I got. Code: <script> function change1(picName,imgName) { if (document.images) { imgOn=eval(imgName + ".src"); document[picName].src= imgOn; } } <!-- this following is the variable from the form that I want to check. If it's been set, then I want the color image to be left alone --> function passit2(str) {document.formsearch1.s2.value=str} </script> <!-- this next little bit is what I'm wanting to work on. I want it to know if pic4 has bee selected, and to leave it alone if that has happened. --><a href="javascript:passit('auriculate')" onMouseover="change1('pic1','image2')" onClick="ShowContent('uniqueleaf'); change4('pic2','_auriculate'); ShowContent('uniquename'); change1('pic4','image28'); add_content('auriculate');" onMouseout="change1('pic1','image41');">Auriculate</a></li> <!-- Here's the bit related directly to pic4. If they have selected this, I don't want it to change when --> <li id="green"><a href="javascript:passit2('green')" onMouseover="change1('pic3','image28')" onClick="ShowContent('uniquename'); change1('pic4','image28'); add_content2('green');" onMouseout="change1('pic3','image_off');">green</a></li> <li id="orange"><a href="javascript:passit2('orange')" onMouseover="change1('pic3','image29')" onClick="ShowContent('uniquename'); change1('pic4','image29'); add_content2('orange');" onMouseout="change1('pic3','image_off');">orange</a></li> <li id="red"><a href="javascript:passit2('red')" onMouseover="change1('pic3','image30')" onClick="ShowContent('uniquename'); change1('pic4','image30'); add_content2('red');" onMouseout="change1('pic3','image_off');">red</a></li> <li id="blue"><a href="javascript:passit2('blue')" onMouseover="change1('pic3','image31')" onClick="ShowContent('uniquename'); change1('pic4','image31'); add_content2('blue');" onMouseout="change1('pic3','image_off');">blue</a></li> <li id="purple"><a href="javascript:passit2('purple')" onMouseover="change1('pic3','image32')" onClick="ShowContent('uniquename'); change1('pic4','image32'); add_content2('purple');" onMouseout="change1('pic3','image_off');">purple</a></li> <li id="purpleblack"><a href="javascript:passit2('purple-black')" onMouseover="change1('pic3','image32')" onClick="ShowContent('uniquename'); change1('pic4','image33'); add_content2('purple black');" onMouseout="change1('pic3','image_off');">purple-black</a></li> <!-- here's the image that is being changed. Maybe if it's a script that just checks to see if it's transparent.gif to change it, and if it's not, to leave it alone? --> <IMG SRC="images/leaf_shapes/entire/transparent1.gif" name="pic4" width="250" height="350" border="0"> Hi All, I am using this code to populate a drop down list from mysql database. I need to pass id and name through this code.but the problem is the value is lost when the page gets refreshed.and it works fine if i pass only name through it. my code is as follows: PHP Code: <?PHP $query=mysql_query("SELECT * FROM client_master WHERE client_status=1");?> <select name='name' onChange='javascript:form_submit();' style='width:80px'> <option value="">-SELECT-</option> <?php while($row=mysql_fetch_array($query)) { $name=$row['client_name']; ?> <option value="<?php echo $row['client_id'] ?>" <?php echo($row['client_name']==$_POST['name'])?'selected':''?>> <?php echo $row[client_name];?> </option> <?php } ?> </select> <script language="javascript"> function form_submit(){ document.gr.submit(); } </script> |