Reset Value of hidden field when dropdown selected (Javascript)

Question

Got a form with a div dropdown which when select will display/hide another div.

<div>
    <select id="currency" name="currency" onChange="display_payroll_div(this.selectedIndex);">
        <option value="0">Currency for your quote*</option>
        <option value="AUD">AUD</option>
        <option value="USD">USD</option>
        <option value="Pounds">GBP</option>
    </select>
</div>
<div id="payroll-div">
    <select id="report-payroll" name="report-payroll">
        <option value="0">Would you like us to do payroll?*</option>
        <option value="1">Yes, I would like payroll</option>
        <option value="2">No, I don't need payroll</option>
    </select>
</div>

Javascript:

function display_payroll_div(e){
    currency_value=document.getElementById('currency').value;
    document.getElementById('payroll-div').style.display = "none";
    if (currency_value == 'AUD') {
        document.getElementById('payroll-div').style.display = "block";
    }
}

The display/hide is fine but the issue I have is when I select 'AUD' and 'Yes, I would like payroll' and then change my mind and change to 'USD' the hidden field payroll will still keep the value of 'Yes,...'. Is there anyway to reset 'payroll-div' to default value?

All suggestions I've seen uses 'onClick' which I'm trying to avoid as it does not work in FF. Any help would be appreciated :)

You should use onchange anyway. But create a jsfiddle.net so we do not have to. Do you mean `document.getElementById("report-payroll").selectedIndex=0` when hiding? — mplungjan, Aug 28 '14 at 06:33

score 1 · Answer 1 · answered Aug 28 '14 at 06:35

Try this:

function display_payroll_div(e){
    currency_value=document.getElementById('currency').value;
    document.getElementById('payroll-div').style.display = "none";
    if (currency_value == 'AUD') {
        document.getElementById('payroll-div').style.display = "block";
    }
    else {
        document.getElementById('report-payroll').selectedIndex = 0;
    }
}

Working jsFiddle Demo.

score 1 · Accepted Answer · edited May 23 '17 at 12:16

1

Reference: Reset the Value of a Select Box

add this in your code:

else
{
 document.getElementById('report-payroll').selectedIndex = 0;
 //reseting value when currency_value != 'AUD'
}

DEMO

edited May 23 '17 at 12:16

Community

1
1

answered Aug 28 '14 at 06:36

Manwal

22,994
11
59
91

Ramesh Boddepalli · Answer 3 · 2014-08-28T07:03:37.207

Change the function like below

  function display_payroll_div(e){
      currency_value=document.getElementById('currency').value;
      document.getElementById('payroll-div').style.display = "none";
       if (currency_value == 'AUD') {
              document.getElementById('payroll-div').style.display = "block";
        } else {
        document.getElementById('report-payroll').value ='0';
      }
   }

JSFiddle Demo

score 1 · Answer 4 · edited May 19 '16 at 19:09

1

You can use

document.getElementById('report-payroll').options[0].selected = true;

edited May 19 '16 at 19:09

Oleksandr T.

73,526
17
164
143

answered Aug 28 '14 at 07:58

Leonid Ziskel

11
1

mplungjan · Answer 5 · 2014-08-28T07:48:56.267

I suggest this:

JSFIDDLE

1) unobtrusive
2) can handle a reload

<select id="currency" name="currency">

using

window.onload=function() {
  document.getElementById("currency").onchange=function(){
    var currency_value = this.value, 
        payrollDiv     = document.getElementById('payroll-div');
    payrollDiv.style.display = currency_value=="AUD"?"block":"none";
    if (currency_value!="AUD") document.getElementById("report-payroll").selectedIndex=0;
  }
  document.getElementById("currency").onchange(); // hide or show when loading
}

Reset Value of hidden field when dropdown selected (Javascript)

5 Answers5

DEMO