如果id存在于MySQL中，则自动在模态上增加id

Question

I have an auto increment id number on my textbox inside a modal, after I submit a data to MySQL, when I try to open again the modal the user id value should increment. I'm having trouble of how I can make it work. hope you can help me.

Here is my sample code:

<a class="btn btn-outline-white" href="#exampleModal" data-toggle="modal" data-target="#exampleModal" target="_blank" role="button">Login<i class="fa fa-sign-in ml-2"></i>
</a>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header blue accent-1">
        <h5 class="modal-title" style="color:white;" id="exampleModalLabel">Login</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <center>
          <h5>
            <p> Click button </p>
          </h5>
        </center>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal1" style=" color:#fff; background:#00bcd4" onclick="incrementValue()" value="Increment Value">Continue</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade right" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog  modal-full-height modal-right" role="document">
    <div class="modal-content">
      <div class="modal-header blue accent-1">
        <h3 class="mt-2" style="color:white;"><i class="fa fa-user-circle"></i> User Information:</h3>
        <a href="#" button type="btn" class="close" aria-label="Close">
        <span aria-hidden="true">&times;</span></a>
      </div>
      <div class="modal-body">
        <!-- Material form grid -->
        <form class="needs-validation " novalidate>
          <!-- Grid row -->
          <div class="row">
            <!-- Grid column -->
            <div class="col">
              <!-- Material input -->
              <div class="md-form mt-0">
                <input type="text" class="form-control" name="id" placeholder="User's ID" id="id" readonly style="width:45%; margin-top:30px;" value="0">
                <label for="inputVisitorMD" style="font-size: 1rem; ">User's ID</label>
                <div class="invalid-feedback">
                  Visitors ID missing!
                </div>
                <div class="valid-feedback">
                  Looks good!
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <!-- Grid column -->
            <div class="col">
              <!-- Material input -->
              <div class="md-form mt-0">
                <input type="text" class="form-control" name="firstname" placeholder="First name" id="firstname" required>
                <div class="invalid-feedback">
                  What's your name?
                </div>
                <div class="valid-feedback">
                  Looks good!
                </div>
              </div>
            </div>
            <!-- Grid column -->

            <!-- Grid column -->
            <div class="col">
              <!-- Material input -->
              <div class="md-form mt-0">
                <input type="text" class="form-control" placeholder="Last name" name="lastname" id="lastname" required>
                <div class="invalid-feedback">
                  What's your name?
                </div>
                <div class="valid-feedback">
                  Looks good!
                </div>
              </div>
            </div>
          </div>
          <!-- Grid row -->
          <div class="text-center mt-2">
            <button type="submit" class="btn btn-info" style="width:98%; ">Log in <i class="fa fa-sign-in ml-1"></i></button>
          </div>
        </form>
        <!-- Material form grid -->
      </div>
    </div>
  </div>
</div>

Here is my JavaScript:

<script>
  (function() {
    'use strict';
    window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
  // Material Select Initialization
</script>
<script>
  $('#datepicker').datepicker({
    showOtherMonths: true
  });

  $('#datepicker1').datepicker({
    showOtherMonths: true
  });
</script>
<script>
  function incrementValue() {
    var value = parseInt(document.getElementById('id').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('id').value = value;
  }
</script>
<script>
  $(function() {
    $('#date').datepicker({
      minDate: 0
    });
  });

  $(function() {
    $('#date1').datepicker({
      minDate: 0
    });
  });
</script>

Here is my current output:

Answer 1

When you create the table you insert your data into in mySQL use the following syntax:

CREATE TABLE table_name ( id INT NOT NULL AUTO_INCREMENT, . . . )

when inserting a value (INSERT INTO table_name) you don't need to set id. It will be set automatically .