javascript dropdown condition

Question

I have the following dropdown. Client wants to form throw an error if the value fail is selected. I told him easy solution is to remove the fail from the menu :) That way only option is Pass and the problem is solved:) Not really. He still wants both options and if Fail selected he wants to see the required error may be a text saying you need to select Pass.

               <div class="section colm colm6">
                  <label class="field select">
                      <select id="cond" name="Cond" required>
                           <option value=''>Condition</option>
                           <option value='Pass' >Pass</option>
                           <option value='Fail' >Fail</option>
                        </select>
                          <i class="arrow double"></i>                             
                  </label>
               </div>

I need to do the error check as soon as the file is selected rather than until the whole form is submitted. I have another 2 fail and pass dropdowns and 2 yes and no dropdowns that I need to do the same thing. If I get one working I should be able to the others (I hope)

I am guessing that I need to create a some sort of function similar to

  function checkCategory(){
        if(document.getElementById('cond').value === 'Fail') {
           alert("Client says you need to enter Pass");
   return false;
   }
  }

and may be use an onselect ( I am not sure how to call it ) use onselect="javascript:checkCategory();"

I am pretty much stuck at this point. Your help is much appreciated. Thank you for your time.

now by "Throw an error" do you mean alert the client that they've selected an invalid value; or do you mean throw an actual error in javascript. Because those are two different things. — Jhecht
– Jhecht, Commented Apr 12, 2016 at 4:50
Thanks itzmukeshy7 that is oncahnge is the function I needed. Uzaif fancy JS works too :) — CyberFla
– CyberFla, Commented Apr 12, 2016 at 16:53

Shubham Khatri · Accepted Answer · 2016-04-12 05:10:12Z

Its easy to do this using jquery, just use its .change() event handler as follows:

$(function() {
    $('#cond').change(function() {
    if(this.value === 'Fail') {
        alert('Please Select Pass');
    }
  })
})

This will solve your problem. Check this jsFiddle: https://jsfiddle.net/mayank_shubham/9d3dcd07/

You can also do this in javascript by using an onchange event handler in your select menu as:

<script>

function checkCategory() {
    if(document.getElementById('cond').value === 'Fail') {
    alert('Please Select Pass');
  }
  return false;
}

</script>
<div class="section colm colm6">
    <label class="field select">
        <select id="cond" name="Cond" onchange = "checkCategory()"required>
             <option value=''>Condition</option>
             <option value='Pass' >Pass</option>
             <option value='Fail' >Fail</option>
          </select>
            <i class="arrow double"></i>                             
    </label>
 </div>

See a working demo

itzmukeshy7 · Accepted Answer · 2016-04-12 04:49:11Z

1

Is this what you want?

$(function(){
  $("select#cond").on("change", function(){
    if(this.value == "Fail"){
      alert("Client says you need to enter Pass.")
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="section colm colm6">
  <label class="field select">
    <select id="cond" name="Cond" required>
      <option value=''>Condition</option>
      <option value='Pass' >Pass</option>
      <option value='Fail' >Fail</option>
    </select>
    <i class="arrow double"></i>                             
  </label>
</div>

edited Apr 12, 2016 at 4:49

itzmukeshy7

2,6781 gold badge24 silver badges30 bronze badges

answered Apr 12, 2016 at 4:34

jack blank

5,2598 gold badges46 silver badges76 bronze badges

Comments

LazyDeveloper · Accepted Answer · 2016-04-12 05:01:28Z

1

Your are almost there in the code ,

You need to add onChange Event to the select element

  <div class="section colm colm6">
              <label class="field select">
                  <select id="cond" name="Cond" required onChange="checkCategory()">
                       <option value=''>Condition</option>
                       <option value='Pass' >Pass</option>
                       <option value='Fail' >Fail</option>
                    </select>
                      <i class="arrow double"></i>                             
              </label>
           </div>

answered Apr 12, 2016 at 5:01

LazyDeveloper

6094 silver badges8 bronze badges

Collectives™ on Stack Overflow

javascript dropdown condition

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related