PHP - отправить форму без выхода из страницы - PullRequest
Новая
       3

PHP - отправить форму без выхода из страницы

0 голосов
/ 16 апреля 2020

В форме ввода данных мне бы хотелось, чтобы при нажатии на кнопку «Отправить» она не покидала страницу, на которой находится форма.

При отправке форума всплывающее окно отображается с информацией для пользователя о том, что форма была отправлена!

При поиске я знаю, что существует AJAX, но я не знаю, как реализовать его полностью. Я PHP новичок, я хотел бы, чтобы кто-нибудь помог мне с этим!

Извините, мой английский sh!

HTML: 

<form action="php/newsletter.php" method="post" class="formulario">
                <input type="text" name="email" placeholder="Email" required>
              </div>
            <div class="ss-item-required" style="text-align:center;">
              <button type="submit" class="site-btn">Send</button>
            </div>
          </form>

PHP: 

  <?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "DB";
$conexao = new mysqli($servername, $username, $password, $dbname);
if ($conexao->connect_error) {
    die("Erro na conexão: " . $conexao->connect_error);
}
if (!$conexao) {
    die("Erro de ligação: " . mysqli_connect_error());
}
$sql = "INSERT INTO newsletter (email) VALUES ('email')";
if (mysqli_query($conexao, $sql)) {
    echo '<div id="form-submit-alert">Submitted!</div>'; 
} else {
    echo "Erro: " . $sql . "<br>" . mysqli_error($conexao);
}
?>

Ответы [ 4 ]

3 голосов
/ 16 апреля 2020

С помощью Ajax вы можете вызвать запрос html и сделать что-нибудь с кодом возврата.

Например, вы можете перехватить форму отправки и создать на месте запрос ajax. Этот ajax запрос вызывает вашу функцию php и получает результат для отображения / обновления некоторых данных на странице без перезагрузки всех html.

https://api.jquery.com/jquery.ajax/

 <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 </head> 


<form action="php/newsletter.php" method="post" class="formulario">
     <input type="text" name="email" placeholder="Email" required>
     <div class="ss-item-required" style="text-align:center;">
          <button type="submit" class="site-btn">Send</button>
     </div>
</form>

<script>
jQuery(document).ready(function() {

    let form = $('body').find('form');
    $(form).submit(function(e){

            e.preventDefault();
            e.stopPropagation();
            var formData = new FormData($(form)[0]); // serialize form data

            $.ajax({
               type:"POST",
               url:$(form).attr('action'), // use your form action as ajax url
               data:formData,
               contentType: false,
               processData: false,

               success: function(response){

                // test if response is json array or html content
                var is_JSON = true;
                try{ var json = $.parseJSON(response);
                }catch(err){ is_JSON = false; } 

                if(is_JSON){ // json resonse : if your php return json (for handle error )
                    console.log('response is JSON')
                }else{
                    // response is your html of php return
                    console.log('response is not JSON')
                    console.log(response)
                }
            }
        });
        });
});
</script>

Не проверено, но это должно работать.

2 голосов
/ 16 апреля 2020

Я бы использовал JavaScript для этого подхода.

Допустим, ваша форма имеет идентификатор my-form; Ваш JavaScript должен будет помешать нормальной отправке формы и принять на себя сам процесс. 

let form = document.getElementById("my-form"); // find the form
form.addEventListener("submit", function (event){ // react to the submit try
     event.preventDefault(); // prevent the sending at this point

     let data = new FormData(form); // collect data, as we want to send it later
     // We'll use an XMLHttpRequest, which basically means we send a normal web
     // request from JavaScript and can interpret the answer afterwards
     let xhr = new XMLHttpRequest();
     xhr.onreadystatechange = function() {
         // here we can define code to be executed when the request is running
         if(this.readyState == 4 && this.status == 200){
             // we know the request has been successfull
             window.alert("Data sent!"); // Popup
         }
     };

     // finally we need to execute the xhr
     let method = form.getAttribute("method").toUpperCase();
     let url = form.getAttribute("action"); // reuse from form

     xhr.open(method, url, true);
     xhr.send(data);
});

Преимущество этого метода заключается в том, что он работает полностью в фоновом режиме, то есть пользователь может продолжить с помощью сайт во время выполнения запроса и не включает в себя другую библиотеку.

Ресурсы:

Событие "submit" на mozilla.org

XMLHttpRequest на w3schools.com

0 голосов
/ 16 апреля 2020

Когда вы отправляете форму, мы устанавливаем переменную $ result, сохраняющую результат.

Затем мы перенаправляем на индекс. php снова с параметром url запроса? Result = success

И затем мы проверяем, установлено ли (isset ()) и сравниваем ли это значение, чтобы показать правильное сообщение.

Таким образом, предполагая, что форма находится в /index.php

<?php
if(isset($_GET['result') && $_GET['result') == "success") {
echo '<div id="form-submit-alert">Submitted success!</div>';
} else {
echo '<div id="form-submit-alert">Submitted error!</div>';
}
?>
<form action="php/newsletter.php" method="post" class="formulario">
  <div>
    <input type="text" name="email" placeholder="Email" required>
  </div>
  <div class="ss-item-required" style="text-align:center;">
    <button type="submit" class="site-btn">Send</button>
  </div>
</form>

// php / newsletter. php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "DB";
$conexao = new mysqli($servername, $username, $password, $dbname);

// Init result
$result = "error";

if ($conexao->connect_error) {
    die("Erro na conexão: " . $conexao->connect_error);
}
if (!$conexao) {
    die("Erro de ligação: " . mysqli_connect_error());
}
$sql = "INSERT INTO newsletter (email) VALUES ('email')";
if (mysqli_query($conexao, $sql)) {

    // if the result is OK
    $result = "success";
} else {
    echo "Erro: " . $sql . "<br>" . mysqli_error($conexao);
}


// Redirect to initial page with the query url param
header("Location: /index.php?result={$result}");
?>
0 голосов
/ 16 апреля 2020

Итак, что вы говорите, после того, как кнопку отправки вы отправляете на серверную страницу? то, что я хотел бы сделать (на внутренней странице), когда код будет выполнен, просто поместите оператор php: 

location:('index.html');

таким образом, вы сразу же вернетесь на страницу, которую вы отправили свою форму на

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...