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>