是否可以为带有动作的表单中的按钮添加 onclick？答案

【问题标题】：is it possible to add onclick for a button in a form with action?是否可以为带有动作的表单中的按钮添加 onclick？
【发布时间】：2020-04-04 02:06:25
【问题描述】：

我正在尝试将onclick 添加到具有操作的表单中的button。这是一个用于订阅的mailchimp操作，所以在他点击按钮后会在一个新选项卡中进入mailchimp的成功页面，但也希望在页面中显示一个带有消息的弹出警报/div，是否可以同时拥有?同一个提交按钮的action和onclick？

有什么方法可以制作这个吗？

更新

我的表单如下所示：

<form action="/" method="post" name="form" target="_blank">
    <h3><span>Subscribe to Newsletter</span></h3>
    <p class="email_first">
        <label for="email">Your Email</label>
        <input id="EMAIL" class="email" type="email" name="EMAIL" value="Your Email Address:" size="30" />
    </p>
    <p class="submit"><button type="submit">Send</button></p>
</form>

JavaScript

function popUp(){
    var popup = document.createElement('div');
    popup.className = 'popup';
    popup.id = 'test';
    var cancel = document.createElement('div');
    cancel.className = 'cancel';
    cancel.innerHTML = 'close';
    cancel.onclick = function (e) { popup.parentNode.removeChild(popup) };
    var message = document.createElement('span');
    message.innerHTML = "This is a test message";
    popup.appendChild(message);                                    
    popup.appendChild(cancel);
    document.body.appendChild(popup);
}

【问题讨论】：

澄清一下，你是在注入JS代码吗？如果是这样，这意味着您正在使用
如何编写 onClick 并在弹出后在该函数中提交表单？
我在按钮中尝试这样的事情：onClick="popUp();" 但不起作用，只是表单的动作起作用了，它进入了 mailchimp 的成功页面
是的，有可能。但是，您需要绑定一个事件，而不是添加 onclick 属性。
@hop 是的，这将是很好的先显示弹出窗口然后提交表单，如何？谢谢！

标签： javascript jquery

【解决方案1】：

您应该更好地使用正确的事件绑定而不是内联 JavaScript。我将从Properly bind JavaScript events借用JavaScript中的事件绑定函数。

为简单起见，我在form 元素中添加了一个id 属性。

<form id="form" action="/" method="post" name="form" target="_blank">
  ...
</form>

将onsubmit 事件绑定到#form 元素。

window.onload = function() {
    var popUp = function() {
        ...
    };
    var bindEvent = function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else {
            element.attachEvent('on' + type, handler);
        }
    };
    bindEvent(document.getElementById("form"), "submit", popUp);
}

You can see it here.

【讨论】：

【解决方案2】：

您所要做的就是捕捉onSubmit() 事件并停止传播。这样你就可以调用你自己的函数，在你的逻辑/验证之后，可以提交表单。

<html>
  <head>
  <script type="text/javascript">
    function handleFormSubmit(form) {
      popUp();
      form.submit();
    }

    function popUp() {
      alert("This is a test message");
    }
  </script>
  </head>
  <body>
    <form action="/" method="post" name="form" target="_blank"
          onSubmit="handleFormSubmit(this); return false;">
      <h3><span>Subscribe to Newsletter</span></h3>
      <p class="email_first">
        <label for="email">Your Email</label>
        <input id="EMAIL" class="email" type="email"
               name="EMAIL" value="Your Email Address:" size="30" />
      </p>
      <p class="submit"> <input type="submit" value="Send"/> </p>
    </form>
  </body>
</html>

【讨论】：

不明白该怎么做，你能更新你的答案以匹配我的示例代码吗？非常感谢！

【解决方案3】：

如果我误解了你的问题，请原谅。

<form id="whatever" name="someform" action="/something" autocomplete="off" onsubmit="return doSomethingFunc(this);">

在那个函数中：

function doSomethingFunc(){
     // add whatever behavior you want here
     // if something fails, add return false; to cancel submission

}

这样，您不必在提交按钮上添加 eventHandler。该功能将运行，您可以在那里施展魔法或完全取消提交。它还可以防止一些竞争条件。

【讨论】：

没用，我在问题中添加了带有弹出 div 的 onsubmit

【解决方案4】：

<input type="submit"> 按钮的特点是，它们总是会在任何“onclick”代码完成运行后立即提交表单，除非您不这样做。示例：

   onclick='someFunction(); return false'

在您的情况下，您的“onclick”代码正在构建一个弹出窗口并显示它，但是一旦显示，表单就会提交并且页面移动到 mailchimp 页面。

PolyWhirl 先生的建议是改用<input type="button"> 元素。在您告诉它们之前，这些按钮实际上不会做任何事情。这允许您构建一些 JS 功能，包括 form.submit(); 在您希望提交发生的任何地方。

根据您的代码，我认为您想要这样的东西：

HTML

<form action="/" method="post" name="form" target="_blank">
   <h3><span>Subscribe to Newsletter</span></h3>
   <p class="email_first">
      <label for="email">Your Email</label>
      <input id="EMAIL" class="email" type="email" name="EMAIL" value="Your Email Address:" size="30" />
   </p>
   <input type="button" value="Send" onclick="popup();/>
</form>

JavaScript

function popUp() {
   var popup = document.createElement('div');
   popup.className = 'popup';
   popup.id = 'test';

   var cancel = document.createElement('div');
   cancel.className = 'cancel';
   cancel.innerHTML = 'close';
   cancel.onclick = function (e) {
      popup.parentNode.removeChild(popup);
      form.submit();
   };

   var message = document.createElement('span');
   message.innerHTML = "This is a test message";

   popup.appendChild(message);                                    
   popup.appendChild(cancel);
   document.body.appendChild(popup);
}

编辑：而且，是的，正确的绑定在这里很重要，但真正的问题是您试图停止提交足够长的时间以显示弹出窗口并让用户确认他们的操作。做到这一点的最好方法实际上是，在你准备好之前不要采取行动。在这种情况下，即在用户在弹出窗口中确认之后。

【讨论】：

实际上，我认为您误解了这个问题。他不想停止表单提交。此外，该页面有一个_blank 目标
没有停止，但似乎他想延迟足够长的时间让用户能够与弹出窗口进行交互。如果他不希望在用户完成弹出窗口之前提交表单，那么他真的不应该在此之前启动提交。
我认为您应该首先在 OP 的问题中评论并确认该方面。这是最好的做法，恕我直言
啊，我错过了_blank。 . .也许我误解了他在问什么。 . .
@Alexander - 我真的很想这样做，但代表人数为 40，我还不能发表评论。 ://

【解决方案5】：

对我有用的是使用 div 和 onclick 代替按钮像这样：-

<div onclick="popUp();">Send</div>

【讨论】：