1

チェックボックスのステータスに応じて、複数のフォームを異なる場所に送信しようとしています。JavaScript はチェックボックスをオンにしてフォームを送信する必要がありますが、機能させることができません。

    <script type="text/javascript" charset="utf-8">
        function checkSubmit() {
            var frm1 = document.getElementById("optin1");
            var frm2 = document.getElementById("optin2");
            var frm3 = document.getElementById("optin3");
            var chkbox1 = document.getElementById("c1");
            var chkbox2 = document.getElementById("c2");
            var chkbox3 = document.getElementById("c3");
                if (chkbox1.checked === true) {
                    frm1.submit();
                        }
                else // it is not checked, dont submit form
                        {
                        return false;
                        }
                if (chkbox2.checked === true) {
                    frm2.submit();
                        }
                else // it is not checked, dont submit form
                        {
                        return false;
                        }
                if (chkbox3.checked === true) {
                    frm3.submit();
                        }
                else // it is not checked, dont submit form
                        {
                        return false;
                        }
setTimeout(function() {
window.location = 'http://url.com/index.php';
}, 1350);
    }
    </script>

ここにhtmlフォーム：

    <form id="optin1" name="f1" method="post" action="file1.php" target="iframe1">
    <input type="checkbox" id="c1" name="cc" value="" checked="checked">
    <label for="c1"><span></span><strong>YES, I'd love to join!</strong></label>
    <input name="email" type="hidden" value="<?=$_GET[email];?>"></form>

    <form id="optin2" name="f2" method="post" action="file2.php" target="iframe2">
    <input type="checkbox" id="c2" name="cc" value="" checked="checked">
    <label for="c2"><span></span><strong>YES, I'd love to join!</strong></label>
    <input name="email" type="hidden" value="<?=$_GET[email];?>">
    <input name="name" type="hidden" value="Newsletter"></form>

    <form id="optin3" name="f3" method="post" action="http://www.url.com" target="iframe3">
    <input type="checkbox" id="c3" name="cc" value="" checked="checked">
    <label for="c3"><span></span><strong>YES, I"d love to join!</strong></label>
    <input id="txtEmail1" class="field" name="txtEmail1" value="<?=$_GET[email];?>" type="hidden">
    <input type="hidden" value="18" name="webID">
    <input type="hidden" value="20" name="usd">
    <input type="hidden" value="25" name="lsvalue">
    <input type="hidden" value="http://url.com/thanks" name="thanxurl">
    <input type="hidden" value="http://url.com/confirm" name="confirmationurl"></form>
    <form name="Submit">
    <input name="btn1" type="image" onClick="checkSubmit()" src="images.jpg" align="left" /> 
    </form>
<iframe name="iframe1" style="display:none"></iframe>
<iframe name="iframe2" style="display:none"></iframe>
<iframe name="iframe3" style="display:none"></iframe>

フォームを送信すると、最初のフォームのみが送信されます。どうしたの？

4

4 に答える 4

1

単純に返すことは、フォームが JavaScript で送信されるのを防ぐ方法でfalseはありません。これは、 JS イベントがどのように機能するかを理解せずに jQuery を使用するように私が決して言わない理由の 1 つにすぎません。JS イベントについて読むには、非常に優れたサイトです。

作成した jQuery ハンドラーが false を返すと、イベントは停止し、それ以上バブリングまたは伝播しません。ただし、ネイティブ JS で false を返すと、イベントは引き続き伝播されます。この場合、デフォルトの動作はフォームの送信です。
完全な説明については、quirksmode に関するいくつかの記事を確認してくださいreturn false。

var e = arguments[0] || window.event;//quirksmode will tell you what this means
//instead of return false:
if (e.preventDefault)
{
    e.preventDefault();//clue is in the method's name
    e.stopPropagation();
}
e.returnValue = false;//this is for IE<9
e.cancleBubble = true;
return false;

ご覧のとおり、フォームの送信を停止するには、いくつかのことを行う必要があります。もちろん、開発者は「巧妙に怠け者」でなければならない、とよく言われるので、私はこれを行うために を拡張しEvent.prototypeて X ブラウザー メソッドを追加することがよくあります。私はそのコードをここに追加しました。それは受け入れられた答えです。

更新:
あなたのフィドルを調べた後、 chromiumでテストした後にフォークしました。動作していることがわかりました。すべてのチェックボックスを 1 つのフォームに ラップして、そのフォームを送信するだけの方がよいように感じます。チェックされていないチェックボックスはサーバーに送信されません。今でもこれが最も安全な方法です。いまだに JS を無効にする人もいます。 さらに、あなたの HTML は、メールで送信されるニュースレターのように見えます。電子メールでは JavaScript を使用できないことに注意してください。また、（誤って）php コードの行を貼り付けました。

<? if ($_GET[email]) { ?>

短いタグを使用していますが、おそらくこれは既にご存知でしょうが、短いタグは非推奨であり、近い将来に削除される予定です。使用できるタグは、完全なタグと短い echo-tag: のいずれかのみです。<?php<?=

とにかく、あなたの場合、次の行に沿ってhtmlを書きます：

<form method='POST' action='someScript.php'>
    <h3>George Hamilton: IM Newsletter for Professionals (AWEBER)</h3>
    <p>
        <a href="http://getfirefox.com/"><img src="images/man1.jpg" width="100" height="121" alt=""  class="float-left" /></a>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam,...
    </p>
    <p>
        <input type="checkbox" id="c1" name="cc" value="" checked="checked">
        <label for="c1">
            <span></span><strong>YES, I'd love to join!</strong>
        </label>
        <input name="email" type="hidden" value="<?=$_GET[email];?>">
    </p>
    <h3>Another checkbox</h3>
    <p>
        <a href="http://getfirefox.com/"><img src="images/man1.jpg" width="100" height="121" alt=""  class="float-left" /></a>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci ac convallis aliquam,...
    </p>
    <p>
        <input type="checkbox" id="c2" name="cc2" value="" checked="checked">
        <label for="c2">
            <span></span><strong>YES, I'd love to join!</strong>
        </label>
    </p>
    <!-- @the end of the checkboxes -->
    <input type="submit" value="sumbit image" id="foobar"/>
</form>

この場合、JS 検証スクリプトはまったく必要ありません。チェックされているすべてのチェックボックスがサーバーに送信されます。ただし、名前属性が一意であることを確認する必要があります. ) そして、前に言ったように、フォームを送信するために JS に頼る必要はありません。

于 2013-01-22T12:00:26.170 に答える
0

JavaScript 関数は次のようになります。

    function checkSubmit() {
        var frm1 = document.getElementById("optin1");
        var frm2 = document.getElementById("optin2");
        var frm3 = document.getElementById("optin3");
        var chkbox1 = document.getElementById("c1");
        var chkbox2 = document.getElementById("c2");
        var chkbox3 = document.getElementById("c3");
            if (chkbox1.checked === true) {
               frm1.submit();
                    }

           else if (chkbox2.checked === true) {
              frm2.submit();
                    }

           else if (chkbox3.checked === true) {
              frm3.submit();
                    }
      else {
        return false;
      }   
  setTimeout(function() {
   window.location = 'http://url.com/index.php';
  }, 1350);
 }
}
于 2013-01-22T11:51:36.247 に答える
0

主な問題はあなたのelse条件です。最初のチェックボックスがチェックされていない場合は、return falseすぐに関数を終了し、他のifステートメントがまったく実行されなくなります。

チェックボックスがどれもチェックされていないreturn場合にのみコードを変更する必要があります（または、それらのステートメントの後に常に戻るだけで、おそらく問題にはなりません）。if

于 2013-01-22T11:43:38.040 に答える
0

Chrome/Firefox で URL を実行して、firebug からデバッグしてみてください。

于 2013-01-22T12:05:57.517 に答える