AJAXを使用してPHPフォームの提出後に成功メッセージを表示

Question

ブートストラップモーダルにニュースレターを登録しました。

私が達成しようとしているのは、クライアントが電子メールを送信したときに、新しいページにリダイレクトせずに同じページのすぐ下のモーダルに成功メッセージを与える必要がある場合です。

私はAJAXを新しく使いました。ここで

は私のHTMLコードは

<form form id="form1" name="form1" method="post" action="process.php"> 
    <div class="input-group"> 
     <input class="btn btn-lg" name="email" id="email" type="email" placeholder="Your Email" required/> 
     <button type="submit" class="button">Submit</button> 
    </div> 
</form> 

れており、以下

/* Database config */ 
$db_host = 'localhost'; 
$db_user = 'root'; 
$db_pass = ''; 
$db_database = 'maxipakdb'; 
/* End config */ 

$mysqli = new mysqli($db_host, $db_user, $db_pass, $db_database); 

/* check connection */ 
if (mysqli_connect_errno()) { 
    printf("Connect failed: %s\n", mysqli_connect_error()); 
} 

$email = $_POST['email']; 

// Perform queries 

mysqli_query(
    $mysqli, 
    "INSERT INTO maxipaktable (id,email) VALUES (NULL,'$email')" 
); 

echo $email; 

Answer 1

は、このリンクをチェックしprocess.phpです：https://api.jquery.com/jquery.post/ のAjax Postメソッドは、何が必要ですし、それが実際に理解することは非常に簡単です。

Answer 2

フォーム名、アクションをhtmlから削除します。

<form form id="form1"> 
    <div class="input-group"> 
     <input class="btn btn-lg" name="email" id="email" type="email" placeholder="Your Email" required/> 
     <button type="submit" class="button">Submit</button> 
    </div> 
</form> 

<!-- The result of the success message rendered inside this div --> 
<div id="result"></div> 

/*あなたのボタンは、あなたの成功のモーダルを入れ、手動でAJAXなし

秒を提出するために防ぐために<button onclick='javascript:ajaxpost();'>Submit</button>に提出変更、フォーム*/

$(document).ready(function() { 
$("#form1").submit(function(event) { 
     var ajaxRequest; 

     /* Stop form from submitting normally */ 
     event.preventDefault(); 

     /* Clear result div*/ 
     $("#result").html(''); 

     /* Get from elements values */ 
     var values = $(this).serialize(); 

     /* Send the data using post and put the results in a div */ 
     /* I am not aborting previous request because It's an asynchronous request, meaning 
      Once it's sent it's out there. but in case you want to abort it you can do it by 
      abort(). jQuery Ajax methods return an XMLHttpRequest object, so you can just use abort(). */ 
      ajaxRequest= $.ajax({ 
       url: "process.php", 
       type: "post", 
       data: values 
      }); 

      /* request cab be abort by ajaxRequest.abort() */ 

     ajaxRequest.done(function (response, textStatus, jqXHR){ 
       // show successfully for submit message 
       $("#result").html('Submitted successfully'); 
     }); 

     /* On failure of request this function will be called */ 
     ajaxRequest.fail(function(){ 

      // show error 
      $("#result").html('There is error while submit'); 
     }); 

     }); 

Answer 3

最初にハンドラを提出アタッチid付きブートストラップ（例：id = modalnl）

第3に、以下のコードを自分のhtmlファイルに入れます

function ajaxpost(){ 
    $.ajax({ 
     url: "process.php", 
     type: 'POST', 
     data: $('#form1').serialize(), 
     error: function(xhr, status, error) { 
      var err = eval("(" + xhr.responseText + ")"); 
      alert(err.Message); 
     }, 
     success: function(data){ 
      $('#modalln').show(); 
     } 
    }); 
} 

Answer 4

**Here is code for ajax. Remove action** 
<form form id="form1" name="form1" method="post"> 
    <div class="input-group"> 
     <input class="btn btn-lg" name="email" id="email" type="email" placeholder="Your Email" required/> 
     <button type="submit" class="button" id="contactform">Submit</button> 
    </div> 
</form> 
<script type="text/javascript"> 
$("#form1").submit(function(e) { 
    $.ajax({ 
     type: "POST", 
     url: process.php, 
     data: $("#contactform").serialize(), // serializes the form's elements. 
     success: function(data) 
     { 
      $("#form1").html("<p>Thank you</p>"); 
     } 
     }); 
    e.preventDefault(); // avoid to execute the actual submit of the form. 
}); 
</script>