html - onclick 输入类型图像导致表单提交

Question

设想

我有这个表格：

<form action="EditShippingInfo.asp" method="POST" id="frmShippingInfo">
  <!-- stuff -->
  <input type="image" id="EditShippingInfo" onclick="javascript:checkShippingInfo(this.form);" src="/img/btn_save.gif" />
</form>

该checkShippingInfo函数运行一些输入验证控件。最终它通过 AJAX 运行服务器端控件：

  function checkShippingInfo(form){
        /* runs validation controls */

        var data = setDataForAjax;
        $.ajax({
            type: 'GET',
            url: '/include/checkAddresses.asp',
            data: data,
            async: false,
            success: function (m) {
                if (m == 0) {
                    /* I want to run form.submit only if m=0 */
                    form.submit();
                }
                else {
                    /* otherways I display a message */
                    alert(m);
                    return false;
                }
            }
        });
  }

但无论如何都会触发表单提交，即使 m!=0。

问题

form.submit我只想在特定条件下触发。input type="image"无论如何都会触发提交吗？

Answer 1

事实

提交输入上的 onclick 事件应始终触发表单提交。 除非onclick 事件处理程序显式返回FALSE.

在此之后，我的代码中缺少两个重要的细节。

解决方案

1. onclick 事件处理程序中的return关键字。

   onclick="javascript:return checkShippingInfo(this.form);"

2. 函数中的return值checkShippingInfo。

.

function checkShippingInfo(form)
{
      /* do the validation control... */

      /* do the ajax call... */

      /* I prevent the form submit */
      return false;
}

Answer 2

function checkShippingInfo(form){
        /* runs validation controls */

        var data = setDataForAjax;
        $.ajax({
            type: 'GET',
            url: '/include/checkAddresses.asp',
            data: data,
            async: false,
            success: function (m) {
                if (parseInt(m) == 0) { //use parseInt here to get integer value
                    /* I want to run form.submit only if m=0 */
                    form.submit();
                }
                else {
                    /* otherways I display a message */
                    alert(m);
                    return false;
                }
            }
        });
  }