CODEWITHSUNDEEP
javascriptjquery
JCD
JCD

Reputation: 297

Jquery Select Menu Option Fails if page is refreshed?

I have a select menu with two options, yes or no. If the user selects yes, the class 'hidden' is remove from the table which then shows the table. If no, the table is hidden.

If i refresh the webpage, the select menu stays on the previous selection and the code doesnt fire until i select the option again.

How can i fix this?

$(document).ready(function(){
    $('#checkrequestyesorno').click(function () {
        if( $('#checkrequestyesorno').val() == "Yes") {
            $("#checkrequesttable").removeClass('hidden');
        }else{
            $("#checkrequesttable").addClass('hidden');
        }

    });
});

Upvotes: 1

Views: 60

Answers (2)

ryanpcmcquen
ryanpcmcquen

Reputation: 6445

Without any markup supplied, I believe you are trying to accomplish this:

$(document).ready(function() {
  var checkYesOrNo = $('#checkrequestyesorno');
  var checkTable = $('#checkrequesttable');
  checkYesOrNo.change(function() {
    if (checkYesOrNo.val() === "Yes") {
      checkTable.removeClass('hidden');
    } else {
      checkTable.addClass('hidden');
    }
  });
});
.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Show table:</h3>
<select id="checkrequestyesorno">
  <option value="No" selected>No</option>
  <option value="Yes">Yes</option>
</select>

<table class="hidden" id="checkrequesttable">
  <tr>
    <thead>
      <tr>
        <th>fooTable</th>
      </tr>
    </thead>
    <td>bar</td>
    <td>baz</td>
  </tr>

</table>

I took the liberty of storing your queries as variables. Remember that the DOM is slow, and you should avoid multiple DOM queries whenever possible. Also, listening for the change event will work better than click in this example, because the value of the select element does not change on click, but rather on change.

Upvotes: 2

hmd
hmd

Reputation: 970

You you can fix this issue by using two scenarios.

Scenario 1, by adding class by default to your HTML element and selecting your required option by default:

HTML:

<div id="checkrequesttable" class="hidden">...</div>
<select id="checkrequestyesorno">
    <option value="no" selected>No</option>
    <option value="yes">Yes</option>
</select>

Scenario 2, by selecting your required option by default and writing your JQuery Functionality in some custom function. Then you will need to call your custom function in both situaitons e.i. Document On ready and Select box click:

HTML: 

<select id="checkrequestyesorno">
    <option value="no" selected>No</option>
    <option value="yes">Yes</option>
</select>

Javascript/JQuery:

$( document ).ready(function() {
    checkRequestFunc();
    $('#checkrequestyesorno').click(function () {
        checkRequestFunc();
    });
});

function checkRequestFunc(){

   if( $('#checkrequestyesorno').val() == "Yes") {
      $("#checkrequesttable").removeClass('hidden');
   }else{
      $("#checkrequesttable").addClass('hidden');
   }

}

By the way, when you are dealing with a HTML Element Select using JQuery Method .change() is a good approach, so if you are willing to use this you can write your code like below:

HTML: 

<select id="checkrequestyesorno">
    <option value="no" selected>No</option>
    <option value="yes">Yes</option>
</select>

Javascript/JQuery:

$( document ).ready(function() {
    checkRequestFunc();
    $('#checkrequestyesorno').change(function() {
        checkRequestFunc();
    });
});

function checkRequestFunc(){

   if( $('#checkrequestyesorno').val() == "Yes") {
      $("#checkrequesttable").removeClass('hidden');
   }else{
      $("#checkrequesttable").addClass('hidden');
   }

}

Upvotes: 0

Related Questions