Klonuję cztery pole (SL Nie, typ papeterii, ilość, usuń) formularza za pomocą Java Script.i może bardzo dobrze załączyć lub usunąć te pole

Nie jestem w stanie wygenerować seryjny nr w pierwszej kolumnie, a jeśli usunąłem każdy wiersz między tym, powinien również dostosować seryjny numer seryjny, mogę osiągnąć ten mój kod jest poniżej

$(document).ready(function() {
  $(document).on('click', '.add', function() {
    var html = '';
    html += '<tr>';
    html += '<td><input type="text" name="item_name[]"  class="form-control item_name" ></td>';
    html += '<td><select name="item_unit[]" class="form-control item_unit" id="datalist"><option value="">Select Stationery Type</option><option value="A4 Green Ream">A4 Green Ream</option><option value="A4 Green Ream">A4 Green Ream</option><option value="Cellotape(Brown)">Cellotape(Brown)</option><option value="Cellotape(Transparent)">Cellotape(Transparent)</option><option value="Gluestick">Gluestick</option><option value="Highlighter">Highlighter</option><option value="Marker(Thick)">Marker(Thick)</option><option value="Marker(Thin)">Marker(Thin)</option><option value="Meeting Pen">Meeting Pen</option><option value="Normal Envelope">Normal Envelope</option></select></td>';
    html += '<td><input type="text" name="item_quantity[]" class="form-control number_only item_quantity" /></td>';
    html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
    $('#item_table').append(html);


  });

  $(document).on('click', '.remove', function() {
    $(this).closest('tr').remove();
  });

  $('#insert_form').on('submit', function(event) {
    event.preventDefault();
    var error = '';
    $('.item_name').each(function() {
      var count = 1;
      if ($(this).val() == '') {
        error += "<p>Enter Item Name at " + count + " Row</p>";
        return false;
      }
      count = count + 1;
    });

    $('.item_quantity').each(function() {
      var count = 1;
      if ($(this).val() == '') {
        error += "<p>Enter Item Quantity at " + count + " Row</p>";
        return false;
      }
      count = count + 1;
    });

    $('.item_unit').each(function() {
      var count = 1;
      if ($(this).val() == '') {
        error += "<p>Select Unit at " + count + " Row</p>";
        return false;
      }
      count = count + 1;
    });
    var form_data = $(this).serialize();
    if (error == '') {
      $.ajax({
        url: "insert.php",
        method: "POST",
        data: form_data,
        success: function(data) {
          if (data == 'ok') {
            $('#item_table').find("tr:gt(0)").remove();
            $('#error').html('<div class="alert alert-success">Item Details Saved</div>');
          }
        }
      });
    } else {
      $('#error').html('<div class="alert alert-danger">' + error + '</div>');
    }
  });

  $(document).on('keypress', '.number_only', function(e) {
    return isNumbers(e, this);
  });

  function isNumbers(evt, element) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (
      (charCode != 46 || $(element).val().indexOf('.') != -1) && // “.” CHECK DOT, AND ONLY ONE.
      (charCode < 48 || charCode > 57))
      return false;
    return true;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<head>
</head>

<body>

  <br />
  <div class="container" style="border: 2px solid #B22222;border-radius: 10px;margin-top: 25px;margin-bottom: 15px;>
        <div class=" row ">
            <div class="col-md-4 ">
            </div>
            <div class="col-sm-12 ">
                <h4 align="center "><b><u>Add Stationery Stock<b></u></h4>
                <br />
                <form method="post " id="insert_form ">
                <div class="col-sm-6 ">
                <input type="text " name="Order No. " class="form-control " placeholder="Order NO "/>
                </div>
                <div class="col-sm-6 ">
                <input type="date " name="Date " class="form-control " placeholder="Date " />
                </div>
                &nbsp;
                <div>&nbsp;</div>
                <div>&nbsp;</div>
                <div>&nbsp;</div>
                <h4 align="center "><b><u>Stationery Details<b></u></h4>
                <div>&nbsp;</div>
                
                    <div class="table-repsonsive ">
                        <span id="error "></span>
                        <table class="table table-bordered " id="item_table ">
                            <tr>
                                <th>Sl.No.</th>
                                <th>Select Stationery Type</th>
                                <th>Enter Quantity</th>
                                <th><button type="button " name="add " class="btn btn-success btn-sm add "><span class="glyphicon glyphicon-plus "></span></button></th>
                            </tr>
                        </table>
                        <div align="center ">
                            <input type="submit " name="submit " class="btn btn-info "style="margin-bottom:20px " value="Insert " />
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
</body>
</html>
0
user14387490 7 październik 2020, 12:58

1 odpowiedź

Najlepsza odpowiedź

Za pomocą

 html += '<td><input type="text" name="item_name[]"  class="form-control item_name"></td>';

Możesz to zrobić

const renum = () => {
  let cnt = 0;
  $(".item_name").each(function() {
    this.value = ++cnt;
  })
};

Kiedy był potrzebny

Naprawiłem twój nieprawidłowy HTML (U i B nie jest poprawnie zamknięty i brakujący cytat na pierwszym stylu inline)

Usunąłem również nazwę = "Prześlij" - nigdy nie chcesz mieć nazwy = "Prześlij" na formularzu, który planujesz przesłać za pomocą skryptu

const renum = () => {
  let cnt = 0;
  $(".item_name").each(function() {
    this.value = ++cnt;
  })
};

$(function() {

  $("#item_table").on('click', '.add', function() {
    var html = '';
    html += '<tr>';
    html += '<td><input type="text" name="item_name[]"  class="form-control item_name" ></td>';
    html += '<td><select name="item_unit[]" class="form-control item_unit" id="datalist"><option value="">Select Stationery Type</option><option value="A4 Green Ream">A4 Green Ream</option><option value="A4 Green Ream">A4 Green Ream</option><option value="Cellotape(Brown)">Cellotape(Brown)</option><option value="Cellotape(Transparent)">Cellotape(Transparent)</option><option value="Gluestick">Gluestick</option><option value="Highlighter">Highlighter</option><option value="Marker(Thick)">Marker(Thick)</option><option value="Marker(Thin)">Marker(Thin)</option><option value="Meeting Pen">Meeting Pen</option><option value="Normal Envelope">Normal Envelope</option></select></td>';
    html += '<td><input type="text" name="item_quantity[]" class="form-control number_only item_quantity" /></td>';
    html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
    $('#item_table').append(html);
    renum()
  });

  $(document).on('click', '.remove', function() {
    $(this).closest('tr').remove();
    renum()
  });

  $('#insert_form').on('submit', function(event) {
    event.preventDefault();
    var error = '';
    $('.item_name').each(function() {
      var count = 1;
      if ($(this).val() == '') {
        error += "<p>Enter Item Name at " + count + " Row</p>";
        return false;
      }
      count = count + 1;
    });

    $('.item_quantity').each(function() {
      var count = 1;
      if ($(this).val() == '') {
        error += "<p>Enter Item Quantity at " + count + " Row</p>";
        return false;
      }
      count = count + 1;
    });

    $('.item_unit').each(function() {
      var count = 1;
      if ($(this).val() == '') {
        error += "<p>Select Unit at " + count + " Row</p>";
        return false;
      }
      count = count + 1;
    });
    var form_data = $(this).serialize();
    if (error == '') {
      $.ajax({
        url: "insert.php",
        method: "POST",
        data: form_data,
        success: function(data) {
          if (data == 'ok') {
            $('#item_table').find("tr:gt(0)").remove();
            $('#error').html('<div class="alert alert-success">Item Details Saved</div>');
          }
        }
      });
    } else {
      $('#error').html('<div class="alert alert-danger">' + error + '</div>');
    }
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<div class="container" style="border: 2px solid #B22222;border-radius: 10px;margin-top: 25px;margin-bottom: 15px;">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-sm-12">
      <h4 align="center"><b><u>Add Stationery Stock</u></b></h4>
      <form method="post" id="insert_form">
        <div class="col-sm-6"><input type="text" name="Order No." class="form-control" placeholder="Order NO " /></div>
        <div class="col-sm-6"><input type="date" name="Date" class="form-control" placeholder="Date" /></div>
        &nbsp;
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <div>&nbsp;</div>
        <h4 align="center"><b><u>Stationery Details</u></b></h4>
        <div>&nbsp;</div>
        <div class="table-repsonsive"><span id="error"></span>
          <table class="table table-bordered" id="item_table">
            <tr>
              <th>Sl.No.</th>
              <th>Select Stationery Type</th>
              <th>Enter Quantity</th>
              <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
            </tr>
          </table>
          <div align="center"><input type="submit" class="btn btn-info" style="margin-bottom:20px" value="Insert" /></div>
        </div>
      </form>
    </div>
  </div>
</div>
0
mplungjan 7 październik 2020, 11:20