How to solve the problem that jquery submit() cannot submit the form

This article mainly introduces in detail the solution to the problem that jquery submit() cannot submit the form. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

When I wrote the form submission today, I needed to add a confirmation prompt, so I didn’t use the submit button to submit. Instead, I used jq’s submit(), and then there was a problem

<form class="form-horizontal m-t" method="post" action="@Url.Action("Edit")" id="form">
    <p class="row">
      <p class="col-sm-12">
        <p class="ibox float-e-margins">
          <p class="ibox-title">
            <h5>添加</h5>
          </p>
          <p class="ibox-content">
            <p class="form-group">
              <label class="col-sm-3 control-label">开始时间：</label>
              <p class="col-sm-8">
                <span>
                  @(Model.annualRate_beginDate?.ToString("yyyy-MM-dd"))
                </span>
              </p>
            </p>
            <p class="form-group">
              <label class="col-sm-3 control-label">结束时间：</label>
              <p class="col-sm-8">
                <input type="text" class="form-control" name="annualRate_endDate" id="annualRate_endDate" onclick="laydate({ istime: false, format: &#39;YYYY-MM-DD&#39; })" value="@Model.annualRate_endDate.ToString("yyyy-MM-dd")" required>
              </p>
            </p>
            <p class="form-group">
              <label class="col-sm-3 control-label">年利息%：</label>
              <p class="col-sm-8">
                <input type="number" step="0.01" class="form-control" id="annualRate_rate" name="annualRate_rate" value="@Model.annualRate_rate.ToString("#0.00")" required>
              </p>
            </p>
            <p class="form-group">
              <p class="col-sm-4 col-sm-offset-2">
                <button class="btn btn-lg btn-primary" id="submit_btn" type="button">
                  提交
                </button>

                <a class="btn btn-lg btn-white" href="@Url.Action(" rel="external nofollow" Index")">
                  取消
                </a>
              </p>
            </p>
          </p>
        </p>

      </p>
    </p>
  </form>

<script type="text/javascript">
  $(function () {
    $("#submit").click(function () {
      var start = &#39;@(Model.annualRate_beginDate?.ToString("yyyy-MM-dd"))&#39;;
      var end = $("#annualRate_endDate").val();
      var val = $("#annualRate_rate").val();
      layer.confirm(&#39;请确认所填写的信息是否正确？<br/>开始时间：&#39; + start + &#39;<br/>结束时间：&#39; + end + &#39;<br/>年利率:&#39; + val, { icon: 3, title: &#39;提示&#39; }, function (index) {
        $("#form").submit();
        layer.close(index);
      });
    });
  })
</script>

Click the submit button and a confirmation prompt will appear, but after confirmation, there will be no response

But if you change the button type to submit, you can submit again

So I went to jQuery API to find the reason, and I immediately understood when I saw the following text:

Additional Notes:

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.

It probably means that the form and its sub-elements should not use the attributes of a form as the name or id, such as submit, length, and method, otherwise conflicts will occur. Name conflicts may cause this.

It turns out to be because the button id is set to submit

Related recommendations:

How jQuery uses ajaxSubmit() to submit a form instance Detailed explanation

Example introduction to the difference between submit() in JQuery and JS

Overview of the submit() method and onsubmit event application of form elements_Basics Knowledge

The above is the detailed content of How to solve the problem that jquery submit() cannot submit the form. For more information, please follow other related articles on the PHP Chinese website!