如何在从任何按钮类型提交表单之前执行javascript_Javascript_Html

如何在从任何按钮类型提交表单之前执行javascript

javascript html

如何在从任何按钮类型提交表单之前执行javascript,javascript,html,Javascript,Html,我正在更新一个现有的应用程序，它在一些提交表单的页面上有几种不同的按钮类型。我需要每个按钮能够在提交表单之前执行一些javascript。我将js代码放在表单的onsubmit事件中，但并非所有按钮都执行它。我创建了一个示例，其中显示了所有提交表单的3个不同按钮。按钮1和3将显示我在表单的onsubmit事件中输入的警报。按钮2不起作用。我知道我可以在submit（）调用之前，在按钮2的onclick中输入警报代码，但我确实需要一种与所有按钮一致的方法。我需要所有的按钮来执行我的示例中的警报，我

我正在更新一个现有的应用程序，它在一些提交表单的页面上有几种不同的按钮类型。我需要每个按钮能够在提交表单之前执行一些javascript。我将js代码放在表单的

onsubmit

事件中，但并非所有按钮都执行它。我创建了一个示例，其中显示了所有提交表单的3个不同按钮。按钮1和3将显示我在表单的

onsubmit

事件中输入的警报。按钮2不起作用。我知道我可以在

submit（）

调用之前，在按钮2的

onclick中输入警报代码，但我确实需要一种与所有按钮一致的方法。我需要所有的按钮来执行我的示例中的警报，我想在一个地方更新代码，并使其适用于提交此表单的所有按钮。这可能吗？如果我需要提供更多信息，请告诉我
代码：










3.带有onclick的html按钮

更新：1/15/2014
感谢您的想法，但不幸的是，它没有解决创建一个适用于所有可能导致提交事件的按钮的解决方案的问题。昨天我花了一整天的时间，根据乔丹和本杰明的反应，尝试不同的选择，但仍然没有运气。所以我想我应该退一步，解释一下为什么我要做我想做的事情
我有一个经典的ASP应用程序。在需要用户输入的页面上，我发现许多用户超时，当他们单击提交页面的按钮时，他们会丢失信息。因此，我在页面中添加了一个javascript计时器，首先警告用户他们即将超时，然后让他们知道他们已经超时，这样他们就可以将自己的工作复制并粘贴到其他地方保存。一个关键点是，这个应用程序的设计方式是，大多数页面提交到一个隐藏的iframe，这样页面就不必重新加载。如果用户超时，他们不知道，因为它发生在隐藏的iframe中，他们认为应用程序被锁定了
我解决这个问题的方法是在页面上创建一个javascript计时器。它创建一个变量，该变量包含页面加载的开始时间，并在设置的时间内每秒倒计时显示一条javascript消息。我设置了它，它工作得很好，只有一个例外。如果用户提交一个页面（到隐藏的iframe），他们的会话超时会被重置，但跟踪时间的我的javascript变量不会。这将导致他们在没有真正超时时收到超时消息。我的第一个想法是，这将是一个简单的修复方法，因为在页面加载之后，我可以编写一个javascript函数来查找Submit事件中的每个表单，并在前面添加一行代码来更新我的计时器变量。但是，根据我原来的问题，这是一个问题，因为如果按钮不是submit按钮，则不会调用form onsubmit事件，即使它调用表单的submit（）函数也是如此。理想情况下，我希望提供可以添加到每个表单页面的代码，而不需要对该页面进行任何其他更新
除非有人有更好的想法，否则我想我必须更新每个页面上的一些现有代码。对于任何
或
，对表单onsubmit的更新都是正常的，并且由我添加到页面的javascript代码自动处理，该代码查找所有表单并更新onsubmit事件。但是对于每个
和
我必须手动检查它们的onclick事件和它可能调用的每个函数，以查看它是否调用submit（）函数。如果是这样，那么我必须按照Jordan指出的那样，让它调用一个函数，在调用submit（）之前我可以输入代码
任何解决我的问题或提出不同方法的想法都将不胜感激。再次感谢。
也许您可以通过非标准按钮上的事件处理程序提交表单，并让代码提前执行：
HTML
您是否使用任何外部库（例如jQuery）？这将使编写答案变得容易得多。不要使用jQuery。它只是经典的ASP、HTML和JavaScript。您确定在按钮2的onclick处理程序中没有返回false吗？我怀疑您的点击处理程序中存在错误，或者返回false
@ElliottFrisch-请参阅上面的示例代码。没有返回错误。在我的示例中是否有代码之外的地方我应该查找？这通常不是首选的方式。与内联onclick
事件相比，更喜欢addEventListener。虽然我同意，但它遵循OP使用的模式
<html>
   <body>
      <form name="form1" action="x.html" method="get" onsubmit="alert('onsubmit javascript executed');">
         <br><br>
         <input type="submit" value="1. html input type submit">
         <br><br>
         <input type="button" value="2. html input type button with onclick" onclick="document.form1.submit();">
         <br><br>
         <button style="width:180px;margin-right:5px;height:30px" onclick="document.form1.submit();">
             3. html button with onclick
         </button>
      </form>
   </body>
</html>

<button onclick="formSubmitHandler()">Submit</button>

function formSubmitHandler() {
    // your code
    document.form1.submit();
}