时间戳

首页 > 解决方案 > 提交后如何清除数组

javascript - 提交后如何清除数组

问题描述

我想在表单提交后清除数组。我想防止在 jquery 自动完成中重复选择，其中预先选择的值可以保存在一个数组中，从而防止重新选择。

通过删除选定的行，它应该从数组中删除选定的值。

$(document).ready(function() {
  inArray = [];
});
$('#formSubmit').submit(function(e) {
  e.preventDefault();
  $("#formSubmit")[0].reset();
});
//autocomplete script    
$(document).on('focus', '.search', function() {
  let type = $(this).data('type');

  $(this).autocomplete({
    source: [{
      label: 1,
      value: 1,
      data: {
        t_id: 1,
        Fee: 10
      }
    }, {
      label: 2,
      value: 2,
      data: {
        t_id: 2,
        Fee: 20
      }
    }],
    autoFocus: true,
    minLength: 1,
    select: function(event, ui) {
      let id_num = $(this).attr('id').substring(5);
      var element = ui.item.data.Fee;
      if (inArray.indexOf(element) !== -1) {
        alert('duplicate error');
        return;
      }
      inArray.push(element);
      $(this).val(ui.item.value);
      $('#fee_' + id_num).val(ui.item.data.Fee);
      $('#total').val(ui.item.data.Fee);
      //$(this).attr('data-type', ui.item.type);
      return false;
    },
  });
});

var i = $('table#first tr').length;
$("#more").on('click', function() {
  html = '<tr>';
  html += '<td><input type="text" data-type="type" id="test_' + i + '" class="search" placeholder="Enter 1 or 2 only"> </td>';
  html += '<td><input type="number" id="fee_' + i + '" class="fee" placeholder="Fee"></td>';
  html += '<td><p class="delete"> delete </p> </td>';
  html += '</tr>';
  $('table#first').append(html);
  i++;
});
$(document).on("click", ".delete", function() {
  $(this).parents("tr").remove();
});
#button {
  margin: 50px;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!--hidden div-->
<form id="formSubmit" method="post">
  <table id="first">
    <thead>
      <tr>
        <th>Name</th>
        <th>Fee</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" data-type="type" id="test_1" class="search" placeholder="Enter 1 or 2 only"></td>
        <td><input type="number" id="fee_1" class="fee" placeholder="Fee"></td>
        <td><a id="more"> More Row </a></td>
      </tr>
    </tbody>
  </table>

  <button type="submit" id="button"> submit </button>
</form>

标签： javascriptjquery

解决方案

您已经有一个inArray全局声明的变量。因此，onSumbit您可以清空该数组。要删除数组中的特定元素，请查看 JS 代码中的注释。

$(document).ready(function() {
  inArray = [];
});
$('#formSubmit').submit(function(e) {
  e.preventDefault();
  $("#formSubmit")[0].reset();
	inArray = [];
});
//autocomplete script    
$(document).on('focus', '.search', function() {
  let type = $(this).data('type');

  $(this).autocomplete({
    source: [{
      label: 1,
      value: 1,
      data: {
        t_id: 1,
        Fee: 10
      }
    }, {
      label: 2,
      value: 2,
      data: {
        t_id: 2,
        Fee: 20
      }
    }],
    autoFocus: true,
    minLength: 1,
    select: function(event, ui) {
      let id_num = $(this).attr('id').substring(5);
      var element = ui.item.data.Fee;
      if (inArray.indexOf(element) !== -1) {
        alert('duplicate error');
        return;
      }
      inArray.push(element);
      $(this).val(ui.item.value);
      $('#fee_' + id_num).val(ui.item.data.Fee);
      $('#total').val(ui.item.data.Fee);
      //$(this).attr('data-type', ui.item.type);
      return false;
    },
  });
});

var i = $('table#first tr').length;
$("#more").on('click', function() {
  html = '<tr>';
  html += '<td><input type="text" data-type="type" id="test_' + i + '" class="search" placeholder="Enter 1 or 2 only"> </td>';
  html += '<td><input type="number" id="fee_' + i + '" class="fee" placeholder="Fee"></td>';
	
	// DATA ID IS USED TO GET "VALUE" IN TR TO BE REMOVED
  html += '<td><p class="delete" data-id="fee_' + i + '"> delete </p> </td>';
  html += '</tr>';
  $('table#first').append(html);
  i++;
});
$(document).on("click", ".delete", function() {  
	
	// GETTING VALUE IN INPUT USING DATA-ID ATTRIBUTE
	let rem = $('#'+$(this).attr('data-id')).val();
	// FINDING INDEX OF VALUE IN ARRAY
	let index = inArray.indexOf(+rem);
	
	if(index > -1) {
		// IF VALUE IS IN ARRAY REMOVE IT FROM ARRAY
		inArray.splice(index, 1);
	}
	
	// FINALLY REMOVE TR FROM DOM
	$(this).parents("tr").remove();
});
#button {
  margin: 50px;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!--hidden div-->
<form id="formSubmit" method="post">
  <table id="first">
    <thead>
      <tr>
        <th>Name</th>
        <th>Fee</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="text" data-type="type" id="test_1" class="search" placeholder="Enter 1 or 2 only"></td>
        <td><input type="number" id="fee_1" class="fee" placeholder="Fee"></td>
        <td><a id="more"> More Row </a></td>
      </tr>
    </tbody>
  </table>

  <button type="submit" id="button"> submit </button>
</form>

推荐阅读