javascript函数被忽略答案

【问题标题】：javascript function is ignoredjavascript函数被忽略
【发布时间】：2013-12-21 02:32:47
【问题描述】：

我希望在我的页面上发生一件非常简单的事情，在用户提交表单后，在表单实际提交之前必须有一个延迟，但是它似乎不适用于 html 表单：

<form action='index.php' method='get'>
<input type='submit' value='Reset' name='resetBtn' onClick='PreSubmit(this.form)'>

</form>

javascript函数：

function PreSubmit(form) {
    var func = function () {
        form.submit();
    }
    setTimeout(func, 10000);    
}

所以我对javascript真的很陌生，但是我怎么看，onlick事件必须调用这个javascript函数，它应该等待10秒然后才提交表单并更新页面，但是表单立即提交，为什么？以及如何让它在提交前等待？任何形式的帮助将不胜感激

【问题讨论】：

标签： javascript html

【解决方案1】：

您需要停止提交按钮的默认行为。很多人都错误地返回 false 来执行此操作，但这并不完全正确，it's important to understand what returning false is doing。这不是最好的方法（不显眼的 JS 是一个完全不同的主题），但要以最小的更改完成您想要的，请执行以下操作

HTML：

<form action='index.php' method='get'>
<input type='submit' value='Reset' name='resetBtn' onClick='PreSubmit(event, this.form)'>

</form>

JS：

function PreSubmit(event, form) {
    if (event.preventDefault) { 
       event.preventDefault();
    } 
    else {
       event.returnValue = false; 
    }
    var func = function () {
        form.submit();
    }
    setTimeout(func, 10000);    
}

【讨论】：

哇，非常好读，一定会看看，谢谢，信息量很大
@user2209644 请注意，链接中的代码使用 jQuery，但 jQuery 只是一个 javascript 库，因此只是 javascript。我的答案中的代码是 jQuery 的 preventDefault 函数完成的功能不太强大的版本
我明白了，您会建议完全跳过 javascript 并直接从 jquery 开始吗？
@user2209644 没有。对 javascript 的良好理解将使您能够更有效地使用 jQuery，并成为一个更全面的 javascript 开发人员。见this question 和this question

【解决方案2】：

添加返回到 onclick。

onClick='return PreSubmit(this.form)'>

并将 return false 添加到 PreSubmit。

function PreSubmit(form){
    ....
    //this will stop the click event
    return false;
}

所以 PreSubmit 返回 false -> onClick 返回 false，这将停止提交按钮操作。

http://jsfiddle.net/KVsQ4/

我认为你会考虑另一个问题，如果用户连续点击按钮会发生什么。再等 10 秒（这意味着你应该清除上一个 timeID 的超时），或者只是禁用它当用户第一次点击它时。

【讨论】：

行得通，谢谢！你能告诉我为什么对函数的常规调用不起作用并且必须使用 return 吗？如果不是太麻烦的话。关于用户多次点击，我正在使用延迟来显示动画，基本上这个按钮无论如何都会消失=）

【解决方案3】：

您需要将其设为 type="button"，而不是 type="submit"

【讨论】：