Повторите проверку (номер) и отобразите сообщение об ошибке

ProgramBox

Повторите проверку (номер) и отобразите сообщение об ошибке

Post author:admin
Запись опубликована:7 февраля, 2022
Post category:Вопросы по программированию

#ajax #codeigniter #codeigniter-3

Вопрос:

У меня есть функция, в которой я могу добавлять строки с помощью кнопки. Моя цель-когда пользователь вводит номер, который уже есть в базе данных, появится предупреждение или любые сообщения об ошибках, в которых будет сказано: «Введенный вами номер/ы уже используется, пожалуйста, используйте другой номер»**. Есть ли способ, как я могу заставить это работать? Я предоставил свой скриншот и свои коды ниже. Спасибо

Число просмотров:

     <table class="table table-bordered" border="1" id="applicanttable">
      <thead>
        <tr>
        </tr>
      </thead>
      <tbody>
        <div class="row">
          <tr>
            <th>#</th>
            <th>Light</th>
    
            <th>Action</th>
          </tr>
          <tr id="row_0">
            <td>
              <input id="#" name="#" class="auto_num" type="text" value="1" readonly />
            </td>
            <td class="labelcell">
              <input value="" class="form" name="lightBand1" placeholder=""   id="lightBand1"/>
        <span id="email_result"></span>
            </td>
         
            <td class="labelcell">
              <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
            </td>
          </tr>
        </div>
      </tbody>
    
    
      <tfoot>
        <tr>
        </tr>
        <tr>
          <button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
        </tr>
      </tfoot>
    </table>

скрипт:

    $("#addrow").on('click', function() {
    
      let rowIndex = $('.auto_num').length   1;
      let rowIndexx = $('.auto_num').length   1;
    
      var newRow = '<tr><td><input class="auto_num"  type="text" name="entryCount" value="'   rowIndexx   '" /></td>"'  
        '<td><input name="lightBand' rowIndex '" id="lightBand1"  value="" class="form"  type="number"  /></td>"'  
                            ' <span id="email_result"></span>'  
     
        '<td><input type="button" class="removerow" id="removerow'   rowIndex   '" name="removerow'   rowIndex   '" value="Remove"/></td>';
    
      $("#applicanttable > tbody > tr:last").after(newRow);
    
    
    });

аякс:

   $(document).ready(function(){  
      $('#lightBand1').change(function(){  
           var lightBand1 = $('#lightBand1').val();  
           if(lightBand1 != '')  
           {  
                $.ajax({  
                     url:"<?php echo base_url(); ?>participant/check_number_avalibility",  
                     method:"POST",  
                     data:{lightBand1:lightBand1},  
                     success:function(data){  
                          $('#email_result').html(data);  
                     }  
                });  
           }  
      });  
 });

Controller:

   function check_number_avalibility()
    {
        if(!filter_var($_POST["lightBand1"], FILTER_VALIDATE_INT))
        {
            echo '<label class="text-danger"><span class="glyphicon glyphicon-remove"></span> Invalid LightBand</span></label>';
        }
        else
        {
            $this->load->model("Participant_repository");
            if($this->participants->is_number_available($_POST["lightBand1"]))
            {
                echo '<label class="text-danger"><span class="glyphicon glyphicon-remove"></span> LightBand is already registered</label>';
            }
            else
            {
                echo '<label class="text-success"><span class="glyphicon glyphicon-ok"></span> LightBand Available</label>';
            }
        }  
    }

Model:

   function is_number_available($lightBand)
{
    $this->db->where('lightBand', $lightBand);
    $query = $this->db->get("entry");
    if($query->num_rows() > 0)
    {
        return true;
    }
    else
    {
        return false;
    }
}

 $("#addrow").on('click', function() {

  let rowIndex = $('.auto_num').length   1;
  let rowIndexx = $('.auto_num').length   1;

  var newRow = '<tr><td><input class="auto_num"  type="text" name="entryCount" value="'   rowIndexx   '" /></td>"'  
    '<td><input name="light'   rowIndex   '" placeholder="duplicate validation here" id="auto"  value="" class="form"  type="number"  /></td>"'  
 
    '<td><input type="button" class="removerow" id="removerow'   rowIndex   '" name="removerow'   rowIndex   '" value="Remove"/></td>';

  $("#applicanttable > tbody > tr:last").after(newRow);


});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
  <thead>
    <tr>
    </tr>
  </thead>
  <tbody>
    <div class="row">
      <tr>
        <th>#</th>
        <th>Light</th>

        <th>Action</th>
      </tr>
      <tr id="row_0">
        <td>
          <input id="#" name="#" class="auto_num" type="text" value="1" readonly />
        </td>
        <td class="labelcell">
          <input value="" class="hehe form-control" name="light1" placeholder="duplicate validation here" required id="auto" />
        </td>
     
        <td class="labelcell">
          <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
        </td>
      </tr>
    </div>
  </tbody>


  <tfoot>
    <tr>
    </tr>
    <tr>
      <button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
    </tr>
  </tfoot>
</table>

1. Привет, так что же здесь не работает ?

2. Привет, Свати. Моя главная проблема заключается в том, что он работает с первым текстовым полем, но когда я добавляю строку и пытаюсь ввести уже существующее число, проверка не работает. Я думаю, что моя ошибка связана с именем=»lightBand1″, потому что оно увеличивается каждый раз, когда я добавляю строки. Пожалуйста, посмотрите это prnt.sc/14tsw8i

3. Кроме того, для первого текстового поля это имя=»lightBand1″, когда я добавляю строку, имя становится именем=»lightBand2″ и так далее.

Ответ №1:

Поскольку ваши входные данные генерируются динамически, вам нужно связать их со статическим элементом, поэтому измените обработчик событий следующим $(document).on('change', 'input[name*=lightBand]', function() {..}) образом .Затем используйте $(this).val() для получения значения ввода , в котором произошло изменение, и передайте его вашему ajax .

В вашем текущем коде jquery у вас много дубликатов идентификаторов, поэтому измените их на класс . Кроме того , добавьте класс email_result в свой тег span, если у вас есть идентификатор здесь и <span class="email_result"></span> он находится вне тега td, поместите его внутрь td тега .

Обновленный код jquery:

 $(document).on('change', 'input[name*=lightBand]', function() {
  var lightBand1 = $(this).val(); //get value
  var selector = $(this)//save slector
  if (lightBand1 != '') {
    $.ajax({
      url: "<?php echo base_url(); ?>participant/check_number_avalibility",
      method: "POST",
      data: {
        lightBand1: lightBand1
      },
      success: function(data) {
        selector.next('.email_result').html(data);//use next here ..
      }
    });
  }
});

Быстрая Демонстрация :

 $("#addrow").on('click', function() {

  let rowIndex = $('.auto_num').length   1;
  let rowIndexx = $('.auto_num').length   1;

  var newRow = '<tr><td><input class="auto_num"  type="text" name="entryCount" value="'   rowIndexx   '" /></td>"'  
    '<td><input name="lightBand'   rowIndex   '"  value="" class="form"  type="number"  /> <span class="email_result"></span></td>"'  

    '<td><input type="button" class="removerow" id="removerow'   rowIndex   '" name="removerow'   rowIndex   '" value="Remove"/></td>';

  $("#applicanttable > tbody > tr:last").after(newRow);


});



$(document).on('change', 'input[name*=lightBand]', function() {

  var lightBand1 = $(this).val(); //get value
  var selector = $(this) //save slector
  selector.next('.email_result').html("") //empty previous error
  if (lightBand1 != '') {
    /*$.ajax({
      url: "<?php echo base_url(); ?>participant/check_number_avalibility",
      method: "POST",
      data: {
        lightBand1: lightBand1
      },
      success: function(data) {*/
    selector.next('.email_result').html("NOT GOOD"); //use next here ..
    /* }
    });*/
  }
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<table class="table table-bordered" border="1" id="applicanttable">
  <thead>
    <tr>
    </tr>
  </thead>
  <tbody>
    <div class="row">
      <tr>
        <th>#</th>
        <th>Light</th>

        <th>Action</th>
      </tr>
      <tr id="row_0">
        <td>
          <input id="#" name="#" class="auto_num" type="text" value="1" readonly />
        </td>
        <td class="labelcell">
          <input value="" class="form" name="lightBand1" placeholder="" id="lightBand1" />
          <span class="email_result"></span>
        </td>

        <td class="labelcell">
          <input type="button" class="removerow" id="removerow0" name="removerow0" value="Remove">
        </td>
      </tr>
    </div>
  </tbody>


  <tfoot>
    <tr>
    </tr>
    <tr>
      <button type="button" id="addrow" style="margin-bottom: 1%;">Add Row</button>
    </tr>
  </tfoot>
</table>