html - using dropdown lists to control forms -


i want use dropdown lists control format of menu want create. i've searched web several hours without success. we're looking create form format controllable dropdown menu. i've created simple web form below using html code below demonstrate;

what we're looking present form user dependent upon selection of "number of applicants" dropdown. if user selects 1, "applicant 1 title" dropdown presented. should user select 2, both "applicant 1 title" , "applicant 2 title" dropdowns presented user.

is has come across on here?

 <html>      <body>      <form/>            <label for="txt_appnos">number of applicants:</label>                <select id="txt_appnos" name="appnos">        <option value="appnos1">1</option>        <option value="appnos2">2</option>      </select>       <br>           <br>                 	      <label for="txt_title1">applicant 1 title:</label>                <select id="txt_title1" name="title1">        <option value="mr1">mr</option>        <option value="mrs1">mrs</option>        <option value="miss1">miss</option>        <option value="ms1">ms</option>      </select>                  <br>           <br>                 <label for="txt_title2">applicant 2 title:</label>                <select id="txt_title2" name="title2">        <option value="mr2">mr</option>        <option value="mrs2">mrs</option>        <option value="miss2">miss</option>        <option value="ms2">ms</option>      </select>             </form>      </body>      </html>

try below code.

$('#appnos').on('change', function() {      var val = $(this).val();      $('#form1').hide();      $('#form2').hide();      $('#' + val).show();  });
.hidden {      display: none;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>  <label for="txt_appnos">number of applicants:</label>            <select id="appnos" name="appnos">    <option value="form1">1</option>    <option value="form2">2</option>  </select>   <br>       <br>           <form id="form1" class="hidden">  <label for="txt_title1">applicant 1 title:</label>            <select id="txt_title1" name="title1">    <option value="mr1">mr</option>    <option value="mrs1">mrs</option>    <option value="miss1">miss</option>    <option value="ms1">ms</option>  </select>   </form>         <form id="form2" class="hidden">  <label for="txt_title2">applicant 2 title:</label>            <select id="txt_title2" name="title2">    <option value="mr2">mr</option>    <option value="mrs2">mrs</option>    <option value="miss2">miss</option>    <option value="ms2">ms</option>  </select>  </form>


Comments

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

Android volley - avoid multiple requests of the same kind to the server? -

Combining PHP Registration and Login into one class with multiple functions in one PHP file -