Question

Scenario

I have got this form:

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

The checkShippingInfo function runs some input validation control. Eventually it runs a server side control via 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;
                }
            }
        });
  }

But the form submit is triggered anyway, even if m!=0.

Question

I want to trigger the form.submit only under a certain condition.
Does input type="image" trigger a submit in anycase?

Answer 1

The fact

The onclick event on a submit input shall always trigger the form submit.
Unless the onclick event handler explicitly return FALSE.

After this, two important details are missing in my code.

The solution

1. The return keyword in the onclick event handler.

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

2. The return value in the checkShippingInfo function.

.

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

      /* do the ajax call... */

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