CODEWITHSUNDEEP
javascripthtml
Bright Splasher
Bright Splasher

Reputation: 1

How do I add another condition to this javascript?

I have a form where people choose a day of the week from a select box. And then another text field must only show if Monday or Wednesday are selected. The following code works perfectly, only problem is that I don't know how to add another option to the below code. Right now the text box only pops up if 'monday' are selected. And I want to modify the code so that the text box pops up when 'monday' OR 'wednesday' is selected. Can anyone help?

My javascript:

$(document).ready(function() {

//Hide the field
$("#hide1").hide();

//Show the field
$('#option').change(function() {
    if ($("#option").val() == "Monday") {
        $("#hide1").show();
    }
    else {
        $("#hide1").hide();
    }
});
});

My html:

<select name="option" id="option">
<option value="Monday" selected="selected">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
</select>

Upvotes: 0

Views: 57

Answers (4)

Kunal Patel
Kunal Patel

Reputation: 119

Click on this link 
i have update your code on jsfiddle.

Visit

http://jsfiddle.net/erkunalpatel/2wtkod18/4/

Upvotes: 0

Leo
Leo

Reputation: 13838

You'd better go with switch/case for future maintainability:

switch($("#option").val()) {
    case "Monday":
        // do something on Monday
        break;
    case "Tuesday":
        // do other things on Tuesday
        break;
    case "Wednesday":
    case "Thursday":
        // you can also combine two cases together
        // in this particular case it equals the following if statement
        // if(val === "Wednesday" || val === "Thursday") {...}
        // do things on Wednesday and Thursday
        break;
}

See how maintainable it could be? It helps you get rid of a bunch of else if, unless you still love this style:

if(val === "Monday") {
    // something
} else if(val === "Tuesday") {
    // other things
} else if(val === "Wednesday" || val === "Thursday") {
    // oh my god it's boring
} else if(val === "Friday") {
    // who knows...
}

Think about it, if you are making a calendar, you got 30 else if or so, how's that?

Upvotes: 0

James Hibbard
James Hibbard

Reputation: 17735

You can do it like this:

$('#option').change(function() {
    if ($("#option").val() === "Monday" || $("#option").val() === "Wednesday") {
        $("#hide1").show();
    }
    else {
        $("#hide1").hide();
    }
});

However, at some point, your condition might become a bit long (i.e. Monday, or Wednesday, or Saturday, or Sunday ...)

if ($("#option").val() === "Monday" || $("#option").val() === "Wednesday" || $("#option").val() === "Saturday" || $("#option").val() === "Sunday" ) {

This is very verbose. You're also querying the DOM too many times.

Instead think about doing it like so:

var acceptedDays = [
  "Monday",
  "Wednesday",
  "Friday"
]

$('#option').change(function() {
  var day = $("#option").val(); // query the DOM once
  if (acceptedDays.indexOf(day) !== -1){
    $("#hide1").show();
  } else {
    $("#hide1").hide();
  }
});

Also, it is a good habit to get into using tripple equals when checking for equality.

Upvotes: 2

Alok Swain
Alok Swain

Reputation: 6519

Use this change event.

$('#option').change(function() {
    if ($("#option").val() == "Monday" || $("#option").val() == "Wednesday") {
        $("#hide1").show();
    }
    else {
        $("#hide1").hide();
    }
});

Upvotes: 1

Related Questions