我想使输入数量在代码初始化器中相等 [英] 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 no.tickets can be any number.this should not happen.how can i solve it?

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

推荐答案

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

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.

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

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），每次用户添加与我匹配的详细信息旅客的总元素为 的旅客，在新的 tr <上包含相同的 class / code>元素（添加时）。

我建议您使用 clone（）而不是附加整个（相同）行。这是不好的做法。您可以在克隆后添加 id （如果这是使用append的原因）。

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

希望它会有所帮助您。 ：）

Hope it helps you. :)

这篇关于我想使输入数量在代码初始化器中相等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！