check one of the select box is selected

Question

i have 4 selectbox ,first one is vehicle selectbox and other three are sub of that vehicle select box ,if i select vehicle select box and click button i want to show a error message ,because one of the sub select is also i want to selected .... any one help ..i am just beginner in jquery/javascript

in simplest words :p ..check one of the sub select box(cars , caravans,buses select box) is selected if i selected main vehicle selectbox...

my code :

 <div class="members-wrap-vehicle">
    <label>Vehicle</label>
    <select name="reservation[vehicle]">
        <option value="0">Select</option>
        <?php for($i=1;$i<11;$i++) { ?>
        <option <?php if($_POST['reservation']['vehicle'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?></option>
        <?php } ?>
   </select>
</div>

<div class="members-vehicle-list" <?php if($_POST['reservation']['vehicle'] == 0) { echo 'style="display: none;"'; } ?> >
    <div class="members-wrap-adult">
        <label>Cars</label>
        <select name="reservation[cars]">
            <option value="0">Select</option>
            <?php for($i=1;$i<11;$i++) { ?>
            <option <?php if($_POST['reservation']['cars'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?></option>
            <?php } ?>
        </select>
    </div>

   <div class="members-wrap-child">
        <label>Caravans</label>
        <select name="reservation[caravans]">
            <option value="0">Select</option>
            <?php for($i=1;$i<11;$i++) { ?>
            <option <?php if($_POST['reservation']['caravans'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?></option>
            <?php } ?>
        </select>
    </div>

    <div class="members-wrap-infant">
        <label>Buses</label>
        <select name="reservation[buses]">
            <option value="0">Select</option>
                <?php for($i=1;$i<5;$i++) { ?>
                <option <?php if($_POST['reservation']['buses'] == $i) { echo 'selected="selected"'; }?> value="<?php echo $i;?>"><?php echo $i;?>                                     </option>
            <?php } ?>
        </select>
      </div>

Do you want immediate check when the vehicle is selected or after the search button is clicked ? — Mohammad Ashique Ali, Feb 23 '17 at 17:21
yes ,just need error alert or something like that suddenly.... — , Feb 23 '17 at 17:29
When you say click the button, is this in regards to the search button? Basically you want validation on your form to ensure all sub-boxes are filled before submitting? — Chris Cruz, Feb 23 '17 at 17:36

score 0 · Answer 1 · edited May 23 '17 at 11:46

0

Take a look at this SO question: How to check if an option is selected?

Using what is suggested in that link, add an alert with whatever message you want if no option has been selected.

edited May 23 '17 at 11:46

Community

1
1

answered Feb 23 '17 at 17:32

jobenscott

17
5

score 0 · Answer 2 · edited Mar 01 '17 at 11:24

This should work but there are some caveats. You have to change your <select> element names to ids (id = 'xxx'). Also, this function assumes that the number of vehicles in the sub menus totals the number in the vehicles menu. Please let me know if you need anything further! Cheers

$('#BUTTON_ID').on('click', function() {                 
    var vehicle = $('#reservation[vehicle]').val();
    var cars = $('#reservation[cars]').val();
    var caravans = $('#reservation[caravans]').val();
    var buses = $('#reservation[buses]').val();

    if (vehicle == (cars + caravans + buses)) {
       //do something
    } else {
       //error message
       alert('Error has occurred.');
    };
});

score 0 · Answer 3 · answered Feb 23 '17 at 17:51

There are new lines of code but have certain changes for better understanding for you and test.

HTML code

<div class="members-wrap-vehicle">
     <label>Vehicle</label>
     <select name="reservation[vehicle]">
         <option value="0">Select</option>
         <option value="1">1</option>
         <option value="2">2</option>
     </select>
   </div>

   <div class="members-vehicle-list">
      <div class="members-wrap-adult">
         <label>Cars</label>
            <select name="reservation[cars]">
               <option value="0">Select</option>
               <option value="1">1</option>
               <option value="2">2</option>
            </select>
         </div>

         <div class="members-wrap-child">
             <label>Caravans</label>
             <select name="reservation[caravans]">
                <option value="0">Select</option>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </div>

        <div class="members-wrap-infant">
           <label>Buses</label>
           <select name="reservation[buses]">
               <option value="0">Select</option>
               <option value="1">1</option>
               <option value="2">2</option>
          </select>
        </div>
   </div>

jQuery Code

$(function(){

     $('.members-wrap-vehicle select').change(function(){
         var cars = $('.members-wrap-adult select option:selected').val();
         var caravans = $('.members-wrap-child select option:selected').val();
         var buses = $('.members-wrap-infant select option:selected').val();

         if ( cars == 0 || caravans == 0 || buses == 0 ){
             alert('please select any of cars or caravans or buses');
      }

   });
});

Hope this works for you. THank YOu

check one of the select box is selected

3 Answers3