0

我正在尝试添加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);
}
4

5 回答 5

2

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

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

<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);
}

在这里你可以看到它。

于 2013-02-28T20:55:40.960 回答
1

您所要做的就是捕捉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>
于 2013-02-28T20:22:22.080 回答
0

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

<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。该功能将运行，您可以在那里施展魔法或完全取消提交。它还可以防止一些竞争条件。

于 2013-02-28T20:23:20.177 回答
0

关于按钮的事情<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);
}

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

于 2013-02-28T20:59:10.963 回答
0

对我有用的是使用 div 和 onclick 来代替使用按钮，如下所示：-

<div onclick="popUp();">Send</div>
于 2020-04-03T18:06:25.913 回答