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
– mplungjan, Commented Aug 28, 2014 at 6:33

Community · Accepted Answer · 2017-05-23 12:16:03Z

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, 2017 at 12:16

CommunityBot

11 silver badge

answered Aug 28, 2014 at 6:36

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dashtinejad · Accepted Answer · 2014-08-28 06:35:32Z

1

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.

answered Aug 28, 2014 at 6:35

dashtinejad

6,2734 gold badges32 silver badges46 bronze badges

Comments

Ramesh Boddepalli · Accepted Answer · 2014-08-28 07:03:37Z

1

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

edited Aug 28, 2014 at 7:03

answered Aug 28, 2014 at 6:58

Ramesh Boddepalli

3012 silver badges7 bronze badges

Comments

Oleksandr T. · Accepted Answer · 2016-05-19 19:09:37Z

1

You can use

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

edited May 19, 2016 at 19:09

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

answered Aug 28, 2014 at 7:58

Leonid Ziskel

111 bronze badge

Comments

mplungjan · Accepted Answer · 2014-08-28 07:48:56Z

0

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
}

edited Aug 28, 2014 at 7:48

answered Aug 28, 2014 at 7:03

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Collectives™ on Stack Overflow

Reset Value of hidden field when dropdown selected (Javascript)

5 Answers 5

DEMO

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related