Harshitha Harshitha - 4 months ago 11
jQuery Question

Multiple Fields based on drop down in jquery

Here is my fiddle :

https://jsfiddle.net/harshithanaidu1991/6vx7ej9d/

i have given default select drop down value as 'One Single Occupancy' but the table is not showing when change the drop down option then only the table is coming .
How do i make to display default one table as per the first value from the drop down.

Here is my javascript code:

$(document).ready(function(){
$('#amount').change(function(){
$('#groups').empty();
var group = '';
var number = parseInt($(this).val());
for(var i=1;i<=number;i++){
group += '<div id="group">' +
'<h1 style=" font-size: 14px;color: rgb(0, 0, 0);"><u>GUEST DETAILS : '+i+'</u></h1>'+
'<table class="tabpasdding" width="100%" style="border:1px solid #ccc;">'+
'<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />'+
'<tr>'+
'<td width="50%" align="left">'+
'<table width="100%" align="left">'+


'<tr>'+
'<td ><label>Full Name <span style="color:red">*</span></label></td>'+
'<td ><input type="text" id="pname'+i+'" name="pname'+i+'" class="form-control" autocomplete="off" onkeydown="testForEnter();"></td>'+
'</tr>'+

'<tr>'+
'<td ><label>Passport Number <span style="color:green">#</span> </label></td>'+
'<td ><input type="text" name="ppassport'+i+'" id="ppassport'+i+'" class="form-control" autocomplete="off" onkeydown="testForEnter();"></td>'+
'</tr>'+

'</table>'+
'</td>'+
'<td width="50%" align="right">'+
'<table width="100%" align="right">'+

'<tr><td><label class="">Check In Date & Time </label></td><td> <div class="input-group date form_datetime " data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">'+
'<input class="form-control" size="16" type="text" value="" id="checkindatetime'+i+'" name="checkindatetime'+i+'">'+
'<span class="input-group-addon" style="width:17%"><span class="glyphicon glyphicon-remove"></span></span>'+
'<span class="input-group-addon" style="width:17%"><span class="glyphicon glyphicon-th"></span></span>'+
'</div> </td></tr>'+
'<tr><td><label>Check Out Date & Time </label></td><td> <div class="input-group date form_datetime " data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">'+
'<input class="form-control" size="16" type="text" value="" id="checkoutdatetime'+i+'" name="checkoutdatetime'+i+'">'+
'<span class="input-group-addon" style="width:17%"><span class="glyphicon glyphicon-remove"></span></span>'+
'<span class="input-group-addon" style="width:17%"><span class="glyphicon glyphicon-th"></span></span>'+
'</div> </td></tr>'+


'</table>'+
'</td>'+
'</tr>'+

'</table>' +
' <p>&nbsp;</p>'+

'</div>';
}
$('#groups').append(group);
});
});


And here is my html code:

<table class="tabpasdding" width="100%">
<tr>
<td><label>Select Preference :</label> </td>
<td>
<select id="amount">

<option value="1" selected>One Single Occupancy</option>
<option value="2">Two Single Occupancy</option>
<option value="2">One Double Occupancy</option>
<option value="4">Two Double Occupancy</option>
<option value="3">One Single & One Double Occupancy</option>
</select>
</td>
</tr>
</table>
<p>&nbsp;</p>
<div id="groups">
</div>


You can check the fiddle here:

https://jsfiddle.net/harshithanaidu1991/9hbnLky0/13/


Please help me

Answer

Please try below snippet. Created a function to generate HTML based on the selected number of the dropdown. And placed that function in on change event of the dropdown to generate HTML when dropdown values change. And same function put in document.ready when page will load the HTML will generated based on default selected dropdown value.

$(document).ready(function(){
	//by default generate html based on the default selected value.
  $('#groups').empty();    
  var number = parseInt($("#amount").val());
  createHTML(number);
  
  $('#amount').change(function(){
    $('#groups').empty();    
    number = parseInt($(this).val());
    createHTML(number);
  });
});

function createHTML(number){
	var group = '';
  for(var i=1;i<=number;i++){
    group += '<div id="group">' +
      '<h1 style=" font-size: 14px;color: rgb(0, 0, 0);"><u>GUEST DETAILS : '+i+'</u></h1>'+
      '<table class="tabpasdding" width="100%" style="border:1px solid #ccc;">'+
      '<input type="hidden" name="_token" value="{{{ csrf_token() }}}" />'+
      '<tr>'+
      '<td width="50%" align="left">'+
      '<table width="100%" align="left">'+


      '<tr>'+
      '<td ><label>Full Name <span style="color:red">*</span></label></td>'+
      '<td ><input type="text" id="pname'+i+'" name="pname'+i+'" class="form-control" autocomplete="off" onkeydown="testForEnter();"></td>'+
      '</tr>'+

      '<tr>'+
      '<td ><label>Passport Number <span style="color:green">#</span> </label></td>'+
      '<td ><input type="text" name="ppassport'+i+'" id="ppassport'+i+'" class="form-control"  autocomplete="off" onkeydown="testForEnter();"></td>'+
      '</tr>'+

      '</table>'+
      '</td>'+
      '<td width="50%" align="right">'+
      '<table width="100%" align="right">'+

      '<tr><td><label class="">Check In Date & Time </label></td><td> <div class="input-group date form_datetime " data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">'+
      '<input class="form-control" size="16" type="text" value="" id="checkindatetime'+i+'" name="checkindatetime'+i+'">'+
      '<span class="input-group-addon" style="width:17%"><span class="glyphicon glyphicon-remove"></span></span>'+
      '<span class="input-group-addon"  style="width:17%"><span class="glyphicon glyphicon-th"></span></span>'+
      '</div> </td></tr>'+
      '<tr><td><label>Check Out Date & Time </label></td><td>  <div class="input-group date form_datetime " data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">'+
      '<input class="form-control" size="16" type="text" value="" id="checkoutdatetime'+i+'" name="checkoutdatetime'+i+'">'+
      '<span class="input-group-addon" style="width:17%"><span class="glyphicon glyphicon-remove"></span></span>'+
      '<span class="input-group-addon"  style="width:17%"><span class="glyphicon glyphicon-th"></span></span>'+
      '</div> </td></tr>'+


      '</table>'+
      '</td>'+
      '</tr>'+

      '</table>' +
      '    <p>&nbsp;</p>'+
      //       '<p style="color:#000000;font-weight:bold;text-transform:uppercase"><input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)">'+
      // ' Check this box if check in and check out Details same</p>'+
      '</div>';
  }
  $('#groups').append(group);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tabpasdding" width="100%">
            <tr>
              <td><label>Select Preference :</label> </td>
              <td>
                <select id="amount">
               
                  <option value="1" selected>One Single Occupancy</option>
                  <option value="2">Two Single Occupancy</option>
                  <option value="2">One Double Occupancy</option>
                  <option value="4">Two Double Occupancy</option>
                  <option value="3">One Single & One Double Occupancy</option>
                </select>
              </td>
            </tr>
          </table>
          <p>&nbsp;</p>
          <div id="groups">
          </div>