是否可以添加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按鈕的形式與行動？

回答

相關問題