I Want Make No.of Inputs Equal In Codeigniter

Here i repeated the table dynamically in this project.what i want to make is no.of passenger must be equal to no.of passenger details.Now even if i enter details of 5 passengers bt

Solution 1:

Ok @suraj shetty, I've created a demo from your code(removing the php code) which will not allow the passenger details to be greater than total passengers.

But keep in mind, this will not prevent the user from submitting the form with fewer details, ie 2 passengers and only 1 detail(You can prevent this but it's annoying and should be avoided). So, you should validate this on form submit. Also, the user can first add details of 2 passengers and then change the total number to 1. This should also be checked on submit.

So, I added a class(passenger_detail) to the tr and every time, the user adds detail I match total passengers with total elements of the class, the same class is included when on new tr element when added. I would advise you to use clone() instead of appending a whole(same) row. It's bad practice. You can add id after cloning(if that was the reason behind using append).

$(document).ready(function(){
  var i=1;

    $('#add').click(function(){
       let total_passenger = $('#passenger').val(); // get total passengers let total_details   = $('.passenger_detail').length; // get total rows with class total_detailsif(total_details < total_passenger){ // check the condition
       
        i++;

        $('#a').append('<tr class="passenger_detail" id="row'+i+'"><th><input type="text" name="pname[]" placeholder="Name" class="form-control name_list" /></th><th ><input type="number" name="age[]" placeholder="Age" class="form-control name_list" min="5" max="130" /></th><th scope=""><select class="form-control" id="gender[]" name="gender[]"  placeholder="gender" width=""> <option>Male</option> <option>Female</option></select></th><th><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></th></tr>');  // use clone() here, then add id
       
      }else{ // you can remove this if you don't want to show any messagealert('Passenger details cannot be greater than no. of passengers'); // your custom message
       }
    });

    $(document).on('click', '.btn_remove', function(){ // you can also check the condition on remove but should avoid doing that. Check on submit instead.var button_id = $(this).attr("id"); 
        $('#row'+button_id+'').remove();
    });

});

functionsum(){} // just to avoid error, because you're calling sum() onkeyup. Your logic here.

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="form-group"><labelfor="No.of adults">No.of Passengers</label><inputtype='number'name='pass_no'class='form-control'id='passenger'min='1'max='9'onkeyup="sum();"placeholder='Enter No.of Adults'value='1'></div><labelfor="Passenger Details">Passenger Details</label><buttontype="button"class="btn btn-primary btn-sm"id="add"style="margin-left:170px">Add Passenger</button><tableclass="table table-secondary"id="a"name="a"><thead><trclass="table-default passenger_detail"><thscope="col-lg-15"><inputtype='text'name='pname[]'class='form-control'id='pname'placeholder='Name'value='Sauhard' /></th><thscope="col-lg-15"><inputtype='number 'name='age[] 'class='form-control'id='age'min='5 'max='130'placeholder='Age 'value='23' /></th><thscope="col-lg-15"><selectclass="form-control"id="gender[]"name="gender[]"placeholder="Gender"><option>Male</option><option>Female</option></select></th></tr></thead></table>

Hope it helps you. :)