I have an html form in which I conditionally hide a field with javascript if an option is selected in the dropdown. The javascript condition works fine but when the page is reloaded the condition is lost even though the right option is still selected.

Steps to recreate:

1. I have a js code to store user input in session storage because my users might sometimes have to go to another page and come back to the form later.

2. I have a js code to conditionally hide a field named price_input_div when the third option is selected in select field.

The problem:

When I click on the third option, the price_input_div field is hidden but when the page is reloaded, the field appears again even though the third option is still selected (the third option is still selected because I am saving the value in session storage).

After the page is reloaded, when I select another option then select the third option again, the price_input_div field becomes hidden once again.

The HTML form:

<p class="form-row form-row-wide">
<label for="select_price_option">Price option<span class="required"> *</span></label>
<select name="select_price_option" id="select_price_option" />
<option disabled selected value> Please select one</option>
<option>Total fee</option>
<option>Starting fee</option>
<option>I need more information</option>
</select>
</p>

<p class="form-row form-row-wide" id="price_input_div">
<label for="quote_price_input">Enter your price</label>
<input type="text" name="quote_price_input" id="quote_price_input" class="input-text"/>
</p>

<p class="form-row form-row-wide">
<label for="message_to_customer">Enter your message<span class="required"> *</span></label>
<textarea name="message_to_customer" id="message_to_customer" minlength="30" class="input-text"></textarea>
</p>

The Js code to save and get field value in session storage:

// Save custom checkout fields to session storage
(function ($) {
    // Run on page load
window.onload = function() {
    var quote_price_input = sessionStorage.getItem("quote_price_input");
    var message_to_customer = sessionStorage.getItem("message_to_customer");
    var select_price_option = sessionStorage.getItem("select_price_option");

    if(quote_price_input !== null) {
    document.getElementById('quote_price_input').value = quote_price_input;
      } else
    document.getElementById('quote_price_input').value = "";

    if(select_price_option !== null) {
        var sel = document.getElementById('select_price_option');
        var opts = sel.options;
        for (var opt, j = 0; opt = opts[j]; j++) {
            console.log(opt.innerHTML);
            if (opt.innerHTML == select_price_option) {
              sel.selectedIndex = j;
              break;
            }
        }
      }

    if(message_to_customer !== null) {
    document.getElementById('message_to_customer').innerHTML = message_to_customer;
      } else
    document.getElementById('message_to_customer').innerHTML = "";
};

// Before refreshing the page, save the form data to sessionStorage
window.onbeforeunload = function() {
    var quote_price_input = document.getElementById('quote_price_input');
    var message_to_customer = document.getElementById('message_to_customer');
    var select_price_option = document.getElementById('select_price_option');

    if(quote_price_input !== null) {
        sessionStorage.setItem('quote_price_input', $('#quote_price_input').val());
    }

    if(select_price_option !== null) {
        sessionStorage.setItem('select_price_option', $('#select_price_option').val());
    }

    if(message_to_customer !== null) {
        sessionStorage.setItem('message_to_customer', $('#message_to_customer').val());
    }
};
})(jQuery);

The js code to conditionally hide price_input_div field:

(function ($) {
$("#select_price_option").change(function() {
  if ($(this).val() == "I need more information") {
    $('#price_input_div').hide();
  } else {
    $('#price_input_div').show();
  }
});
$("#select_price_option").trigger("change");
})(jQuery);

I want the price_input_div field to remain hidden even after page reload since I need more information is still selected.

I tried the below code as well but no luck:

// Conditionally show price
(function ($) {
window.onload = function() {
$("#select_price_option").change(function() {
  if ($(this).val() == "I need more information") {
    $('#price_input_div').hide();
  } else {
    $('#price_input_div').show();
  }
});
$("#select_price_option").trigger("change");
}})(jQuery);

Any help will be greatly appreciated.

I have an html form in which I conditionally hide a field with javascript if an option is selected in the dropdown. The javascript condition works fine but when the page is reloaded the condition is lost even though the right option is still selected.

Steps to recreate:

1. I have a js code to store user input in session storage because my users might sometimes have to go to another page and come back to the form later.

2. I have a js code to conditionally hide a field named price_input_div when the third option is selected in select field.

The problem:

When I click on the third option, the price_input_div field is hidden but when the page is reloaded, the field appears again even though the third option is still selected (the third option is still selected because I am saving the value in session storage).

After the page is reloaded, when I select another option then select the third option again, the price_input_div field becomes hidden once again.

The HTML form:

<p class="form-row form-row-wide">
<label for="select_price_option">Price option<span class="required"> *</span></label>
<select name="select_price_option" id="select_price_option" />
<option disabled selected value> Please select one</option>
<option>Total fee</option>
<option>Starting fee</option>
<option>I need more information</option>
</select>
</p>

<p class="form-row form-row-wide" id="price_input_div">
<label for="quote_price_input">Enter your price</label>
<input type="text" name="quote_price_input" id="quote_price_input" class="input-text"/>
</p>

<p class="form-row form-row-wide">
<label for="message_to_customer">Enter your message<span class="required"> *</span></label>
<textarea name="message_to_customer" id="message_to_customer" minlength="30" class="input-text"></textarea>
</p>

The Js code to save and get field value in session storage:

// Save custom checkout fields to session storage
(function ($) {
    // Run on page load
window.onload = function() {
    var quote_price_input = sessionStorage.getItem("quote_price_input");
    var message_to_customer = sessionStorage.getItem("message_to_customer");
    var select_price_option = sessionStorage.getItem("select_price_option");

    if(quote_price_input !== null) {
    document.getElementById('quote_price_input').value = quote_price_input;
      } else
    document.getElementById('quote_price_input').value = "";

    if(select_price_option !== null) {
        var sel = document.getElementById('select_price_option');
        var opts = sel.options;
        for (var opt, j = 0; opt = opts[j]; j++) {
            console.log(opt.innerHTML);
            if (opt.innerHTML == select_price_option) {
              sel.selectedIndex = j;
              break;
            }
        }
      }

    if(message_to_customer !== null) {
    document.getElementById('message_to_customer').innerHTML = message_to_customer;
      } else
    document.getElementById('message_to_customer').innerHTML = "";
};

// Before refreshing the page, save the form data to sessionStorage
window.onbeforeunload = function() {
    var quote_price_input = document.getElementById('quote_price_input');
    var message_to_customer = document.getElementById('message_to_customer');
    var select_price_option = document.getElementById('select_price_option');

    if(quote_price_input !== null) {
        sessionStorage.setItem('quote_price_input', $('#quote_price_input').val());
    }

    if(select_price_option !== null) {
        sessionStorage.setItem('select_price_option', $('#select_price_option').val());
    }

    if(message_to_customer !== null) {
        sessionStorage.setItem('message_to_customer', $('#message_to_customer').val());
    }
};
})(jQuery);

The js code to conditionally hide price_input_div field:

(function ($) {
$("#select_price_option").change(function() {
  if ($(this).val() == "I need more information") {
    $('#price_input_div').hide();
  } else {
    $('#price_input_div').show();
  }
});
$("#select_price_option").trigger("change");
})(jQuery);

I want the price_input_div field to remain hidden even after page reload since I need more information is still selected.

I tried the below code as well but no luck:

// Conditionally show price
(function ($) {
window.onload = function() {
$("#select_price_option").change(function() {
  if ($(this).val() == "I need more information") {
    $('#price_input_div').hide();
  } else {
    $('#price_input_div').show();
  }
});
$("#select_price_option").trigger("change");
}})(jQuery);

Any help will be greatly appreciated.

• jquery
• javascript
• html

2 Answers 2

Try this code:

// Conditionally show price
(function ($) {
  window.onload = function() {

  if ($("#select_price_option").val() == "I need more information") {
   $('#price_input_div').hide();
  }

$("#select_price_option").change(function() {
  if ($(this).val() == "I need more information") {
    $('#price_input_div').hide();
  } else {
    $('#price_input_div').show();
  }
 });
 }})(jQuery);

To expand on my comment, your select options don't have any values, but your condition in jQuery checks their value...

<select name="select_price_option" id="select_price_option" />
<option disabled selected> Please select one</option>
<option value="Total fee">Total fee</option>
<option value="Starting fee">Starting fee</option>
<option value="I need more information">I need more information</option>
</select>

Then, when your jQuery runs the conditional check, like @Bhupen recommended, this condition will work:

if ($("#select_price_option").val() == "I need more information") {

As will the one lower down:

if ($(this).val() == "I need more information") {