javascript - 我想让codeigniter中的输入数量相等

Question

在这里，我在这个项目中动态重复了表格。我想做的是 no.of 乘客必须等于 no.of 乘客详细信息。现在即使我输入 5 名乘客的详细信息 bt no.tickets 可以是任何数字。这应该不会发生。我该如何解决？

<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>

标签： javascriptcodeignitercodeigniter-3

Answer 1

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

但请记住，这不会阻止用户提交详细信息较少的表单，即 2 个乘客和只有 1 个详细信息（您可以防止这种情况，但它很烦人，应该避免）。因此，您应该在表单提交时验证这一点。此外，用户可以先添加 2 名乘客的详细信息，然后将总数更改为 1。这也应在提交时进行检查。

因此，我在 和 中添加了一个class(passenger_detail)，tr每次用户添加详细信息，我将总乘客与 的总元素匹配，在添加新元素时包含class相同的内容。 我建议您使用而不是附加一整行（相同的）。这是不好的做法。您可以在克隆后添加（如果这是使用附加的原因）。classtr
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>

希望它可以帮助你。:)