0

アクション付きのフォームに追加しようとして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);
}
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

ボタンの重要な点は、「onclick」コードの実行が終了した直後に、実行しない場合を除いて、<input type="submit">常にフォームを送信することです。例：

   onclick='someFunction(); return false'

あなたの状況では、「onclick」コードはポップアップを作成して表示していますが、表示されるとすぐにフォームが送信され、ページはmailchimpページに移動します。

PolyWhirl氏が提案したのは、<input type="button">代わりに要素を使用することです。これらのボタンは、指示するまで実際には何もしません。form.submit();これにより、送信を実行したい場所を含むJS機能を構築できます。

あなたのコードに基づいて、私はあなたがこのようなものが欲しいと思います：

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 に答える