Jump to content

make a form's select option selected using JS


billcbos
 Share

Recommended Posts

I am struggling with something that I thought would be simple... ha! My web page has a POST form with a couple of select option lists. The form is provided by server side commerce software so it's something I want to use to integrate with this application. The web page presents a number of images the user can click on to configure the product the way they want. The images work better in this application than a list so I want to hide the select list. What I am struggling with is how to set the appropriate list option to selected so that the visitor's configuration choices can be sent to the server when the submit is executed. To make this easy to understand... let's say I have three color options: Red, Green and Blue. The web page displays the images, red.gif, green.gif and blue.gif so the visitor can see which one they prefer. The form I need to use has a select list: <select id="ColorOption" name="opt:0" size=1 > <option id="optionTitle" value="-- View Colors --;n">-- View Colors -- <option id="colorOption1" value="Red">Red <option id="colorOption2" value="Green">Green <option id="colorOption3" value="Blue">Blue </select>When the visitor clicks on the image green.gif, I want the Green option selected in the table so when the submit button is clicked the server knows the visitor selected green. I am not sure how to get this done and have been searching for some clue... I've found many clues but nothing seems to change the form's selected value. I am frustrated that something that seems so simple has got me stumped. Please help. Thanks.

Link to comment
Share on other sites

You can capture the onchange event of the select, and then assign the value property of said element to a cell in your table's innerHTML.

Link to comment
Share on other sites

You can capture the onchange event of the select, and then assign the value property of said element to a cell in your table's innerHTML.
I'm a little slow right now and I don't know what to do with your reply. Since no one is clicking on the form's select list there isn't an onchange event there. And the problem I am having is what code to use to programtically assign a value to the cell in the table (or list) included in the form. If you would be kind enough to show me a sample of the code needed to assign a selected value to one of the table options that would probably get me where I need to be. I sure hope I am making sense... Thanks.
Link to comment
Share on other sites

Oh right, sorry, I didn't understand your question correctly. What you an do is capture the onclick for the images, and then use that to set the value property of the select element.Alternatively, an easier way may be to make the three images imputs of type image - that way when someone clicks on one of them the form is submitted, with the name of said input as one of the form's arguments.

Link to comment
Share on other sites

Oh right, sorry, I didn't understand your question correctly. What you an do is capture the onclick for the images, and then use that to set the value property of the select element.Alternatively, an easier way may be to make the three images imputs of type image - that way when someone clicks on one of them the form is submitted, with the name of said input as one of the form's arguments.
Thank you once again. The first method is the one I have been trying and because there are actually multiple paramters the one I need to do. My problem is finding the right code to use for changing the value inside the form. I have tried a number of commands. So if you can point me to or provide me with an example of the code that I need: Use my example if you wish: Here is a select list<select id="ColorOption" name="opt:0" size=1 ><option id="optionTitle" value="-- View Colors --;n">-- View Colors -- <option id="colorOption1" value="Red">Red<option id="colorOption2" value="Green">Green<option id="colorOption3" value="Blue">Blue</select>and the onclick: <img src="green.gif" name="greenSwatch" id="greenSwatch" onclick="??????????"; Thanks much.
Link to comment
Share on other sites

The imporatant DOM property here is your select element's selectedIndex property. The index is zero-based. Setting it changes which option is selected. So the brute-force technique for the green option would look something like this:onclick="document.getElementById('ColorOption').selectedIndex=2"It is possible to write more robust code to do the job, but that should get the job done.

Link to comment
Share on other sites

The imporatant DOM property here is your select element's selectedIndex property. The index is zero-based. Setting it changes which option is selected. So the brute-force technique for the green option would look something like this:onclick="document.getElementById('ColorOption').selectedIndex=2"It is possible to write more robust code to do the job, but that should get the job done.
That's exactly what I needed. Thank you.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...