logo
Tags down

shadow

clear array after form submit


By : natanos
Date : May 07 2020, 10:10 AM

I try to clear array after form submit. I want to prevent duplicate selection in jquery autocomplete, in which pre-selected values can be saved in an array, which prevents re-selection.

And by deleting a selected row it should delete the selected value from the array.

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

Answer :

You have an inArray variable declared globally. So, onSumbit you can just define empty that array. And to delete specific element in array please check the comments in JS code.

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



Share : facebook icon twitter icon
Related Posts Related Posts :
  • pass url variable to javascript
  • access data using api
  • div position fixed css
  • add horizontal line between two div
  • disable toggle button css
  • css fixed line height
  • background image not working
  • table cell border
  • text line break css
  • overlay div on div
  • text direction rtl css
  • javascript convert string to an object
  • bind inner div click to outer div
  • jquery ajax oncomplete
  • how to use promise in for loop
  • jquery get element using variable
  • javascript send textbox value
  • pass div class content to another class or id
  • css new line after element
  • css calc not working properly
  • link disabled jquery
  • sql join table to subquery
  • MS Access SQL Issue with OR AND Operators
  • set textarea value using php
  • php merge two arrays into one
  • php form with google captcha
  • update current row in php
  • php date format mysql
  • mysql pdo select query
  • php function return an array
  • PHP mysqldump database to sql file
  • display image query
  • php create array using foreach loop
  • associative array php
  • group_concat in mysql laravel
  • php array_push empty
  • mysql on update cascade not working
  • pdo insert prepared statement
  • mysql insert ignore vs on duplicate key
  • mysql insert into existing row
  • mysql multi insert query
  • mysql group by show all rows
  • php change profile image
  • combine multiple arrays into one array php
  • how to sum values in an array
  • how to get sum of the total time
  • How to Create Facebook live stream without notification using API ?
  • on button click make div visible
  • css affect another element on hover
  • insert line after paragraph word
  • shadow
    Privacy Policy - Terms - Contact Us © bighow.org