2

次のコードを書きましたが、JavaScript が見つからないかのようにフォームが投稿されますか?

コードは<head>ドキュメント内にあります：

<script language="JavaScript" type="text/javascript">
    $('.entrysend').click(function(e){
        e.preventDefault();

        var error = false;
        var name = $('#name').val();
        var address = $('#address').val();
        var phone = $('#phone').val();
        var email = $('#email').val();

        if(name.length == 0){
            var error = true;
            alert("Please complete all fields");
        }
        if(address.length == 0){
            var error = true;
            alert("Please complete all fields");
        }
        if(phone.length == 0){
            var error = true;
            alert("Please complete all fields");
        }
        if(email.length == 0){
            var error = true;
            alert("Please complete all fields");
        }

        if(error == false){
            $.post("compthanks.asp",
                    $(".entry").serialize(),
                    function(result){
                        if($.trim(result) == 'sent'){
                            $('.entrysend').remove();
                            alert("Thanks for entering!");
                        }
                    }
</script>

HTML:

<form class="entry" action="compthanks.asp" method="post" class="floatClear" name="entryForm">   
    <br class="floatClear" />
    <div class="formwrapper">
        <input name="name" id="name" type="text" placeholder="FullName" />
    </div>

    <div class="formwrapper">
        <textarea name="address" id="address" placeholder="Address" cols="20" rows="10"></textarea>
    </div>

    <div class="formwrapper">
        <input name="phone" id="phone" type="text" placeholder="ContactNumber" />
    </div>

    <div class="formwrapper">
        <input name="email" id="email" type="text" placeholder="Email" />
    </div>

    <div class="formwrapper floatClear">  
        <input name="submit" type="submit" value="Send Entry" class="entrysend" />
    </div>
</form>

javascriptが起動するのではなく、フォームがまだ送信される理由を誰か指摘できますか?

4

3 に答える 3

1

JS が<head>ページ内にある場合、これは機能しません。追加すると

$('.entrysend').click(function(e){...});

のクラスを持つ要素はentrysendまだページにありません。

これを修正するには、次の 2 つのオプションがあります。

  • <form>要素の後、ページの下部に JS を移動します。

  • JS をreadyハンドラーにラップします。

JS:

$(document).ready(function() {
    $('.entrysend').click(function(e){...});
});

このように、jQuery はすべての HTML が DOM に追加されるまで待機してから、entrysend要素にクリック ハンドラーをアタッチしようとします。

アップデート：

コードを jsFiddle に追加したところ、投稿したコードに JS エラーがあることがわかりました。単なるコピー/貼り付けエラーである可能性がありますが、問題の原因である可能性があります:

関数の半分を閉じることはありません。function最後のブロックを閉じるだけの 2 つの中かっこで終わります。)}})JS の andに追加する必要があります

  • A)閉じる$.post
  • A}閉じるif(error == false)
  • ハンドラー}で無名関数を閉じるためのAclick
  • A)クリック ハンドラを閉じる

新しい JS:

<script language="JavaScript" type="text/javascript">
    $(document).ready(function() {
        $('.entrysend').click(function(e){
            e.preventDefault();

            var error = false;
            var name = $('#name').val();
            var address = $('#address').val();
            var phone = $('#phone').val();
            var email = $('#email').val();

            if(name.length == 0){
                var error = true;
                alert("Please complete all fields");
            }
            if(address.length == 0){
                var error = true;
                alert("Please complete all fields");
            }
            if(phone.length == 0){
                var error = true;
                alert("Please complete all fields");
            }
            if(email.length == 0){
                var error = true;
                alert("Please complete all fields");
            }

            if(error == false){
                $.post("compthanks.asp", $(".entry").serialize(),function(result){
                    if($.trim(result) == 'sent'){
                        $('.entrysend').remove();
                        alert("Thanks for entering!");
                    }
                });
            }
        });
    });
</script>
于 2013-04-05T09:57:37.090 に答える
1

検証を onsubmit (フォーム上) ではなく onclick (ボタン上) で実行します - 検証が失敗した場合は false を返します

于 2013-04-05T09:41:31.827 に答える
0

//スクリプト

<script language="JavaScript" type="text/javascript">
        $('.entrysend').click(function(e){

        var error = false;
        var name = $('#name').val();
        var address = $('#address').val();
        var phone = $('#phone').val();
        var email = $('#email').val();

        if(name.length == 0){
                    var error = true;
                    alert("Please complete all fields");
                    return false;
                }
        if(address.length == 0){
                    var error = true;
                    alert("Please complete all fields");
                    return false;
                }
        if(phone.length == 0){
                    var error = true;
                    alert("Please complete all fields");
                    return false;
                }
        if(email.length == 0){
                    var error = true;
                    alert("Please complete all fields");
                }

        if(error == false){
                    $.post("compthanks.asp", $(".entry").serialize(),function(result){
                    if($.trim(result) == 'sent'){
                       $('.entrysend').remove();
                       alert("Thanks for entering!");
                    }
                }
        </script>

//フォーム

<form class="entry" action="compthanks.asp" method="post" class="floatClear" name="entryForm">   
        <br class="floatClear" />
        <div class="formwrapper">
          <input name="name" id="name" type="text" placeholder="FullName" />
        </div>

        <div class="formwrapper">
          <textarea name="address" id="address" placeholder="Address" cols="20" rows="10"></textarea>
        </div>

        <div class="formwrapper">
          <input name="phone" id="phone" type="text" placeholder="ContactNumber" />
        </div>

        <div class="formwrapper">
          <input name="email" id="email" type="text" placeholder="Email" />
        </div>

        <div class="formwrapper floatClear">  
          <input name="submit" type="button" value="Send Entry" class="entrysend" />
        </div>
        </form>

return false;フォームが送信されないように、エラーが発生した場合はコードとステートメントを変更しました。

于 2013-04-05T10:43:24.573 に答える