javascript - 是否可以为带有操作的表单中的按钮添加 onclick？

Question

我正在尝试将 onclick 添加到带有操作的表单中的按钮。 这是一个用于订阅的 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);
}

Answer 1

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

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

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

将 onsubmit 事件绑定(bind)到 #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.