Показать сообщение об успешном завершении после отправки формы PHP с использованием AJAX

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> 

И ниже process.php

/* 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

Проверить эту ссылку: 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> 

/* Прикрепление представить обработчик формы */

$(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

первым, изменение ваша кнопка представляет <button onclick='javascript:ajaxpost();'>Submit</button>, чтобы предотвратить для вручную представить без AJAX

секунду, положить ваш успех модальной bootstrap с id (например, id = modalnl)

третьих, поставьте коды ниже в ваш файл 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>