"onclick"似乎没有使用"提交"按钮调用函数

Question

我已经多次遇到过这种情况(我不想在这里使用'输入类型按钮')为什么'onclick'不会调用函数check(); ？即使字段为空,页面仍会提交.谢谢您的意见.

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

所以......页面不应该在空白字段上提交 - 为什么要提交？谢谢..

Answer 1

将您的功能更改为:

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 != ''));

}

您实际上不必将onclick事件更改为onsubmit,只需将其更改为onclick="return check();".您需要将false返回到onclick事件以防止它被触发.

您可能希望添加一些视觉增强功能,以指示未提交表单的原因.否则会让访客感到困惑.