Michael Michael - 6 months ago 20
jQuery Question

$('#id_gender') vs var gender = $('#id_gender')

The user is to select gender.

HTML

<form ...>
<select id="id_gender" name="gender" onchange="hideMaidenName(this.value)">
<option value="M">Male</option>
<option value="F">Female</option>
<option value="U" selected="selected">To be defined</option>
</select>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">


If gender is male, we warn the user that they must clear maiden name by hand. Then they may continue. But in this case we automatically change gender to 'U'.

Could you help me understand the situation.
In the console I have checked what I'd like to transmit into the production code.

In the console:

var gender = $('#id_gender')

gender
[<select id=​"id_gender" name=​"gender" onchange=​"hideMaidenName(this.value)​">​…​</select>​]

gender.val()
"U"


But when I use this code in production, I get exception that gender is not a function. I can make the code execute like this:

Working code:

var maiden_name = $('#id_maiden_name');

function hideMaidenName(gender) {
if ($('#id_gender').val() == 'M') {
if (maiden_name.val() != "") {
$('#id_gender').val('U')
alert("Clear maiden name!");
return;
}
}

}

</script>


And further goes my failure.

Not working code:

var gender = $('#id_gender');
var maiden_name = $('#id_maiden_name');
var maiden_name_row = $('#id_maiden_name_row')
function hideMaidenName(gender) {
if (gender.val() == 'M') {
if (maiden_name.val() != "") {
gender.val('U')
alert("Claear maiden name!");
return;
}

maiden_name_row.hide()
}
else {
maiden_name_row.show()
}
}


Half working code (reduced functionality as I failed to change the value of gender back to 'U':

var gender = $('#id_gender');
var maiden_name = $('#id_maiden_name');

function hideMaidenName(gender) {
if (gender == 'M') {
if (maiden_name.val() != "") {
alert("Claear maiden name!");
return;
}
}
}


The questions are:


  1. What is the difference between $('#id_gender') and var gender = $('#id_gender'). I mean why the former is working perfectly whereas the latter throws an exception.

  2. Why in the half working code gender == 'M' works perfectly? Gender seems to be an element whose value I'm going to check. But here we have value itself stored in gender.

  3. I have the working code, but I look for the gender element twice.
    How should I prevent double finding if possible?


Answer

You pass as argument to the function hideMaidenName the value of the selected option on change(this is the string for example 'M'). I changed it to pass the DOM element(select), by passing this as argument. You also have to wrap the gender and use it as jquery object for example $(gender) otherwise you get the error .val() is not a function:

var gender = $('#id_gender');
var maiden_name = $('#id_maiden_name');
var maiden_name_row = $('#id_maiden_name_row')

function hideMaidenName(gender) {
  //here you have to use gender as jquery object
  if ($(gender).val() == 'M') {
    if (maiden_name.val() != "") {
      gender.val('U')
      alert("Claear maiden name!");
      return;
    }

    maiden_name_row.hide()
  } else {
    maiden_name_row.show()
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="id_gender" name="gender" onchange="hideMaidenName(this)">
  <option value="M">Male</option>
  <option value="F">Female</option>
  <option value="U" selected="selected">To be defined</option>
</select>