是否可以添加onclick按钮的形式与行动？

我正在尝试将onclick添加到button中，并采取措施。这是一个用于订阅的mailchimp动作，所以他点击按钮后会进入新选项卡的mailchimp成功页面，但也希望在页面中显示带有消息的弹出警报/ div，是否有可能都？行动和onclick为同一个提交按钮？是否可以添加onclick按钮的形式与行动？

任何想法如何做到这一点？

UPDATE

我的形式是这样的：

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

来源

2013-02-28 Abude

只是为了说清楚，你注入JS代码？如果是这样，这意味着您正在使用 – Alexander 2013-02-28 20:18:08

写onClick和在该函数内弹出后提交表单？ – hop 2013-02-28 20:19:17

我想在按钮中这样的事情：'onClick =“popUp（）;”'但不工作，只是形式的行动工作，它进入mailchimp的成功页面 – Abude 2013-02-28 20:19:22

您应该更好地使用适当的事件绑定，而不是内联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.

来源

2013-02-28 20:55:40 Alexander

所有你需要做的就是抓住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-28 20:22:22

不知道如何做到这一点，你可以更新你的答案来匹配我的示例代码吗？非常感谢！ – Abude 2013-02-28 20:34:49

请原谅我是否误解了你的问题。

<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 

}

这样，您就不必提交按钮添加一个事件处理程序。该功能将运行，你可以在那里做你的魔法或完全取消提交。它也可以防止一些竞争条件。

来源

2013-02-28 20:23:20

没有工作，我已经在问题 – Abude 2013-02-28 20:26:31

事情大约<input type="submit">按钮是，他们总是会提交表单立即后的任何“点击”代码已经完成运行，除非你不。例如：

onclick='someFunction(); return false'

在你的情况，你的“点击”的代码，只要它的显示到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-28 20:59:10 talemyn

中添加了一个弹出式div的提交。其实，我认为你误解了这个问题。他不想停止表单提交。另外，该页面有一个'_blank'目标 – Alexander 2013-02-28 21:04:03

不停，但是似乎他想延迟足够长的时间以使用户能够与弹出窗口交互。如果他不想在用户完成弹出窗口之后提交表单，那么他确实不应该在此之前发起提交。 – talemyn 2013-02-28 21:06:01

我想你应该澄清并确认在OP的问题中首先评论的方面。这是最好的行动，恕我直言 – Alexander 2013-02-28 21:07:03

是否可以添加onclick按钮的形式与行动？

回答

相关问题