집 > 기사 > 웹 프론트엔드 > jquery submit()이 양식을 제출할 수 없는 문제를 해결하는 방법

jquery submit()이 양식을 제출할 수 없는 문제를 해결하는 방법

小云云원래의: 2018-01-17 13:19:252004검색

이 글은 주로 jquery submit()이 form을 제출할 수 없는 문제에 대한 해결 방법을 자세히 소개하고 있습니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

오늘 양식 제출을 작성할 때 확인 메시지를 추가해야 해서 제출 버튼을 사용하지 않고 대신 jq의 submit()을 사용했는데 문제가 발생했습니다

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

제출 버튼을 클릭했더니 확인 메시지가 떴는데 확인 후 아무 반응이 없더군요

제출 버튼 유형을 변경했는데도 제출이 가능하더군요

그래서 jQuery API로 갔습니다. 이유를 찾기 위해 다음 텍스트를 보고 즉시 이해했습니다.

추가 참고 사항:

양식 및 해당 하위 요소는 제출과 같은 양식의 속성과 충돌하는 입력 이름이나 ID를 사용해서는 안 됩니다. , 길이 또는 메소드 이름 충돌로 인해 혼란스러운 오류가 발생할 수 있습니다. 규칙의 전체 목록을 확인하고 이러한 문제에 대한 마크업을 확인하려면 DOMLint를 참조하세요.

아마도 양식과 해당 하위 요소가 제출, 길이, 방법 등과 같은 이름이나 ID와 같은 양식입니다. 그렇지 않으면 충돌이 발생하고 이름 충돌이 이러한 상황을 일으킬 수 있습니다.

버튼 ID가 submit으로 설정되어 있어서 로 판명되었습니다

jquery submit()이 양식을 제출할 수 없는 문제를 해결하는 방법

관련 기사