Question

Im a huge noob when it comes about to jQuery, Im in big need of help here.

Since its a simple prototype, each select will have 2 options. If the user select the second option from BOTH select, then trigget the submit, a hidden div will show up and scroll the screen to it.

If the user try to press the submit withouth selecting those 2 options, an error message will pop above the non selected option

Im thinking of something quiet like this on html

<style>
    .surprise {
        display: none;
    }
    .error {
        display: none;
    }
</style>

 <form>
     <select>
         <option>Please Select Your Value</option>
         <option>Pick this value 1</option>
     </select>
     <div class="error">Please select your value</div>

     <select>
         <option>Please Select Your Value</option>
         <option>Pick this value 2</option>
     </select>
     <div class="error">Please select your value</div>

     <input type="submit" value="Show Hidden Div" />         
 </form>

 <div class="suprise">
   Hidden Div
 </div>

Anyone could give me a hand? My main problem is to grab those 2 values then the input will work, or show the error message…

Answer 1

Have not tested:

 //add this id to submit or use your own

 $('#submit').click(function(){

   $('.error').hide();
   $('.surprise').hide();

   var correct = true;
   $('select').each(function(){
     // the option2value is presumed to always be the same as in <option value="option2value" >Text</option
     if($(this).val() != 'option2value'){
       //next is the error... it might be better to use an id there
       $(this).next().show();
       correct = false;
     }
   })
   if(correct){
     $('.surprise').show();
   }
 })