0

デフォルトでphp uri_requestで送信するフォームがあります。今、フォームを送信するために ajax 呼び出しを追加しようとしましたが、まだ php で送信しています。フォームを送信するための ajax 呼び出しは次のとおりです。

$(document).ready(function() {
    $("#contactform").submit(function(e) {
        e.preventDefault();
    });
    $.ajax({
        cache: false,
        type: 'POST',
        data: ("#contactform").serialize(),
        url: 'formfiles/submit.php',
        // for ajax the submit.php is on a             
        success: function() {
            // separate page 
            $('#contactform').fadeOut(200).submit();
            $('#success').delay(200).fadeIn(200);
        }
    });
    return false;

});

HTMLフォームの属性は次のとおりです。

<form action="#n" class="active" method="post" name="contactform" id="contactform">

また、

 e.preventDefault

ajax 呼び出しの開始時には機能しませんが、ajax がなければ機能します (デフォルトの防止のみ!)

コードの何が問題になっていますか? うまくいかないのはなぜですか？

助けてくれてありがとう

ここでの編集 はhtmlです{インクルードファイル内（ホールサイトはphp動的構造です）}

<form action="#n" class="active" method="post" name="contactform" id="contactform">

<div class="column">
    <div class="obb" style="<?php echo $color[11];?>">
                    All fields are mandatory
                    </div>
      <div >
<label style="<?php echo $color[0]; ?>"> Name:</label>
    <input class="con_campo required" name="name" value="" id="name" type="text" />

        </div>
        <div >
          <label style=""><?php echo $color[8]; ?>&nbsp;</label>                                                    

  </div>
<div class="fieldcontent prod" id="pr">
                   <label style="">&nbsp;<?php echo $color[2]; ?></label>
<select name="prod" value="" id="products" class="selectx required">
  <option  value=""> -- Select -- </option>
  <option value="1"> ITA</option>
 <option value="2">DE</option>
 <option value="3"> FR</option>
 <option value="4">EN</option>

  </select>

                </div>
            <div class="fieldcontent prod" id="in">
                <label style="<?php echo $color[4]; ?>"> Address:</label>
<input name="address" value="" id="address" class="required" type="text"     />

                        </div>
                         <div class="fieldcontent prod" id="ci">
                        <label style="<?php echo $color[6]; ?>"> City:</label>
   <input name="city" value="" id="city" class="con_campo required" type="text" />

                       </div>
                        <div class="fieldcontent info help" id="me" >
                          <label style="<?php echo $color[10]; ?>">Message:</label>
<textarea id="message" name="message" value="" class="cs_comment required" ></textarea>

                        </div>
                        <div id="code" style="margin-bottom:25px;">
     <label style="<?php echo $color[11]; ?>; width:340px;"></label> 
<input type="text" name="code" class="chapta" size="10" maxlength="7" id="code"/>

                        </div>
            </div>
<div class="column" >
                 <div class="obb">&nbsp;</div>
<div class="fieldcontent prod" id="co">
    <label style="<?php echo $color[1]; ?>">Surname:</label>
<input name="surname" value="" id="surname" class=" required" type="text"/>

            </div>
            <div >
<label style="<?php echo $color[9]; ?>">Email: </label>
<input name="email" value="" id="email" class=" required email" type="text" />

</div>
 <div class="fieldcontent help prod" id="do">
<label style="<?php echo $color[3]; ?>">Domain:</label>
            <span style="font-size:20px; margin-left:30px;"> http://</span>
<input name="domain"  id="domain" class=" required" type="text" value="" />

            </div>
                        <div class="fieldcontent prod" id="re">
    <label style="<?php echo $color[5]; ?>">Region:</label>
   <input name="region" value="" id="region" class=" required" type="text" />

                        </div>
               <div class="fieldcontent prod" id="pa">
<label style="<?php echo $color[7]; ?>" >State:</label>
<input name="state" value="" id="state" class="con_campo required" type="text" />

                        </div>
                    </div>

                  <div>
        <div class="bottom">

<input type="submit" id="submitButton" name="submit" value="submit" />
                        &nbsp;<br /><br /><br />&nbsp;

        </div>
                </form>
 </div></div>

<script> 
$(document).ready(function() {
$("#contactform").submit(function(e){
    $.ajax({
        cache: false,
        type: 'POST',
        data: $("#contactform").serialize(),
        url : 'formfiles/submit.php',   // for ajax the submit.php is on a             
        success: function() {            // separate page 
            $('#contactform').fadeOut(200).submit();
            $('#success').delay(200).fadeIn(200);
        }
    }); 
  });
 });

4

2 に答える 2

0

以下のように、コードを再構築して問題を修正できます。面倒なreturn false;ので必要ありません。e.preventDefault();

$(document).ready(function () {

    $("#contactform").submit(function (e) {

        e.preventDefault();

        $.ajax({
            cache: false,
            type: 'POST',
            data: $("#contactform").serialize(), //note that $ mark is added
            url: 'formfiles/submit.php', // for ajax the submit.php is on a             
            success: function () { // separate page 
                $('#contactform').fadeOut(200).submit();
                $('#success').delay(200).fadeIn(200);
            }
        });

    });


});
于 2013-03-25T17:31:49.063 に答える
0

行の ajax 呼び出しにエラーがありますdata: ("#contactform").serialize()。そのはず data: $("#contactform").serialize()

これを試して ：

$(document).ready(function() {
    $("#contactform").submit(function(e){
        $.ajax({
            cache: false,
            type: 'POST',
            data: $("#contactform").serialize(),
            url : 'formfiles/submit.php',   // for ajax the submit.php is on a             
            success: function() {            // separate page 
                $('#contactform').fadeOut(200).submit();
                $('#success').delay(200).fadeIn(200);
            },
            error: function(error_response){
               console.log(error_response);
            }
        }); 
    });
});

アップデート ：

あなたのコードにいくつか問題があります。

  1. 必要な jQuery ライブラリがロードされていますか? 貼り付けたhtmlには表示されません。ヘッダーなどに含めていただければ幸いです。
  2. e.preventDefault ();入力タイプが であるため、フォームのデフォルト アクションを防止するためにを追加しますsubmit。これを指定しない場合、フォームはデフォルトの方法で送信されます。

  3. scriptタグが閉じているようには見えません。タグを閉じる必要がありscriptます。そうしないと機能しません。以下の更新されたコードを参照してください。

    <script type="text/javascript">
   $(document).ready(function() {
    $("#contactform").submit(function(e){
        e.preventDefault();
        $.ajax({
            cache: false,
            type: 'POST',
            data: $("#contactform").serialize(),
            url : 'formfiles/submit.php',   // for ajax the submit.php is on a             
            success: function() {            // separate page 
                $('#contactform').fadeOut(200).submit();
                $('#success').delay(200).fadeIn(200);
            }
        }); 
    });
   });
</script>

新しいアップデート

ここで、ajax 呼び出しはデータを返しません。そのため、サーバーは呼び出しが成功したかどうかを認識せず、常に成功関数に移動します。そのため、応答が成功かどうかを確認する必要があります。PHP ページからsuccess、検証またはフォームの送信とその処理が成功したかどうかを示すような文字列を返すか、そうでない場合はエラーを返します。また、成功のコールバックでは、フォームを再度送信しているため、これは終わりのないループとして続行されます。

以下の変更を行ってください。

<script type="text/javascript">
   $(document).ready(function() {
    $("#contactform").submit(function(e){
        e.preventDefault();
        $.ajax({
            cache: false,
            type: 'POST',
            data: $("#contactform").serialize(),
            url : 'formfiles/submit.php',   // for ajax the submit.php is on a             
            success: function(response) {            // separate page 
                if (response == 'success') {
                  //write what you want to do on success
                    $('#success').delay(200).fadeIn(200);
                } else {
                  //show error
                }
            }
        }); 
    });
   });
</script>

お役に立てれば

于 2013-03-25T17:32:47.983 に答える