0

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.

0

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);
  • Hello, I tried your code but the condition did not work at all. Kindly review it. Thanks – Sadiq11111 May 21 at 17:07
  • Please provide the snapshot or code changes you did. – Bhupen May 22 at 6:09
  • I only changed this text "I need more info to give a price" to "I need more information". I did not change anything in the code. – Sadiq11111 May 22 at 7:09
  • Please share the form HTML and js changes you did so that I can check from my side. And after the selection when you reload the page it is not hiding the field? – Bhupen May 22 at 7:18
  • I'm not sure I understand you. Do you mean the changes I made to your code? I did not make any changes to your code. I simply copied it and replaced it with my code posted above. – Sadiq11111 May 22 at 7:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.