CODEWITHSUNDEEP
htmlinputonclicksubmit
Alberto De Caro
Alberto De Caro

Reputation: 5213

onclick on input type image causes form submit

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?

Upvotes: 0

Views: 11414

Answers (2)

Alberto De Caro
Alberto De Caro

Reputation: 5213

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

Upvotes: 3

Sibu
Sibu

Reputation: 4617

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

Upvotes: 0

Related Questions