在输入类型图像上单击会导致表单提交

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. checkShippingInfo函数中的return值。

。

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;
                }
            }
        });
  }