单击按钮可防止表单提交

时间:2017-01-26 20:36:00

标签: javascript jquery button submit form-submit

我有一个代码段,可以防止双击点击设为按钮的链接。

SELECT [PART_NAME]
    , [PART_REVISION]
    , [PART_ITERATION]
    , [SPEED_GRADE]
    , [JEDEC_TYPE]
    , [NV_LEAD_TIME]
    , [VOLUME]
    , [POW]
    , [LIBRARY]
    , [Valid_To]
    , [NV_COSTS]
    , [ZZ_Item_Type]
    , [NV_PREFERENCE]
    , [SPARE]
    , [HEIGHT]
    , [NAME]
    , [PACK_TYPE]
    , [QUALIFIER]
    , [PTF_NAME]
    , [Parts]
FROM
      (SELECT *
       FROM   #temp) AS SourceTable PIVOT(MIN(IBAVALUE) FOR IBA_NAME IN([SPEED_GRADE]
                                                         , [JEDEC_TYPE]
                                                         , [NV_LEAD_TIME]
                                                         , [VOLUME]
                                                         , [POW]
                                                         , [LIBRARY]
                                                         , [Valid_To]
                                                         , [NV_COSTS]
                                                         , [ZZ_Item_Type]
                                                         , [NV_PREFERENCE]
                                                         , [SPARE]
                                                         , [HEIGHT]
                                                         , [NAME]
                                                         , [PACK_TYPE]
                                                         , [QUALIFIER]
                                                         , [PTF_NAME]
                                                         , [Parts])) AS PivotTable;

我的问题是这段代码似乎阻止任何提交按钮提交表单。这是上述代码中的预期行为吗?

1 个答案:

答案 0 :(得分:1)

似乎禁用该按钮可防止事件冒泡DOM并触发提交。有几种方法,但最简单的可能是检查它是否是表单上的提交按钮并手动处理它如下:



$('.btn').on('click', function(e) {
  var trigger = $(this);
  if (trigger.prop('disabled') == true) {
    trigger.attr("href", "javascript:void(0);");
  }

  trigger.prop('disabled', true); // disables form submit event bubbling

  if (trigger.is('[type="submit"], .submit')) { // check if submit button
    var form = trigger.closest("form, .form"); // find form
    if (form.length) { // if form exists
      form.submit(); // manually trigger form submit
    }
  }
});

$("form").on("submit", function() {
  alert("submitting...");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form style="border: 2px solid black; padding: 10px 0;">
  Form:
  <input type="submit" class="btn" />
  <button class="submit btn">.submit</button>
</form>
<br/>
<button class="btn">Non-form button.btn</button>
<input type="button" class="btn" value="non-form input.btn">
&#13;
&#13;
&#13;

相关问题