Clever Geek Handbook

Auto-complete next selection box according to previous field response

I have 2 questions if the answer to the first question is 1> I want the next answer to be auto-filled in as Yes. Can anyone point me in the right direction?

<div class="field">
  <!-- Number of Employees -->
  <label>Number of Employees</label>
  <div class="styled-select">
    <select name="NoOfEmployees" class="validate[required]" data-prompt-position="topLeft:110,15">
      <option value="">Please select</option>
      <?php
      foreach (range(0, 49) as $number) {
          echo '<option value="'.$number.'">'.$number.'</option>';
      }
      ?>
      <option value="50 Plus">50+</option>
    </select>
  </div>
</div>

<div class="field">
  <!-- Employers Liability Cover Required -->
  <label>Employers Liability Cover Required</label>
  <div class="styled-select">
    <select name="EmployersLiabilityCover" class="validate[required]" data-prompt-position="topLeft:110,15">
      <option value="">Please select</option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
    </select>
  </div>
</div>

If the answer is 0, then I just need the next question to stay as select.

+3


source to share


1 answer


  use jquery onchange,
give selectbox input seperate id,
  Use jquery val () to get selectbox value
  use if condition to check it is greater than 0

below code



<div class = "field">
    <! - Number of Employees ->
    <label> Number of Employees </label>
    <div class = "styled-select">
        <select name = "NoOfEmployees" class = "validate [required]" id = "select1" data-prompt-position = "topLeft: 110,15">
            <option value = ""> Please select </option>
            <? php
            foreach (range (0, 49) as $ number) {
                echo '<option value = "'. $ number. '">'. $ number. '</option>';
            }
            ?>
            <option value = "50 Plus"> 50+ </option>
        </select>
    </div>
</div>

<div class = "field">
    <! - Employers Liability Cover Required ->
    <label> Employers Liability Cover Required </label>
    <div class = "styled-select">
        <select name = "EmployersLiabilityCover" id = "select2" class = "validate [required]" data-prompt-position = "topLeft: 110,15">
            <option value = ""> Please select </option>
            <option value = "Yes"> Yes </option>
            <option value = "No"> No </option>
        </select>
    </div>
</div>

<script src = "https://code.jquery.com/jquery-2.1.4.js"> </script>
<script>
    $ ('# select1'). on ('change', function () {
        if (this.value> 0)
        {
            $ ("# select2"). val ("Yes");
        }
        else
        {
            $ ("# select2"). val ("");
        }
    });
</script>
+1


source






More articles:


All Articles