How to limit multiple input in javascript

Question

I want to limit my multiple input to three inputs only. I tried if else but the value of I can't read also try creating another variable. I try also length but don't know how to use it.

$("#add-btn").click(function() {
  i++;
  $("#dynamicAddRemove").append('<tr><td><select name="moreFields[+i+][license_type]" class="form-control" required=""><option value="Psychometrician">Psychometrician</option><option value="Psychologist">Psychologist</option><option value="Teacher">Teacher</option><option value="Guidance Counselor">Guidance Counselor</option><option value="Medical Practioner">Medical Practioner</option><option value="Others">Others</option><option value="N/A">N/A</option></select></td>  <td><input type="number" name="moreFields[+i+][license_number]" class="form-control" required></td><td><input type="date" name="moreFields[+i+][registration_date]" class="form-control" required></td><td><input type="date" name="moreFields[+i+][expiration_date]" class="form-control" required></td><td><button type="button" class="btn btn-danger remove-tr">-</button></td></tr>');
});
$(document).on('click', '.remove-tr', function() {
  $(this).parents('tr').remove();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="col-12 pt-4 pb-1">
  <span class="title fs-4 fw-bold">License</span>
  <hr>
</div>
<table class="table" id="dynamicAddRemove">
  <tr class="license">
    <td>
      <label>License Type </label>
      <select name="moreFields[0][license_type]" class="form-control" required="">
        <option value="Psychometrician">Psychometrician</option>
        <option value="Psychologist">Psychologist</option>
        <option value="Teacher">Teacher</option>
        <option value="Guidance Counselor">Guidance Counselor</option>
        <option value="Medical Practioner">Medical Practioner</option>
        <option value="Others">Others</option>
        <option value="N/A">N/A</option>
      </select>
    </td>
    <td>
      <label>License Number</label>
      <input type="number" name="moreFields[0][license_number]" class="form-control" required>
    </td>
    <td>
      <label>Registration Date</label>
      <input type="date" name="moreFields[0][registration_date]" class="form-control" required>
    </td>
    <td>
      <label>Expiration Date</label>
      <input type="date" name="moreFields[0][expiration_date]" class="form-control" required>
    </td>
    <td><button type="button" name="add" id="add-btn" class="mt-4 btn btn-primary rounded-pill" onclick="incrementClick()">+</button></td>
  </tr>
</table>

you can try: document.getElementsByTagName("input").length to check for the current number of inputs — Dominik Lovetinsky
– Dominik Lovetinsky, Commented May 1, 2022 at 7:40
it doesn't identify whether the input length count I tried if else var length = document.getElementsByClassName("license").length; if(length >= 3){ not work — Harvz Mendoza
– Harvz Mendoza, Commented May 1, 2022 at 8:21
Start by removing from the jQuery the line which reads: i++; and from #add-button the onclick="incrementClick()" attribute. — Rounin
– Rounin, Commented May 1, 2022 at 8:59

zer00ne · Accepted Answer · 2022-05-01 10:01:19Z

If you are counting incrementally, you need to use a closure:

let i = 0;
$("#add-btn").click(function() {
  if (i >= 3) return;
  i++;
//...

Define the counter outside of the function and increment the counter within the function. Add an if statement to set a limit and short-circuit the function by calling return. Also the counter is decremented when a row is removed:

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

BTW, inline event handlers are garbage, avoid using them, and you never need to use them if you use jQuery:

~~<div onclick="lame(this)">NEVER DO THIS</div>~~

In addition:

added a <thead>
changed the <label>s into <th>s
changed <span> into <caption>
wrapped the column <div class='col-12'> around the whole <table>
removed <hr>

It's not required, it's just aesthetics.

let i = 0;
$("#add-btn").click(function() {
  if (i >= 3) return;
  i++;
  $("#dynamicAddRemove").append('<tr><td><select name="moreFields[+i+][license_type]" class="form-control" required=""><option value="Psychometrician">Psychometrician</option><option value="Psychologist">Psychologist</option><option value="Teacher">Teacher</option><option value="Guidance Counselor">Guidance Counselor</option><option value="Medical Practioner">Medical Practioner</option><option value="Others">Others</option><option value="N/A">N/A</option></select></td>  <td><input type="number" name="moreFields[+i+][license_number]" class="form-control" required></td><td><input type="date" name="moreFields[+i+][registration_date]" class="form-control" required></td><td><input type="date" name="moreFields[+i+][expiration_date]" class="form-control" required></td><td><button type="button" class="btn btn-danger remove-tr">-</button></td></tr>');
});
$(document).on('click', '.remove-tr', function() {
  $(this).closest('tr').remove();
  i--;
});

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <style></style>
</head>

<body>
  <main class="container">
    <section class="row">
      <div class="col-12 pt-4 pb-1">
        <table class="table" id="dynamicAddRemove">
        <caption class="fs-4 fw-bold caption-top">License</caption>
          <thead>
            <tr>
              <th>License Type</th>
              <th>License Number</th>
              <th>Registration Date</th>
              <th>Expiration Date</th>
            </tr>
          </thead>
          <tr class="license">
            <td>
              <select name="moreFields[0][license_type]" class="form-control" required="">
                <option value="Psychometrician">Psychometrician</option>
                <option value="Psychologist">Psychologist</option>
                <option value="Teacher">Teacher</option>
                <option value="Guidance Counselor">Guidance Counselor</option>
                <option value="Medical Practioner">Medical Practioner</option>
                <option value="Others">Others</option>
                <option value="N/A">N/A</option>
              </select>
            </td>
            <td>
              <input type="number" name="moreFields[0][license_number]" class="form-control" required>
            </td>
            <td>
              <input type="date" name="moreFields[0][registration_date]" class="form-control" required>
            </td>
            <td>
              <input type="date" name="moreFields[0][expiration_date]" class="form-control" required>
            </td>
            <td><button type="button" name="add" id="add-btn" class="btn btn-primary rounded-pill">+</button></td>
          </tr>
        </table>
      </div>
    </section>
  </main>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script></script>
</body>

</html>

Collectives™ on Stack Overflow

How to limit multiple input in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related