JAVASCRIPT to remember selection

programming web dev
1

I have a form where you input the country and then the next dropdown automatically selects states and then when you select the state and the next dropdown on the form automatically selects cities from that state. All this works good. BUUUUUT, when the form is submitted, if there is an error, for example, leaving a required field empty, it returns you to the form with the values already filled in. How can I get JAVASCRIPT to select the remember the selection?

location.js


function fillCountry()
{
	addOption(document.enterUser.country, "Mexico", "Mexico", "");
	addOption(document.enterUser.country, "United States", "United States", "");
}

function selectState()
{ 
	removeAllOptions(document.enterUser.state);
	addOption(document.enterUser.state, "", "-- Select --", "");

	if(document.enterUser.country.value == 'Mexico')
	{
		addOption(document.enterUser.state,"Nuevo Leon", "Nuevo Leon");
		addOption(document.enterUser.state,"Tamaulipas", "Tamaulipas");
	}
	if(document.enterUser.country.value == 'United States')
	{
		addOption(document.enterUser.state,"Texas", "Texas");
	}
}

function selectCity()
{
	// ON selection of category this function will work

	removeAllOptions(document.enterUser.city);
	addOption(document.enterUser.city, "", "-- Select --", "");

	if(document.enterUser.state.value == 'Nuevo Leon')
	{
		addOption(document.enterUser.city,"Monterrey", "Monterrey");
		addOption(document.enterUser.city,"Sabinas Hidalgo", "Sabinas Hidalgo");
	}
	if(document.enterUser.state.value == 'Tamaulipas')
	{
		addOption(document.enterUser.city,"Nuevo Laredo", "Nuevo Laredo");
	}
	if(document.enterUser.state.value == 'Texas')
	{
		addOption(document.enterUser.city,"Corpus Christi", "Corpus Christi");
		addOption(document.enterUser.city,"Cotulla", "Cotulla");
		addOption(document.enterUser.city,"Eagle Pass", "Eagle Pass");
		addOption(document.enterUser.city,"Edinburg", "Edinburg");
		addOption(document.enterUser.city,"El Cenizo", "El Cenizo");
		addOption(document.enterUser.city,"Laredo", "Laredo");
		addOption(document.enterUser.city,"McAllen", "McAllen");
		addOption(document.enterUser.city,"San Antonio", "San Antonio");
		addOption(document.enterUser.city,"Sullivan City", "Sullivan City");
		addOption(document.enterUser.city,"Rio Bravo", "Rio Bravo");
		addOption(document.enterUser.city,"Zapata", "Zapata");
	}

}
////////////////// 

function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}


function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;

	selectbox.options.add(optn);
}




<span <?php if($repasswordMessage != ''){echo 'class="errorField"';} ?>>Re-type password: <input name="repassword" type="password" value="<?php echo $repassword; ?>" /></span>
<hr />

<span <?php if($countryMessage != ''){echo 'class="errorField"';} ?>>
Country: <select name="country" onchange="selectState();">
  <option value="" >-- Select --</option>
</select></span>

<span <?php if($stateMessage != ''){echo 'class="errorField"';} ?>>
State:
	<select id="state" name="state" onchange="selectCity();" >
	<option value="" selected="selected">-- Select --</option>
	</select>
</span>

<span <?php if($cityMessage != ''){echo 'class="errorField"';} ?>>
City:
	<select id="city" name="city" >
	<option value="">-- Select --</option>
	</select>
</span>

<span <?php if($zipcodeMessage != ''){echo 'class="errorField"';} ?>>Zipcode: <input name="zipcode" type="text" value="<?php echo $zipcode; ?>" /></span>
<span <?php if($addressMessage != ''){echo 'class="errorField"';} ?>>Address: <input name="address" type="text" value="<?php echo $address; ?>" /></span>