0

というわけで、お問い合わせフォームを作っています。フォームが送信されたら、Bootstrap モーダルに成功またはエラー メッセージを追加したいと考えています。

フォームを送信してモーダルを開くボタンを次に示します。

<input class="btn btn-info" type="submit" value="Submit" name="Submit" data-toggle="modal" href="#contactModal"/>

ボタンをクリックすると、フォームが送信され、モーダルが開きます。successスクリプト上またはスクリプトのモーダルにテキストの文字列を動的に追加する方法はありfailureますか?

現在の PHP の成功/失敗アクションは次のとおりです。

if ($success){
print "<meta http-equiv="refresh" content="0;URL=contactthanks.html">";
}
else{
  print "<meta http-equiv="refresh" content="0;URL=error.html">";
}

<meta>しかし、ページをリダイレクトするタグを追加する代わりに、モーダルにコンテンツを追加したい

ここにモーダルコードがあります

<div id="contactModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Thanks!</h3>
  </div>
  <div class="modal-body">
    <p>I'm pretty busy sometimes but I'll try my best to message you back <strong>ASAP</strong>!</p>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div>

では、ページを更新したりリダイレクトしたりせずに、モーダル内printの内部に移動するにはどうすればよいでしょうか?<div>

私は PHP や AJAX をまったく知りませんし、JS や jQuery を始めたばかりでもありません (正確には 2 日かかります)。

4

1 に答える 1

4

フォームを送信できず、ページが更新されません。最も可能性が高いのは、代わりに AJAX リクエストを php に使用することです。これにより、成功/失敗のステータスが JSON として返されます。これを使用して、javascript を使用して div に条件付きでコンテンツを追加します。

フォームの代わりに、 someFunction が AJAX 呼び出しを行う場所で法線<input type="button" />を使用するだけです。onclick="someFunction"

jQuery を使用する必要があります。

あなたのphpは次のようになります

//do something with submitted values

if ($success){
    echo json_encode(True);
}
else{
    echo json_encode(False);
}

AJAX呼び出しは次のようになります

$.ajax({
    type: "POST",
    url: "dosomething.php",
    data: { formValue1 = <get value using jquery>, etc... }
    dataType: "json",
    success: processData,
    error: function(){ alert("failed"); }
});

function processData(data)
{
    if(data) {
        $("div#divid").html("what you want to add inside the div");
    }
}
于 2013-05-15T02:42:08.053 に答える