Javascript 如果MySQL中存在id，则在模式上自动增加id

我的文本框中有一个自动递增的id号，在我向MySQL提交数据之后，当我再次尝试打开该模式时，用户id值应该递增。我不知道怎样才能使它工作。希望你能帮助我

以下是我的示例代码：

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

登录
&时代；
点击按钮

继续
用户信息：
用户ID
访客身份证不见了！
看起来不错！
你叫什么名字？
看起来不错！
你叫什么名字？
看起来不错！
登录

以下是我的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>

（功能（）{
"严格使用",；
addEventListener（'load'，function（））{
//获取要应用自定义引导验证样式的所有表单
var forms=document.getElementsByClassName（'needs-validation'）；
//对它们进行循环并防止提交
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
}，假）；
});
}，假）；
})();
//物料选择初始化
$（“#日期选择器”）。日期选择器({
showOtherMonths：对
});
$（'#日期选择器1'）。日期选择器({
showOtherMonths：对
});
函数增量值（）{
var value=parseInt（document.getElementById（'id'）。value，10）；
值=isNaN（值）？0：值；
值++；
document.getElementById（'id'）。value=value；
}
$（函数（）{
$（“#日期”）.datepicker({
minDate:0
});
});
$（函数（）{
$（'#date1'）。日期选择器({
minDate:0
});
});

这是我当前的输出：

---

在mySQL中创建插入数据的表时，请使用以下语法：

创建表名( id INT非空自动增量， . . . )

---

插入值（插入到表名称中）时，不需要设置id。它将自动设置。

alter table

yourtable

add column

id

int autoincrement not null主键；
然后在提交时，不要在

id`列中输入任何值，它会自动存储您想要的值

我的意思是，在我向mysql提交数据后，我的文本框中有一个自动递增的id号，当我尝试再次打开模式时，用户id值应该递增。@Ace您应该使用select max（最后一个值）+从bla bla中选择1，并在文本框值中显示，然后根据上次插入，您将在文本框中看到增量值。但对于这种方法，您应该保持文本框为只读，以便用户无法操作它，并且如果您的表->列具有自动增量id，则数据库将保持其自己的增量值！在submit query中，也不需要插入id列。我的意思是，我的文本框中有一个自动递增的id号，在我向mysql提交数据后，当我再次尝试打开该模式时，用户id值应该递增。