Javascript - Hidden Input Fields - innerHTML - Reset

Hello All

I have a small script that take onClick's from an image map (of the United States) and puts those selections into a textarea to view (keep track of selections) and also enter corresponding selections as hidden input fields by writing to the innerHTML property of a <DIV></DIV> section. All in all, it works perfectly fine, except, when I reset the selections and then choose something else and submit the form. It not only posts my new selections, but my old selections as well, even though I'm clearing them as shown below in the code. Can anybody tell me what I am missing here, becuase it seems like the selections (input fields written to <DIV>'s innerHTML) is being cache or stored, so even if I write over it, it still retains previous selection.

I have included a link below so you can visually see the interface I am working with on this issue.

<script type="text/javascript" language="JavaScript">

statesregions = new Array();
selectedStates = new Array();
inputStates = new Array();
listingStates = new String;
listingCurrent = new String;

function makeSelection(selectionID)
{

statesregions['state_wa'] = "<font color='#003366'><strong>Washington</strong></font>";
statesregions['state_or'] = "<font color='#003366'><strong>Oregon</strong></font>";
statesregions['state_ca'] = "<font color='#003366'><strong>California</strong></font>";
statesregions['state_id'] = "<font color='#003366'><strong>Idaho</strong></font>";
statesregions['state_nv'] = "<font color='#003366'><strong>Nevada</strong></font>";

statesregions['state_az'] = "<font color='#003366'><strong>Arizona</strong></font>";
statesregions['state_ut'] = "<font color='#003366'><strong>Utah</strong></font>";
statesregions['state_co'] = "<font color='#003366'><strong>Colorado</strong></font>";
statesregions['state_nm'] = "<font color='#003366'><strong>New Mexico</strong></font>";
statesregions['state_wy'] = "<font color='#003366'><strong>Wyoming</strong></font>";

statesregions['state_mt'] = "<font color='#003366'><strong>Montana</strong></font>";
statesregions['state_nd'] = "<font color='#003366'><strong>North Dakota</strong></font>";
statesregions['state_sd'] = "<font color='#003366'><strong>South Dakota</strong></font>";
statesregions['state_ne'] = "<font color='#003366'><strong>Nebraska</strong></font>";
statesregions['state_ks'] = "<font color='#003366'><strong>Kansas</strong></font>";

statesregions['state_ok'] = "<font color='#003366'><strong>Oklahoma</strong></font>";
statesregions['state_tx'] = "<font color='#003366'><strong>Texas</strong></font>";
statesregions['state_mn'] = "<font color='#003366'><strong>Minnesota</strong></font>";
statesregions['state_ia'] = "<font color='#003366'><strong>Iowa</strong></font>";
statesregions['state_mo'] = "<font color='#003366'><strong>Missouri</strong></font>";

statesregions['state_ar'] = "<font color='#003366'><strong>Arkansas</strong></font>";
statesregions['state_la'] = "<font color='#003366'><strong>Lousiana</strong></font>";
statesregions['state_ms'] = "<font color='#003366'><strong>Mississippi</strong></font>";
statesregions['state_tn'] = "<font color='#003366'><strong>Tennessee</strong></font>";
statesregions['state_ky'] = "<font color='#003366'><strong>Kentucky</strong></font>";

statesregions['state_il'] = "<font color='#003366'><strong>Illinois</strong></font>";
statesregions['state_in'] = "<font color='#003366'><strong>Indiana</strong></font>";
statesregions['state_wi'] = "<font color='#003366'><strong>Wisconsin</strong></font>";
statesregions['state_mi'] = "<font color='#003366'><strong>Michigan</strong></font>";

statesregions['state_oh'] = "<font color='#003366'><strong>Ohio</strong></font>";
statesregions['state_al'] = "<font color='#003366'><strong>Alabama</strong></font>";
statesregions['state_fl'] = "<font color='#003366'><strong>Florida</strong></font>";
statesregions['state_ga'] = "<font color='#003366'><strong>Georgia</strong></font>";
statesregions['state_sc'] = "<font color='#003366'><strong>South Carolina</strong></font>";

statesregions['state_nc'] = "<font color='#003366'><strong>North Carolina</strong></font>";
statesregions['state_va'] = "<font color='#003366'><strong>Virginia</strong></font>";
statesregions['state_wv'] = "<font color='#003366'><strong>West Virginia</strong></font>";
statesregions['state_md'] = "<font color='#003366'><strong>Maryland</strong></font>";
statesregions['state_ri'] = "<font color='#003366'><strong>Rhode Island</strong></font>";

statesregions['state_pa'] = "<font color='#003366'><strong>Pennsylvania</strong></font>";
statesregions['state_ny'] = "<font color='#003366'><strong>New York</strong></font>";
statesregions['state_nj'] = "<font color='#003366'><strong>New Jersey</strong></font>";
statesregions['state_de'] = "<font color='#003366'><strong>Deleware</strong></font>";
statesregions['state_ct'] = "<font color='#003366'><strong>Conneticutt</strong></font>";

statesregions['state_ma'] = "<font color='#003366'><strong>Massechusetts</strong></font>";
statesregions['state_vt'] = "<font color='#003366'><strong>Vermont</strong></font>";
statesregions['state_nh'] = "<font color='#003366'><strong>New Hampshire</strong></font>";
statesregions['state_me'] = "<font color='#003366'><strong>Maine</strong></font>";

statesregions['region_we'] = "<font color='#003366'><strong>West</strong></font><br><hr align='left' size='1' noshade style='color:#990000'>California<br>Oregon<br>Washington<br>";
inputStates['region_we'] = "<input type='hidden' name='state_ca' value='state_ca'>"+"<input type='hidden' name='state_or' value='state_or'>"+"<input type='hidden' name='state_wa' value='state_wa'>";
statesregions['region_sw'] = "<font color='#003366'><strong>South West</strong></font><br><hr align='left' size='1' noshade style='color:#990000'>Arizona<br>Colorado<br>Idaho<br>New Mexico<br>Nevada<br>Utah<br>Wyoming<br>";
inputStates['region_sw'] = "<input type='hidden' name='state_az' value='state_az'>"+"<input type='hidden' name='state_co' value='state_co'>"+"<input type='hidden' name='state_id' value='state_id'>"+"<input type='hidden' name='state_nm' value='state_nm'>"+"<input type='hidden' name='state_nv' value='state_nv'>"+"<input type='hidden' name='state_ut' value='state_ut'>"+"<input type='hidden' name='state_wy' value='state_wy'>";
statesregions['region_mw'] = "<font color='#003366'><strong>Mid-West</strong></font><br><hr align='left' size='1' noshade style='color:#990000'>Iowa<br>Minnesota<br>Montana<br>North Dakota<br>South Dakota<br>Wisconsin<br>";
inputStates['region_mw'] = "<input type='hidden' name='state_ia' value='state_ia'>"+"<input type='hidden' name='state_mn' value='state_mn'>"+"<input type='hidden' name='state_mt' value='state_mt'>"+"<input type='hidden' name='state_nd' value='state_nd'>"+"<input type='hidden' name='state_sd' value='state_sd'>"+"<input type='hidden' name='state_wi' value='state_wi'>";
statesregions['region_gl'] = "<font color='#003366'><strong>Great Lakes</strong></font><br><hr align='left' size='1' noshade style='color:#990000'>Indiana<br>Kentucky<br>Michigan<br>Ohio<br>";
inputStates['region_gl'] = "<input type='hidden' name='state_in' value='state_in'>"+"<input type='hidden' name='state_ky' value='state_ky'>"+"<input type='hidden' name='state_mi' value='state_mi'>"+"<input type='hidden' name='state_oh' value='state_oh'>";
statesregions['region_ce'] = "<font color='#003366'><strong>Central</strong></font><br><hr align='left' size='1' noshade style='color:#990000'>Illinois<br>Kansas<br>Nebraska<br>Missouri<br>";
inputStates['region_ce'] = "<input type='hidden' name='state_il' value='state_il'>"+"<input type='hidden' name='state_ks' value='state_ks'>"+"<input type='hidden' name='state_ne' value='state_ne'>"+"<input type='hidden' name='state_mo' value='state_mo'>";
statesregions['region_so'] = "<font color='#003366'><strong>South</strong></font><br><hr align='left' size='1' noshade style='color:#990000'>Arkansas<br>Lousiana<br>Oklahoma<br>Texas<br>";
inputStates['region_so'] = "<input type='hidden' name='state_ar' value='state_ar'>"+"<input type='hidden' name='state_la' value='state_la'>"+"<input type='hidden' name='state_ok' value='state_ok'>"+"<input type='hidden' name='state_tx' value='state_tx'>";
statesregions['region_se'] = "<font color='#003366'><strong>South East</strong></font><br><hr align='left' size='1' noshade style='color:#990000'>Alabama<br>Florida<br>Georgia<br>Mississippi<br>Tennessee<br>";
inputStates['region_se'] = "<input type='hidden' name='state_al' value='state_al'>"+"<input type='hidden' name='state_fl' value='state_fl'>"+"<input type='hidden' name='state_ga' value='state_ga'>"+"<input type='hidden' name='state_ms' value='state_ms'>"+"<input type='hidden' name='state_tn' value='state_tn'>";
statesregions['region_ma'] = "<font color='#003366'><strong>Mid-Atlantic</strong></font><br><hr align='left' size='1' noshade style='color:#990000'>Maryland<br>North Carolina<br>South Carolina<br>West Virginia<br>Virginia<br>";
inputStates['region_ma'] = "<input type='hidden' name='state_md' value='state_md'>"+"<input type='hidden' name='state_nc' value='state_nc'>"+"<input type='hidden' name='state_sc' value='state_sc'>"+"<input type='hidden' name='state_wv' value='state_wv'>"+"<input type='hidden' name='state_va' value='state_va'>";
statesregions['region_na'] = "<font color='#003366'><strong>North Atlantic</strong></font><br><hr align='left' size='1' noshade style='color:#990000'>Deleware<br>New York<br>Pennsylvania<br>";
inputStates['region_na'] = "<input type='hidden' name='state_de' value='state_de'>"+"<input type='hidden' name='state_ny' value='state_ny'>"+"<input type='hidden' name='state_pa' value='state_pa'>";
statesregions['region_ne'] = "<font color='#003366'><strong>North East</strong></font><br><hr align='left' size='1' noshade style='color:#990000'>Conneticutt<br>Maine<br>Massachusetts<br>New Hampshire<br>New Jersey<br>Rhode Island<br>Vermont<br>";
inputStates['region_ne'] = "<input type='hidden' name='state_ct' value='state_ct'>"+"<input type='hidden' name='state_me' value='state_me'>"+"<input type='hidden' name='state_ma' value='state_ma'>"+"<input type='hidden' name='state_nh' value='state_nh'>"+"<input type='hidden' name='state_nj' value='state_nj'>"+"<input type='hidden' name='state_ri' value='state_ri'>"+"<input type='hidden' name='state_vt' value='state_vt'>";

ta = document.getElementById('listingInfo');
el = document.getElementById('stateInfo');

var containsVar = "NO";

for( var i = 0; i < selectedStates.length; i++)
{
if(selectedStates[i]==selectionID)
{
containsVar = "YES";
}
}

if(containsVar == "NO")
{
selectedStates[selectedStates.length] = selectionID;
ta.value = selectionID+"\n\r"+ta.value;
// listingStates += "<input type='hidden' name='"+selectionID+"' value='"+selectionID+"'>";
if(selectionID.substr(0,5)=="state")
{
listingStates += "<input type='hidden' name='"+selectionID+"' value='"+selectionID+"'>";
}
else
{
listingStates += inputStates[selectionID];
}
}

listingCurrent = "You Have Choosen : <br><br>"+statesregions[selectionID];

el.innerHTML = listingStates+listingCurrent;
}
function resetInfo()
{
ta = document.getElementById('listingInfo');
el = document.getElementById('stateInfo');

ta.value = "";


el.innerHTML = "Please Choose A<br>State or Region";
while(selectedStates.pop()){}
}
</script>


Image can be found at :

http://www.valleyexplogistics.com/javascripthelp/map.jpg

ta corresponds to the textarea in that image and el corresponds to the <div>.

Any help would greatly be appreciated. Please don't suggest a different alternative of doing the whole thing, such as just using checkboxes. It's what my client wants. Thanks again.

Javabrew

I was going to suggest you remove the added fields from the innerHTML of the DIV but I see that you're doing that already. Apparently the newly created form fields are being added to your form and in the process aren't considered part of the contents of that DIV so they don't get removed when the DIV is cleared.

The next solution then would be to not add form fields when the states are selected, instead mark a table with the selected states and clear that table when you reset. Then add some code to the onsubmit for the form to run through that table and add the selected state fields to the form at that time. Essentially, you put off adding the fields until the form is submitted so they're never added if the user changes their mind before the submit.

That actually is a decent suggestion. I think I will go ahead and do it that way. Thanks Roy.

However, if anyone knows why this happens or how to fix it, I would still appreciate any light that could be shed on that situation.

Thanks again,

Javabrew

I just found my mistake...

I may have been clearing the <div.innerHTML> everytime, but the string actually holding those values was never cleared.

Well, at least I fixed the problem.

Thanks Again for the help though,

Javabrew