CODEWITHSUNDEEP
jqueryjquery-selectors
Someone
Someone

Reputation: 10575

If/else else if in Jquery for a condition

I am having a set of text fields where i am doing validation Say I am Having a field called "seats" this can accept value less than "99999".Meaning I should not able to enter the "99999" any thing less than that is ok. For that I wrote below if and else if . please tell me whether I am doing any thing wrong. I am confused a lot from morning whether it should be less than or greater than 

if ($("#seats").val() != '') {
    setflag = false;
    alert("Not a valid character")
}
else if($("#seats").val() < 99999) {
    alert("Not a valid Number");
} else {
    setflag = true;
}

Upvotes: 16

Views: 414174

Answers (8)

Alan
Alan

Reputation: 180

Note: if you wish to use "else if" with jQuery, make sure you write:

else if ( yourTestHere )

not

elseif ( yourTestHere )

That space matters.

Upvotes: 0

Rado Situmorang
Rado Situmorang

Reputation: 1

And if you wanna make some if else with css attribute you can do it like this this program used to make highlight button for some text with jquery

  HTML :


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
   .myclass {
    background-color: yellow;
    font-weight: bold;
}
  </style>
  <body>
      <h1>PTIK FKIP UNS</h1>

       The 
       <span class="warna">Faculty of Teacher Training and Education</span>,<span class="warna">Sebelas Maret University</span>, Surakarta is an 
       <span class="warna">Educational Personnel Education Institution (LPTK)</span> which has 24 study programs in 6 majors. Each study program has its own characteristics in producing 
        <span class="warna">superior, strong and intelligent educational staff.</span>
        <br> <br> 
        The <span class="warna">Informatics and Computer Technology Education (PTIK)</span> tudy program is planned to take shelter in the management of the  
        <span  class="warna">Engineering and Vocational Education (PTK)</span> department. This placement revises our previous statement, where the PTIK study program is under the P.MIPA department. PTIK is a study program that will produce graduates who are
        <span class="warna">prioritized to teach in vocational/vocational programs.</span> 
        So, it would be better if PTIK was under the PTK department which oversees vocational programs such as<span class="warna">Building Engineering Education,</span>and
        <span  class="warna">Mechanical Engineering Education </span>To meet the needs of lecturers in the field of information technology that cannot be met by the PTK department, PTIK will conduct
        <span class="warna">resource sharing with the mathematics study program</span>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        
        <script>
          $(document).ready(function(){
            $("#Highlight").click(function(){
            if($(".warna").hasClass('myclass')){
                $(".warna").removeClass('myclass');
                
            }
            else 
            { 
                $(".warna").addClass('myclass');
            }
            });
        });
        </script>
        <br><br>
        <button id="Highlight">Highlight Paragraf</button>
      </body>
  </body>
</html>

Upvotes: 0

Mohammad Ali Abdullah
Mohammad Ali Abdullah

Reputation: 331

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <form name="myform">
    Enter your name
    <input type="text" name="inputbox" id='textBox' value="" />
    <input type="button" name="button" class="member" value="Click1" />
    <input type="button" name="button" value="Click2" onClick="testResults()" />
  </form>
  <script>
    function testResults(n) {
      var answer = $("#textBox").val();
      if (answer == 2) {
        alert("Good !");
      } else if (answer == 3) {
        alert("very Good !");
      } else if (answer == 4) {
        alert("better !");
      } else if (answer == 5) {
        alert("best !");
      } else {
        alert('wrong');
      }
    }
    $(document).on('click', '.member', function () {
      var answer = $("#textBox").val();
      if (answer == 2) {
        alert("Good !");
      } else if (answer == 3) {
        alert("very Good !");
      } else if (answer == 4) {
        alert("better !");
      } else if (answer == 5) {
        alert("best !");
      } else {
        alert('wrong');
      }
    });
  </script>

Upvotes: 1

Detroit Charan
Detroit Charan

Reputation: 209

If statement for images in jquery:
#html

<button id="chain">Chain</button>
<img src="bulb_on.jpg" alt="img" id="img"/>

#script
    <script>
        $(document).ready(function(){
            $("#chain").click(function(){
            if($("#img").attr('src')!='bulb_on.jpg'){
                $("#img").attr('src', 'bulb_on.jpg');
            }
            else
            {
                $("#img").attr('src', 'bulb_onn.jpg');
            }
            });
        });
    </script>

Upvotes: 0

Nelson Rothermel
Nelson Rothermel

Reputation: 9776

Iam confused a lot from morning whether it should be less than or greater than`

this can accept value less than "99999"

I think you answered it yourself... But it's valid when it's less than. Thus the following is incorrect:

}elseif($("#seats").val() < 99999){
  alert("Not a valid Number");
}else{

You are saying if it's less than 99999, then it's not valid. You want to do the opposite:

}elseif($("#seats").val() >= 99999){
  alert("Not a valid Number");
}else{

Also, since you have $("#seats") twice, jQuery has to search the DOM twice. You should really be storing the value, or at least the DOM element in a variable. And some more of your code doesn't make much sense, so I'm going to make some assumptions and put it all together:

var seats = $("#seats").val();

var error = null;

if (seats == "") {
    error = "Number is required";
} else {
    var seatsNum = parseInt(seats);
    
    if (isNaN(seatsNum)) {
        error = "Not a valid number";
    } else if (seatsNum >= 99999) {
        error = "Number must be less than 99999";
    }
}

if (error != null) {
    alert(error);
} else {
    alert("Valid number");
}

// If you really need setflag:
var setflag = error != null;

Here's a working sample: http://jsfiddle.net/LUY8q/

Upvotes: 20

Zevan
Zevan

Reputation: 10235

A few more things in addition to the existing answers. Have a look at this:

var seatsValid = true;
// cache the selector
var seatsVal = $("#seats").val();
if(seatsVal!=''){
    seatsValid = false;
    alert("Not a valid character")
    // convert seatsVal to an integer for comparison
}else if(parseInt(seatsVal) < 99999){
    seatsValid = false;
    alert("Not a valid Number");
}

The variable name setFlag is very generic, if your only using it in conjunction with the number of seats you should rename it (I called it seatsValid). I also initialized it to true which gets rid of the need for the final else in your original code. Next, I put the selector and call to .val() in a variable. It's good practice to cache your selectors so jquery doesn't need to traverse the DOM more than it needs to. Lastly when comparing two values you should try to make sure they are the same type, in this case seatsVal is a string so in order to properly compare it to 99999 you should use parseInt() on it.

Upvotes: 2

bdl
bdl

Reputation: 1502

See this answer. val() is comparing a string, not a numeric value.

Upvotes: 0

Corey
Corey

Reputation: 6842

Change the less-than operator to a greater-than-or-equal-to operator:

}elseif($("#seats").val() >= 99999){

Upvotes: 0

Related Questions