Question

我正在尝试将onclick添加到带有操作的表单中的button。这是一个用于订阅的mailchimp动作，所以在他点击按钮后会在新标签中转到mailchimp的成功页面，但是也希望在页面中显示带有消息的弹出警报/ div，是否可以同时使用？动作和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);
}

Answer 1

您最好使用正确的事件绑定而不是内联JavaScript。我将在Properly bind JavaScript events的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);
}

You can see it here.

Answer 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>

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

Answer 4

关于<input type="submit">按钮的问题是，在任何“onclick”代码运行完毕后，他们将始终提交表单，除非您不这样做。例如：

   onclick='someFunction(); return false'

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

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

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

Answer 5

对我有用的是代替使用button使用div并为其onclick 像这样：-

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

是否可以通过动作为表单中的按钮添加onclick？

5 个答案: