表单提交过程中的onsubmit()和onclick()

1、问题描述

有一个表单可以处理三个事件：新建、修改和删除，要求在处理删除事件时给出确认提示，其他操作只要输入合法，提交后就可进行。

FormValid(form)对输入数据统一进行合法性验证。

2、实施

为了区分提交的事件，在三个按钮的onclick()中为隐藏域赋值作为标记。

<input type="hidden" name="hidden_submit" id="hidden_submit" value="none" />

然后将三个按钮类型设置为button，验证通过后由submit()函数提交即可。

<input type="button" value="新建" οnclick="fun_new(this)"/>
<input type="button" value="修改"  οnclick="fun_update(this)" />
<input type="button" value="删除" οnclick="fun_delete(this)"/>

对于需要确认才能提交的删除按钮：

function fun_delete(){
  document.form.hidden_submit.value = "DELETE";
  if(FormValid(document.form)){
    if(confirm("确认删除？")){
      document.form.submit();
    }
  }
}

3、讨论

既然FormValid()函数是全表单的验证，那能否在表单的onsubmit()中进行？

<form id="form" name="form" method="post" action="#" οnsubmit="return FormValid(this)"></form>

onsubmit()函数在返回值为true时提交表单。

这时，三个按钮的类型应为submit()。

这样，按钮中只需给隐藏域赋值，验证交予表单处理。然而问题是如何给出删除确认？

倘若在删除按钮的onclick()函数中进行，则有可能用户点击确认删除，而结果却是不满则提交条件。这是因为按照逻辑，应是数据合法性验证通过后才能给出删除操作的确认提示，而事实上onclick()函数的执行顺序先于onsubmit()。

所以只能在onsubmit()中给出删除提示，根据之前的思路很容易写出：

<form id="form" name="form" method="post" action="#" οnsubmit="fun_submit(this)"></form>

function fun_submit(form){
  var flag = false;
  if(FormValid(form)){
    flag = true;
    if( form.hidden_submit.value=="DELETE"){
      if(!confirm("确认删除？"))     flag = false;
    }
  }
  return flag;
}

或者直接用三元表达式写在form中：

<form id="form" name="form" method="post" action="#"
οnsubmit="return FormValid(this)?this.hidden_submit.value == 'DELETE'? confirm('确定删除该用户账号？'):true::false">

4、总结

问题很简单，主要两个要点：

1、onclick()和onsubmit()的执行顺序。参考onSubmit和onclick区别

onsubmit是表单上(也只能是表单)用的,提交表单前会触发

onclick是按钮等控件上用的,用来触发点击事件.

用作数据验证的时候,可以选择在submit按钮上的onclick中验证,可以在onsubmit中验证.但是从事件触发顺序上来说,onclick更早.顺序是:

用户点击按钮->onclick->如果onclick返回有效或未处理onclick则提交表单->onsubmit->如果onsubmit未处理或返回true,则提交,否则取消提交.

onsubmit中返回false会引起取消表单提交;

onclick中返回false则会引起此次点击操作被判断为无效,则也就不会引起表单提交.

2、三目运算符可以简化代码，但有时不利于阅读。