Why does `onclick()` get called before form submission?

Question

I have a form which is submitted via a submit button. When it is clicked it performs java script validation and shows error fields under the text box . So if there are errors, the control returns back to same page. My problem is that after form post, i keep on seeing two error fields and i need to delete one and keep only one .

For that, i called a click function from the submit button and there i am trying to find out if the error div ids exist like this :

<input type="image" name="submit" onclick = 'checkErrors()'>

Now inside the checkErrors() method :

function checkErrors(){
var errorElem1 = document.getElementById('errField1');
var errorElem2 = document.getElementById('errField2');
if((errorElem1 != null) && (errorElem2 != null)){
alert("Two error fields.");
errorElem2.style.display='none';
}
}

Now, here i do not find the alert, once i click on the button.

So i removed the if condition and kept it as :

 function checkErrors(){
var errorElem1 = document.getElementById('errField1');
var errorElem2 = document.getElementById('errField2');
errorElem2.style.display='none';
}
}

Now, i see error in firebug console : elem2 is null. That means the onclick is getting executed and then only form post happens, hence the elem2 is never found after onclick.

The form is submitted as :

<form name="IntitalJspPage" method="post" action="Controller" onsubmit="validate(this); return false;">

Now what can i do here to get the onclick called after the form has been submitted and the error fields have been rendered on the page ?

Its not so, actually an asynchronous ajax validation occurs and if there are errors same page gets loaded with errors on the error fields. So basically on form submission , same page gets loaded with ajax post validations . — The Dark Knight, Jun 04 '13 at 13:44
asynchronous ajax validation? What is that and where is it in the code you are providing? — MaVRoSCy, Jun 04 '13 at 14:07
The question is not about `ajax validation`. It's rather about, whether i can call `onclick` after the form has been submitted and has loaded the contents in the same page . — The Dark Knight, Jun 04 '13 at 14:10
@MaVRoSCy lemme check that out. I will get back to you . Thanks . — The Dark Knight, Jun 04 '13 at 14:22

MaVRoSCy · Answer 1 · 2013-06-04T14:16:10.780

0

When the form submission is over then basically you ave something like a page refresh. So the DOM is reconstructed from the beginning. Any javascript variables you have initialised before the submit operation are now reset.

To do what you want is very simple. You can do it like this

<input id="mysubmit" type="image" name="submit" onclick = 'checkErrors()'>

Method 1 (plain javascript):

<body onload="document.getElementById('mysubmit').click(); return false;">

Method 2 (JQuery):

$( document ).ready(function() {
    $('#mysubmit').click();
});

edited Jun 04 '13 at 14:16

answered Jun 04 '13 at 13:47

MaVRoSCy

17,747
15
82
125

What's this `img` tag for ? Any ways , the problem is I am getting two error fileds, which i intent to avoid after the form has been posted. So your piece of code with 'if' condition is redundant as i do want to get the error after form submission and not before that . – The Dark Knight Jun 04 '13 at 13:50
you mean that when the DOM loads you want to click the input with `name="submit"` ? – MaVRoSCy Jun 04 '13 at 14:00
What i mean is that, after form submission is over , only then i want the onclick method to be called. – The Dark Knight Jun 04 '13 at 14:09

score 0 · Accepted Answer · answered Jun 04 '13 at 13:49

0

You used image as input type.input type does not have image type. instead of use type="button". call submit form in validate method instead.

answered Jun 04 '13 at 13:49

bNd

7,512
7
39
72

@TheDarkKnight I think you can handle such thing better way by using ajax call. create ajax call. on click of button/image call ajax method. then after call complete of submit. do call error method. – bNd Jun 04 '13 at 13:58
Can you point me to any internet resource, which has such a piece of code ? It will be useful for me to understand and implement it. – The Dark Knight Jun 04 '13 at 13:59
Refer http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery `onreadystatechange` is method which will call when response come back. so call error method call there. – bNd Jun 04 '13 at 14:02

Why does `onclick()` get called before form submission?

2 Answers2