Do not accept repeated values in a table using jQuery

Question

Do not accept repeated values in a table using jQuery

Navigation

#1 by (0 votes)

1

I have a table to which, I add data from three different TextBox . For this I use jQuery and C # as follows:

<form>
    <input type="text" id="inputText1">
    <input type="text" id="inputText2">
    <input type="text" id="inputText3">
    <button type="button" class="btn btn-default" id="submit">Submit</button>
</form>
<script>
    $("#submit").click(function (e) {
        e.preventDefault();
        var val1 = $("#inputText1").val();
        var val2 = $("#inputText2").val();
        var val3 = $("#inputText3").val();
        $('#myTable').append('<tr><th scope="row">2</th><td class="value">' + val1 + '</td><td>' + val2 + '</td><td>' + val3 + '</td><td><a href="#" id="select">Modificar</a>                         <a href="#" id="eliminar">Eliminar</a></td></tr>');
        $("#inputText1").val('');
        $("#inputText2").val('');
        $("#inputText3").val('');
    });
</script>

The code of my table is as follows (pure HTML ).

<div class="table-responsive">
    <table class="table table-striped table-bordered table-condensed" id="myTable" style="width:90%; margin:0 auto;">
        <thead>
            <tr>
                <th>#</th>
                <th>ID</th>
                <th>Last Name</th>
                <th>Username</th>
                <th></th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</div>

It's very simple and as you can see, it has three columns, but the one that interests me is the ID , this should not be repeated in any record of the table, I want to achieve it, using jQuery , that at the moment of entering a repeated ID a message is shown to the user indicating the impossibility of registering the employee and that in fact he / she is not allowed to enter the record in the table.

As a complement, this data is stored in the table, but not in the database, that will be a later step. For now, I just want to validate that the ID is not repeated in the table records.

jquery html

asked by ArtEze 12.03.2017 в 03:10

source

1 answer

Ember js execute javascript when the html is loaded Print response in a new file (any format) [NodeJS] [closed]

score 0 · Accepted Answer

Simply create a function that iterates the first td of each row and compares the text with the id to enter.

Note: If the ID field is to be used as a PK in the database, this field should not be in the form. If two users create a user at the same time, they will have the same PK and there will be a conflict in the database.

$("#submit").click(function(e) {
  e.preventDefault();
  
  var id = $("#inputText1").val().toLowerCase();
  var lastname = $("#inputText2").val();
  var name = $("#inputText3").val();
  
  if (checkId(id)) {
  	return alert('El ID ya está siendo usado');
  }
  
  $('#myTable tbody').append('<tr><td for="id">' + id + '</td><td>' + lastname + '</td><td>' + name + '</td><td><a href="#" id="select">Modificar</a><a href="#" id="eliminar">  Eliminar</a></td></tr>');
  $("#inputText1").val('');
  $("#inputText2").val('');
  $("#inputText3").val('');
  $('#inputText1').focus();
});

function checkId (id) {
	let ids = document.querySelectorAll('#myTable td[for="id"]');

  return [].filter.call(ids, td => td.textContent === id).length === 1;
}

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  padding: 20px;
}

.table-responsive {
  margin-top: 25px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form class="form">
  <div class="form-group">
    <label for="inputText1">ID</label>
    <input type="text" class="form-control" id="inputText1">
  </div>
  
  <div class="form-group">
    <label for="inputText2">Lastname</label>
    <input type="text" class="form-control" id="inputText2">
  </div>
  
  <div class="form-group">
    <label for="inputText3">Name</label>
    <input type="text" class="form-control" id="inputText3">
  </div>
  <button type="button" class="btn btn-default" id="submit">Submit</button>
</form>

<div class="table-responsive">
  <table class="table table-striped table-bordered table-condensed" id="myTable" style="width:100%; margin:0 auto;">
    <thead>
      <tr>
        <th>ID</th>
        <th>Last Name</th>
        <th>Username</th>
        <th>Acciones</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>