'onclick' doesn't seem to call a function with 'submit' button

I've come across this many times ( I don't want to use 'input type 开发者_Go百科button' here ) why oh why the 'onclick' doesn't call the function check(); ? The page still submits even when the fields are empty. Thank you for your comments.

Javascript:

function check() { 
    var name =  document.getElementById('username_res');
    var passw_old =  document.getElementById('passw_reset_old');
    var passw_new =  document.getElementById('passw_reset');
    var button_res = document.getElementById('sub_res');

    if ((name.val() == "") && (passw_old.val().length == "") && (passw_new.val().length == "")) { 
        button_res.disabled = true; 
    } else {
        button_res.disabled = false;
    }
}

HTML:

<form id="passw_res" name="passw_res" method="post" action="pass_reset.php">
<fieldset style="width:300px"><br/>
<legend id="pass_legend" align="left">Password reset</legend><br/>
<input type="text" id="username_res" name="username_res" maxlength="50" />
<input type="password" id="passw_reset_old" name="passw_reset_old" maxlength="16"/>
  <input type="password" id="passw_reset" name="passw_reset" maxlength="16"  />
  <input type="submit" value="submit" id="sub_res" name="sub_res" onclick="check();"/>
 </fieldset>
  </form>

So...the page shouldn't submit on empty fields - why does it submit ? Thanks..

Change your function to this:

function check() { 

    var name =  document.getElementById('username_res').value;
    var passw_old =  document.getElementById('passw_reset_old').value;
    var passw_new =  document.getElementById('passw_reset').value;

    return ((name != '') && (passw_old != '') &&  (passw_new != ''));

}

You actually don't have to change the onclick event to an onsubmit, just change it to onclick="return check();". You need to return false to the onclick event to prevent it from being fired.

You might want to add some visual enhancements to indicate why the form isn't submitted. Otherwise it will be confusing to the visitor.

You're trying to call a jquery method on a stand javascript variable.

Try this instead

if ((name.value == "") && (passw_old.value == "") && (passw_new.value == "")) {
    return false;  
} else { 
    return true; 
}

And you submit button should be

<input type="submit" value="submit" id="sub_res" name="sub_res" onclick="return check();"/>

You need to change the type of the button from type="submit" to type="button" and then in the check() function if everything passes you need to get the form object and submit it.

So something like document.getElementById('formID').submit()

you need to return false to avoid event propagation.

Like here.

You can try instead to use the form's onSubmit function

<form id="passw_res" action="pass_reset.php" onSubmit="check()">

The page submit because there is nothing in your check() script that would stop it from. Your script only disables the button on validating, but by that time the click/submit has already happened and hence, the form would submit.

So use onsubmit='return check();', and instead of disabling, return a true or false based on your validation. That would 'stop' the submit action if check() returned false, and would go ahead with the submit if it returns true.