我想让 no.of 输入在 codeigniter 中相等

Question

这里我动态地重复了table project.what 我想做的是 no.of passenger 必须等于 no.of passenger details.Now 即使我输入 5 名乘客的详细信息 bt no.tickets 可以是任何 number.this 不应该 happen.how 我可以解决吗？

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

    $('#add').click(function(){
    i++;

  $('#a').append('<tr 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>');
    });

    $(document).on('click', '.btn_remove', function(){
        var button_id = $(this).attr("id"); 
        $('#row'+button_id+'').remove();
    });

});
</script>

  <div class="form-group">
              <label for="No.of adults">No.of Passengers</label>
              <?php echo form_input(['type'=>'number','name'=>'pass_no','class'=>'form-control','id'=>'passenger','min'=>1,'max'=>9,'onkeyup'=>"sum();",'placeholder'=>'Enter No.of Adults','value'=>set_value('pass_no')]); ?>
                <?php echo form_error('pass_no'); ?>
                </div>

            <label for="No.of Children">Passenger Details</label><button type="button" class="btn btn-primary btn-sm" id="add" style="margin-left:170px">Add Passenger</button>
            <table class="table table-secondary" id="a" name="a">
            <thead>
            <tr class="table-default">
            <th scope="col-lg-15">
              <? if(isset($pname)): // Name set? ?>
                <? foreach($pname as $item): // Loop through all previous posted items ?>
                  <?php echo form_input(['type'=>'text','name'=>'pname[]','value'=>'','class'=>'form-control','id'=>'pname','placeholder'=>'Name','value'=>set_value('pname[]')]); ?>
                    <?php echo form_error('pname[]'); ?>
                <? endforeach; ?>
              <? else: ?>
              <? endif; ?>
            </th>
            <th scope="col-lg-15">
              <? if(isset($age)): // Name set? ?>
                <? foreach($age as $item): ?>

                 <?php echo form_input(['type'=>'number','name'=>'age[]','class'=>'form-control','id'=>'age','min'=>5,'max'=>130,'placeholder'=>'Age','value'=>set_value('age[]')]); ?>
              <?php echo form_error('age[]'); ?>
                <? endforeach; ?>
              <? else: ?>
              <? endif; ?>
            </th>
            <th scope="col-lg-15">
              <? if(isset($gender)): // Name set? ?>
                <? foreach($gender as $item): // Loop through all previous posted items ?>
                  <select class="form-control" id="gender[]" name="gender[]"  placeholder="Gender" > 

                    <option>Male</option> 
                    <option>Female</option>
                  </select>
                <? endforeach; ?>
              <? else: ?>
              <? endif; ?>
            </th>
            </tr>
            </thead>
            </table>

Answer 1

好的@suraj shetty，我已经根据您的代码创建了一个演示（删除了 php 代码），它不允许乘客详细信息大于乘客总数。

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.

所以，我在 tr 中添加了一个 class(passenger_detail)，每次用户添加详细信息时，我都会将 total passengers 与 class 的总元素相匹配，相同的 class 在添加新的 tr 元素时包含在内。
我建议您使用 clone() 而不是附加整个（相同）行。这是不好的做法。您可以在克隆后添加 id（如果这是使用追加的原因）。

$(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_details
       if(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 message
        alert('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();
    });

});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="No.of adults">No.of Passengers</label>
  <input type='number' name='pass_no' class='form-control' id='passenger' min='1' max='9' onkeyup="sum();" placeholder='Enter No.of Adults' value='1'>
</div>

<label for="Passenger Details">Passenger Details</label><button type="button" class="btn btn-primary btn-sm" id="add" style="margin-left:170px">Add Passenger</button>
<table class="table table-secondary" id="a" name="a">
  <thead>
    <tr class="table-default passenger_detail">
      <th scope="col-lg-15">
        <input type='text' name='pname[]' class='form-control' id='pname' placeholder='Name' value='Sauhard' />
      </th>
      <th scope="col-lg-15">
        <input type='number ' name='age[] ' class='form-control' id='age' min='5 ' max='130' placeholder='Age ' value='23' />
      </th>
      <th scope="col-lg-15">
        <select class="form-control" id="gender[]" name="gender[]" placeholder="Gender">
          <option>Male</option>
          <option>Female</option>
        </select>
      </th>
    </tr>
  </thead>
</table>

希望对您有所帮助。 :)

我想让 no.of 输入在 codeigniter 中相等

i want make no.of inputs equal in codeigniter

javascript

codeigniter

codeigniter-3