How can I check if all required fields are selected before hiding a div?

Question

var cnt = 2;
$('.next').click(function() {
  var reqField = true;
  $(this).siblings('table').find('tbody tr:nth-child(' + cnt + ') td').each(function() {
    var ele = $(this).find('center').find('select');
    if ((!$(ele).attr('disabled')) && $(ele).val() === '') {
      reqField = false;
    }
  });

  if (reqField) {
    $(this).parent().hide().next().show();
    cnt = cnt + 2;
  }
});

$('select').change(function() {
  if ($(this).val() == 'MSA')
    $(this).closest('td').next().find('select').prop('disabled', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="main">
  <form action="ServletExample" method="post">
    <div id="div1">
      <table id="t01" border="2">
        <tbody>
          <tr>
            <td colspan="3">Welcome1</td>
          </tr>
          <tr>
            <td width=15%>
              <center><select id="L1" required>
                           <option value="">Selection1</option>
                           <option value="MSA">MSA</option>
                           <option value="dialect">Dialect</option>         
                        </select></center>
            </td>
            <td width=12%>
              <center><select id="D1" required>
                           <option value="">Selection2</option>
                           <option value="EGY">EGY</option>
                           <option value="GLF">GLF</option>
                        </select></center>
            </td>
            <td>
              <input type="checkbox" id="myCheck1" value="sentence" /> sentence1<br>
              <input type="checkbox" id="myCheck2" value=" words" />words1
              <textarea name="T" id="myText13" rows="3" cols="50"></textarea>
            </td>
          </tr>
          <tr>
            <td colspan="3">Welcome2</td>
          </tr>
          <tr>
            <td width=15%>
              <center><select id="L2" required>
                           <option value="">Selection1</option>
                           <option value="MSA">MSA</option>
                           <option value="dialect">Dialect</option>         
                        </select></center>
            </td>
            <td width=12%>
              <center><select id="D2" required>
                           <option value="">Selection2</option>
                           <option value="EGY">EGY</option>
                           <option value="GLF">GLF</option>
                        </select></center>
            </td>
            <td>
              <input type="checkbox" id="myCheck3" value="sentence" /> sentence2<br>
              <input type="checkbox" id="myCheck4" value=" words" />words2
              <textarea name="T" id="myText13" rows="3" cols="50"></textarea>
            </td>
          </tr>
        </tbody>
      </table>
      <hr />
      <button class="next">NEXT</button>
    </div>

    <div id="div2" style="display:none">
      <table id="t01" border="2">
        <tbody>
          <tr>
            <td colspan="3">Welcome3</td>
          </tr>
          <tr>
            <td>
              <center><select id="L3" required>
                           <option value="">Selection3</option>
                           <option value="MSA">MSA</option>
                           <option value="dialect">Dialect</option>
                        </select></center>
            </td>
            <td>
              <center><select id="D3" required>
                           <option value="">Selection4</option>
                           <option value="EGY">EGY</option>
                           <option value="GLF">GLF</option>
                        </select></center>
            </td>
            <td>
              <input type="checkbox" id="myCheck5" value="sentence" /> sentence3<br>
              <input type="checkbox" id="myCheck6" value=" words" />words3
              <textarea name="T" id="myText13" rows="3" cols="50"></textarea>
            </td>
          </tr>
        </tbody>
      </table>
      <hr />
      <button class="next">NEXT</button>
    </div>

    <div id="div3" style="display:none">
      <table id="t01" border="2">
        <tbody>
          <tr>
            <td colspan="3">Welcome4</td>
          </tr>
          <tr>
            <td>
              <center><select id="L4" required>
                           <option value="">Selection5</option>
                           <option value="MSA">MSA</option>
                           <option value="dialect">Dialect</option>
                        </select></center>
            </td>
            <td>
              <center><select id="D4" required>
                           <option value="">Selection6</option>
                           <option value="EGY">EGY</option>
                           <option value="GLF">GLF</option>
                        </select></center>
            </td>
            <td>
              <input type="checkbox" id="myCheck7" value="sentence" /> sentence4<br>
              <input type="checkbox" id="myCheck8" value=" words" />words4
              <textarea name="T" id="myText13" rows="3" cols="50"></textarea>
            </td>
          </tr>
        </tbody>
      </table>
      <button onclick="submit">Send</button>
    </div>

  </form>
</div>

I want to hide a div and show another div. I used jQuery and the hide step is fine:

<body>

 <div id="div1">
  <select id="L1" required>
        <option value="0">please select</option>
        <option value="A">A</option> 
        <option value="B">B</option> 
  </select>
  <select id="C1" required>
        <option value="0">please select</option>
        <option value="C">C</option> 
        <option value="D">D</option> 
  </select>
  <select id="D1" required>
        <option value="0">please select</option>
        <option value="E">E</option> 
        <option value="F">F</option> 
  </select>
  <button class="next">next</button>
 </div>
 <div id="div2" style="display:none">
  <select id="D2" required>
        <option value="0">please select</option>
        <option value="3">3</option> 
        <option value="4">4</option> 
  </select>
  <button class="next">next</button>
 </div>
 <script>
    $('.next').click(function(){   
       $(this).parent().hide().next().show(); //hide parent and show next  
    });
 </script>
</body>

But the problem is that the div can hide even if some required fields are not selected.

I have 5 dropdown select options in each div and users must select an option for each dropdown before the div is hidden, so if the Next button in the first div is clicked, it must check that all the required fields are selected, and then hide the first div and show the second div.

How I can check this?

I got the problem, it is in the column tag , because I designed the webpage as a table and put every select options in a column.

<td><select id="C1" required>
       <option value="0">please select</option>
       <option value="C">C</option> 
       <option value="D">D</option> 
</select></td>

so, how I can check the select inside a td tag. Below is the structure of HTML

<html>

<body>
  <div id="main">
    <form action="ServletExample" method="post">
      <div id="div1">
        <table id="t01" border="2">
          <tbody>
            <tr>
              <td>
                <center><select id="L1" required>
                               <option value="">Selection1</option>
                               <option value="MSA">MSA</option>
                               <option value="dialect">Dialect</option>         
                            </select></center>
              </td>
              <td>
                <center><select id="D1" required>
                               <option value="">Selection2</option>
                               <option value="EGY">EGY</option>
                               <option value="GLF">GLF</option>
                            </select></center>
              </td>
            </tr>
          </tbody>
        </table>
        <hr />
        <button class="next">NEXT</button>
      </div>

      <div id="div2" style="display:none">
        <table id="t01" border="2">
          <tbody>
            <tr>
              <td>
                <center><select id="L2" required>
                               <option value="">Selection1</option>
                               <option value="MSA">MSA</option>
                               <option value="dialect">Dialect</option>
                            </select></center>
              </td>
              <td>
                <center><select id="D2" required>
                               <option value="">Selection2</option>
                               <option value="EGY">EGY</option>
                               <option value="GLF">GLF</option>
                            </select></center>
              </td>
            </tr>
          </tbody>
        </table>
        <hr />
        <button class="next">NEXT</button>
      </div>

      <div id="div3" style="display:none">
        <table id="t01" border="2">
          <tbody>
            <tr>
              <td>
                <center><select id="L3" required>
                               <option value="">Selection1</option>
                               <option value="MSA">MSA</option>
                               <option value="dialect">Dialect</option>
                            </select></center>
              </td>
              <td>
                <center><select id="D3" required>
                               <option value="">Selection2</option>
                               <option value="EGY">EGY</option>
                               <option value="GLF">GLF</option>
                            </select></center>
              </td>
            </tr>
          </tbody>
        </table>
        <button onclick="submit">Send</button>
      </div>

    </form>
  </div>

  <script type="text/javascript">
  </script>

</body>

</html>

Possible duplicate of [Check if inputs are empty using jQuery](https://stackoverflow.com/questions/1854556/check-if-inputs-are-empty-using-jquery) — Louis 'LYRO' Dupont, Aug 08 '17 at 14:35

score 0 · Answer 1 · answered Aug 08 '17 at 15:14

You just need to add a validate function to check if the select element has a value selected. Below is a working example with validation. It checks to see if the user has selected a value; if they have, it advances to the next select element, otherwise it does not.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

 <div id="div1">
  <h4>D1</h4>
  <select id="D1" required>
        <option value="0">please select</option>
        <option value="1">1</option> 
        <option value="2">2</option> 
  </select>
  <button class="next">next</button>
 </div>
 <div id="div2" style="display:none">
  <h4>D2</h4>
  <select id="D2" required>
        <option value="0">please select</option>
        <option value="3">3</option> 
        <option value="4">4</option> 
  </select>
  <button class="next">next</button>
 </div>
 <script>
    $('.next').click(function(){
       if (validated(this)) {  // call the validate function
         if (!!this.parentNode.nextSibling.nextSibling.id) {  // check to make sure there is another element to switch to
          $(this).parent().hide().next().show(); //hide parent and show next
         }
       }
    });
    function validated(btn) {
      // check if a value has been selected
      var el = btn.previousSibling.previousSibling;
      if (el.value !== "0") { return true; }  // a value has been selected
      else { return false; }  // no value has been selected
    }
 </script>
</body>

I also added a check to not advance to the next item if it is the last select element. You can take that if check out if you don't require it. (I added the h4 element just to show which div is currently active.)

Thank you so much, it works in this small example but when I added to my code it doesn't work :( — Areej, Aug 08 '17 at 15:35
Can you append your question to add the rest of your code? Something in your code is preventing it from working. Are you getting an error in the console? — freginold, Aug 08 '17 at 16:46
No any error in the console, the code is too long but I will try to add part of it. — Areej, Aug 08 '17 at 21:47

score 0 · Accepted Answer · edited Aug 10 '17 at 09:09

0

Here you go with a solution https://jsfiddle.net/bo5fdvLv/

$('.next').click(function() {
  var reqField = true;
  $(this).siblings('select').each(function() {
    if ($(this).val() === '0') {
      reqField = false;
    }
  });

  if (reqField) {
    $(this).closest('div').hide().siblings('div').show();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
  <select id="L1" required>
        <option value="0">please select</option>
        <option value="A">A</option> 
        <option value="B">B</option> 
  </select>
  <select id="C1" required>
        <option value="0">please select</option>
        <option value="C">C</option> 
        <option value="D">D</option> 
  </select>
  <select id="D1" required>
        <option value="0">please select</option>
        <option value="E">E</option> 
        <option value="F">F</option> 
  </select>
  <button class="next">next</button>
</div>
<div id="div2" style="display:none">
  <select id="D2" required>
        <option value="0">please select</option>
        <option value="3">3</option> 
        <option value="4">4</option> 
  </select>
  <button class="next">next</button>
</div>

You can change the below code of mine $(this).closest('div').hide().siblings('div').show(); to $(this).parent().hide().next().show();

edited Aug 10 '17 at 09:09

Milan Chheda

8,159
3
20
35

answered Aug 08 '17 at 15:41

Shiladitya

12,003
15
25
38

Thank you, but it doesn't work in my code, it shows the second div even if no option is selected. I don't why:( – Areej Aug 08 '17 at 15:51
@Areej.. I didn't got the same situation. Can you elaborate the situation??? More over it's your code, I just added jQuery code to it.. – Shiladitya Aug 08 '17 at 16:06
I tried the code in a small html file it works perfect but when added it to my whole code in .jsp file it does't work. This the page which I tried to create. alshutayri.com/index_1.jsp – Areej Aug 08 '17 at 16:10
No error but when I clicked next button the second div shown while no any of required select option was selected. – Areej Aug 08 '17 at 21:46
I got the problem, see my question please. – Areej Aug 08 '17 at 23:48
I added the HTML structure to the question, please have a look on it. – Areej Aug 09 '17 at 10:06
Thank you so much, but what if I have 5 rows in every div? – Areej Aug 09 '17 at 11:59
I got it thank you, I checked 5 rows but still one small thing that when the user select MSA option in selection 1, I need to disable the second selection 2, I did the onchange function to disable selection 2 but the problem now when the selection 2 is disabled the second div doesn't show because the condition is false. – Areej Aug 09 '17 at 12:23
@Areej.. Here you go with an updated solution https://jsfiddle.net/bo5fdvLv/2/ . Please update the question accordingly. – Shiladitya Aug 09 '17 at 12:42
@ Shiladitya.. Thank you for your cooperation and keep trying to help me I added the snippet to the question, I don't know what I could say but still it is not working just checking some select fields and accept empty selection. :( – Areej Aug 09 '17 at 15:20
@ Shiladitya **Perfect**, **Thank you**, that's what I want, it working now. – Areej Aug 09 '17 at 16:15

How can I check if all required fields are selected before hiding a div?

2 Answers2