Hi everybody. I am having some trouble getting some javascript to work properly. I have a 3 page form that has some values from the first page that are repeated on the third and would like to copy these selections over for the drop down menus. Below is the code I am working with...

Javascript File:

function Select_Value_Set(SelectName, Value) {
  eval('SelectObject = document.' + 
    SelectName + ';');
  for(index = 0; 
    index < SelectObject.length; 
    index++) {
   if(SelectObject[index].value == Value)
     SelectObject.selectedIndex = index;
   }
}

HTML File:

<script language="JavaScript">
	Select_Value_Set('form.state', CA);
</script>
<form name="form" method="post" action="<?php getSubmit(); ?>" id="form">
<select name="state" id="state" class="form_fields" style="width: 175px">
                                          <option value="00">Select</option>
                                          <option value="AL">Alabama </option>
                                          <option value="AK">Alaska </option>
                                          <option value="AZ">Arizona </option>
                                          <option value="AR">Arkansas </option>
                                          <option value="CA">California </option>
                                          <option value="CO">Colorado </option>
                                          <option value="CT">Connecticut </option>
                                          <option value="DE">Delaware </option>
                                          <option value="DC">District of Columbia </option>
                                          <option value="FL">Florida </option>
                                          <option value="GA">Georgia </option>
                                          <option value="HI">Hawaii </option>
                                          <option value="ID">Idaho </option>
                                          <option value="IL">Illinois </option>
                                          <option value="IN">Indiana </option>
                                          <option value="IA">Iowa </option>
                                          <option value="KS">Kansas </option>
                                          <option value="KY">Kentucky </option>
                                          <option value="LA">Louisiana </option>
                                          <option value="ME">Maine </option>
                                          <option value="MD">Maryland </option>
                                          <option value="MA">Massachusetts </option>
                                          <option value="MI">Michigan </option>
                                          <option value="MN">Minnesota </option>
                                          <option value="MS">Mississippi </option>
                                          <option value="MO">Missouri </option>
                                          <option value="MT">Montana </option>
                                          <option value="NE">Nebraska </option>
                                          <option value="NV">Nevada </option>
                                          <option value="NH">New Hampshire </option>
                                          <option value="NJ">New Jersey </option>
                                          <option value="NM">New Mexico </option>
                                          <option value="NY">New York </option>
                                          <option value="NC">North Carolina </option>
                                          <option value="ND">North Dakota </option>
                                          <option value="OH">Ohio </option>
                                          <option value="OK">Oklahoma </option>
                                          <option value="OR">Oregon </option>
                                          <option value="PA">Pennsylvania </option>
                                          <option value="RI">Rhode Island </option>
                                          <option value="SC">South Carolina </option>
                                          <option value="SD">South Dakota </option>
                                          <option value="TN">Tennessee </option>
                                          <option value="TX">Texas </option>
                                          <option value="UT">Utah </option>
                                          <option value="VT">Vermont </option>
                                          <option value="VA">Virginia </option>
                                          <option value="WA">Washington </option>
                                          <option value="WV">West Virginia </option>
                                          <option value="WI">Wisconsin </option>
                                          <option value="WY">Wyoming </option>
                          </select>
</form>

Thank you for any help!

It will have to be done in whatever server side code you use to accept the input.

Thank you chrishirst. I did end up having to write a php function that basically rebuilds the select menus for me and adds the selected tag when appropriate. Is there any reason you could give me as to why this can't be done client side? As always, thanks for your wisdom...

because; Unless you pass the form data back to the page or into a cookie and read it from there, the client side code doesn't "know" what the selected item was.

I guess the reason I'm having trouble understanding why this doesn't work is because I use javascript in the same way as a means of form validation. Does it have to do with the fact that the page has already been generated by the server and javascript has no control to make changes at that point?

You can validate client side because all the values are being input on the client side. Once the page reloads all javascript variables are reinitialised, and unless you pass the form values back they are all empty.

What if I am using php to pass the the form value to javascript? Still no go?

Pass the values back to the page and you can do whatever you need with them.

Thats what I was doing but it did not seem to work. Is it not good enough to just POST the values in php then pass the php var to javascript?

all you need to do is to write selected="selected" into the appropriate option element as the page is being regenerated.

What would you suggest is the best way of doing that? I thought with javascript you could iterate over the option values and set selected to true when the option desired is found. This did not work for me though so maybe I'm wrong...lol. As it is it is working like I said above using php to just recreate the select field while adding selected="selected" to the appropriate option element. My curiosity is just more for understanding why I could not pull this off using javascript. Would you be willing to look at the source code for me so I can clarify why it did not work?

In your loop to create the select list, add a check for the submitted value matching the current option value and echo 'selected=/"selected/"' into the option

I have that working fine for php and that is exactly how I did it. My problem with this method is you must provide an array of values to populate the select list. In my case there are some pretty large lists for states, dollar values etc. So I had to go through by hand and type out these arrays to pass to my generateSelect function. I figured using javascript would be easier sonce I could just have it iterate through each option and check the value then set the selcted value to true when found.

Here is the javascript code that my php variable gets passed to:

function setState(val){
	for (var i = 0; i < document.form.state.length; i++) {
		if (document.form.state.options[i].value == val)
			document.form.state.options[i].selected = true;        
	}
}

And here is how I call the function from html:

<script language="JavaScript">
	setState(<?php echo $state ?>);
</script>

Is there a problem in the way I am calling the function? Does it need to be triggered somehow? I know this is possible since it is well documented all over the net, I have just never done it before...

If you know the name of the option that is to be selected, there is no need to make an array out of every option. You could place the entire select + options into a string, and do string replacement:

PHP Code:

$selected_value="ca";
$select = '<select name="etc">
<option value="al">Alabama</option>
<!--etc-->
</select>';
$select = str_replace('<option value="'.$selected_value.'"', '<option selected="selected" value="'.$selected_value.'"', $select);
echo $select; 


Hmmm, interesting...

Other than that, the only problem I see with your function is this:

function setState(val){
    for (var i = 0; i < document.form.state.length; i++) {
        if (document.form.state.options[i].value == val)
            document.form.state.options[i].selected = true;        
    }
}

The length of document.form.state is always going to be 1. What you need is the number of options.