2016-11-15 16 views
0

テンプレートからクライアントのニーズに合わせてページを調整しています。このページには、AJAXを介してPHPファイルに検証されて投稿される2つの連絡先フォームがあります。 1つはすぐに使用できますが、もう1つは拡張してより多くのフィールドを含めることができ、関連するjQuery関数を正常に動作させることができませんでした。jQuery AJAXフォームの問題

この機能は、HTMLの「投稿」のネイティブ機能を無効にしていますが、実際にはAJAXリクエスト(コンソールを見て)にはなりません。

私は関数のこの全体の混乱を書き直したくありません。私がこのことを書いていたら、私は機能をオーバーライドしただけです。

$(document).ready(function() { 
 
    $("#subscribe").submit(function() { 
 
    $("#subscribe .error").remove(); 
 
    var s = !1; 
 
    if ($(".requiredField").each(function() { 
 
     if ("" == jQuery.trim($(this).val())) { 
 
     { 
 
      $(this).prev("label").text() 
 
     } 
 
     $(this).parent().append('<span class="error">This field is required</span>'), $(this).addClass("inputError"), s = !0 
 
     } else if ($(this).hasClass("email")) { 
 
     var r = /^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/; 
 
     if (!r.test(jQuery.trim($(this).val()))) { 
 
      { 
 
      $(this).prev("label").text() 
 
      } 
 
      $(this).parent().append('<span class="error">Invalid email address</span>'), $(this).addClass("inputError"), s = !0 
 
     } 
 
     } 
 
    }), !s) { 
 
     $("#subscribe input.submit").fadeOut("normal", function() { 
 
     $(this).parent().append("") 
 
     }); 
 
     var r = $(this).serialize(); 
 
     $.post($(this).attr("action"), r, function() { 
 
     $("#subscribe").slideUp("fast", function() { 
 
      $(this).before('<div class="success">Your email was sent successfully.</div>') 
 
     }) 
 
     }) 
 
    } 
 
    return !1 
 
    }) 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="contact.php" id="subscribe" method="post" name="send"> 
 
    <span class="input input--kuro"> 
 
    <input class="subscriberequiredField input__field input__field--kuro" id="name" name="name" type="text"> 
 
    <label class="input__label input__label--kuro" for="subscribeemail"> 
 
     <span class="mail input__label-content input__label-content--kuro">Name</span> 
 
    </label> 
 
    </span> 
 
    <span class="input input--kuro"> 
 
    <input class="subscriberequiredField input__field input__field--kuro" id="company" name="company" type="text"> 
 
    <label class="input__label input__label--kuro" for="subscribeemail"> 
 
     <span class="mail input__label-content input__label-content--kuro">Company</span> 
 
    </label> 
 
    </span> 
 
    <span class="input input--kuro"> 
 
    <input class="subscriberequiredField subscribeemail input__field input__field--kuro" id="email" name="email" type="text"> 
 
    <label class="input__label input__label--kuro" for="subscribeemail"> 
 
     <span class="mail input__label-content input__label-content--kuro">Email</span> 
 
    </label> 
 
    </span> 
 
    <span class="input input--kuro"> 
 
    <input class="subscriberequiredField input__field input__field--kuro" id="idea" name="idea" type="text"> 
 
    <label class="input__label input__label--kuro" for="subscribeemail"> 
 
     <span class="mail input__label-content input__label-content--kuro">The game-changing idea</span> 
 
    </label> 
 
    </span> 
 
    <span> 
 
    <button class="submit-button" id="submit" type="submit">Subscribe</button> 
 
    </span> 
 
</form>

+7

このような長い質問を提出します。 –

+1

'return!1' ...? –

+1

ブラウザの開発者ツールでAJAXリクエスト/レスポンスを見たことがありますか?エラーが報告されていますか? –

答えて

0

あなたはこれを変更する必要があります。この中

$("#subscribe").submit(function() { 

私はplunkerでコードを変更した
$("#subscribe").on('click', (function() {