2016-08-30 8 views
0

私がsubmit(modalフォームボタン)をクリックすると、明らかにXMLHttpRequestは2倍、3倍、4倍などになります。クリックしてモーダルを閉じてからもう一度私達に連絡すれば、奇妙なことが起こります。私は本当にあなたの助けが必要です。ajaxでデータをPHPに送信

私が欲しい:私が提出]をクリックすると、AJAXのものは、モーダル閉じをやっていると私はそれらのいまいましい問題

HTMLファイル与えることなく、再びお問い合わせをクリックすることができます:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title></title> 

<link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script> 

</head> 
<body> 
    <div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary">Contact us</a></p></div> 
    <!-- model content --> 
    <div id="form-content" class="modal hide fade in" style="display: none; "> 
      <div class="modal-header"> 
        <a class="close" data-dismiss="modal">×</a> 
        <h3>Contact us</h3> 
      </div> 
     <div> 
      <form class="contact"> 
      <fieldset> 
       <div class="modal-body"> 
        <ul class="nav nav-list"> 
       <li class="nav-header">Name</li> 
       <li><input class="input-xlarge" value=" krizna" type="text" name="name"></li> 
       <li class="nav-header">Email</li> 
       <li><input class="input-xlarge" value=" us[email protected]" type="text" name="Email"></li> 
       <li class="nav-header">Message</li> 
       <li><textarea class="input-xlarge" name="sug" rows="3"> Thanks for the article and demo 
       </textarea></li> 
       </ul> 
       </div> 
      </fieldset> 
      </form> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-success" id="submit">submit</button> 
      <a href="#" class="btn" data-dismiss="modal">Close</a> 
     </div> 
    </div> 


    <script> 
    $(function() { 
    //twitter bootstrap script 
    $("button#submit").click(function(){ 
      $.ajax({ 
      type: "POST", 
     url: "process.php", 
     data: $('form.contact').serialize(), 
      success: function(msg){ 
        $("#thanks").html(msg) 
       $("#form-content").modal('hide'); 
       }, 
     error: function(){ 
      alert("failure"); 
      } 
       }); 
    }); 
    }); 
    </script> 

PHPファイル:

<?php 
    if (isset($_POST['name'])) { 
    $name = strip_tags($_POST['name']); 
    $email = strip_tags($_POST['Email']); 
    $sug = strip_tags($_POST['sug']); 
    echo "Name  =".$name."</br>"; 
    echo "Email  =".$email."</br>"; 
    echo "Message  =".$sug."</br>"; 
    echo "<span class='label label-info' >your message has been submitted .. Thanks you</span>"; 
    header("Location: test.php"); 
} 
+0

さてあなたは自分のjqueryのはあまり.. – Naruto

+0

が完了を教えていないため、一部のHTMLコードを表示する必要があります。..私は自分の投稿を編集しました。 – Cesar

+0

クリックごとに 'ready'と' click'にバインドするのはなぜですか? –

答えて

0

I実際の問題が何であるかは完全にはわかりませんが、ここでは編集したオリジナルの投稿に基づいてAJAXでデータを送受信するためのソリューションです。

ご覧のとおり、いくつかの変更を加えました。プレーンテキストとしてそれらをエコーするのではなく、データとサーバの間でデータを交換する際には非常に便利なJSON形式にエンコードしました。私はまた、メッセージと一緒にhtmlを返すことを望んでいなかったので、私はHTML部分に移動しました。

うまくいけば、これはなんとなく役に立ちました。

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 

    <link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
    <script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script> 

</head> 
<body> 
    <div id="thanks"> 
    <span class='label label-info feedback'></span> 
    <p><a data-toggle="modal" href="#form-content" class="btn btn-primary">Contact us</a></p> 
    </div> 
    <!-- model content --> 
    <div id="form-content" class="modal hide fade in" style="display: none; "> 
    <div class="modal-header"> 
     <a class="close" data-dismiss="modal">×</a> 
     <h3>Contact us</h3> 
    </div> 
    <div> 
     <form class="contact"> 
     <fieldset> 
     <div class="modal-body"> 
      <ul class="nav nav-list"> 
      <li class="nav-header">Name</li> 
      <li><input class="input-xlarge" value=" krizna" type="text" name="name"></li> 
      <li class="nav-header">Email</li> 
      <li><input class="input-xlarge" value=" [email protected]" type="text" name="Email"></li> 
      <li class="nav-header">Message</li> 
      <li><textarea class="input-xlarge" name="sug" rows="3"> Thanks for the article and demo 
      </textarea></li> 
      </ul> 
     </div> 
     </fieldset> 
    </form> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn btn-success" id="submit">submit</button> 
    <a href="#" class="btn" data-dismiss="modal">Close</a> 
</div> 
</div> 
</body> 
</html> 

JS

<?php 
if(isset($_POST['name'])) { 
    $data = []; 

    $name = strip_tags($_POST['name']); 
    $email = strip_tags($_POST['Email']); 
    $sug = strip_tags($_POST['sug']); 

    $data['name'] = $name; 
    $data['email'] = $email; 
    $data['sug'] = $sug; 
    $data['message'] = "Your message has been submitted. Thank you!"; 

    echo json_encode($data); 
} 
関連する問題