Select Box option keep changing

Question

<Select id="amount" onchange="document.formName.submit(); updateCost();">
   <option id="0" value = "0"> Select amount ... </option>
   <option id="1" value = "2000"> $2000 </option>
   <option id="2" value = "3000"> $3000 </option>
   <option id="3" value = "4000"> $4000 </option>
   <option id="4" value = "5000"> $5000 </option>
</Select>

<Select id="duration" onchange="document.formName.submit(); updateCost();">
   <option id="1" value="2 years"> 2 years </option>
   <option id="2" value="6 years"> 6 years </option>
   <option id="3" value="Lifetime"> Lifetime </option>
</Select>

function updateCost() {      
  var rate = 0;
  if(document.formName.plan[p].checked) {
    if(value('coverageUser').indexOf('Enrolled') > -1){
       rate = getRate();    
    }
    payCycle = 1;
    document.formName.cost.value = formatCurr((rate) * payCycle);
  }    
}

I have these two select boxes and when I choose an option from first, cost is getting updated correctly. But after selecting amount, I am supposed to select duration from second selectbox where default value is 2 years . But when I change the value to 6 years , cost is updated , but the select box option does not remain to 6 years , but changes back to 2 years . How do I keep the option I selected in second select box and also update the cost correctly?

Answer 1

The select boxes don't keep their state because of the submit you're doing at onchange() . It will cause page reload on every change. Try remove it from both select 's.

Besides that, you're using id in a wrong way: you can't have the same id twice in a same page. Try something like this:

    <option value="1"> 2 years </option>
    <option value="2"> 6 years </option>
    <option value="3"> Lifetime </option>

Answer 2

When you return the page after a form submit:

• Mark the user's selected options with the selected attribute:

   <select id="duration"> <option value="2 years"> 2 years </option> <option value="6 years" selected> 6 years </option> <option value="Lifetime"> Lifetime </option> </select> 

• Call updateCost() on page load:

   window.onload = updateCost; 

  Or add it to your window.onload function if you already have one:

   window.onload = function() { ... updateCost(); };