Сообщение об успешном завершении из формы загрузочного контакта появляется на пустой странице

77
8

Я создаю веб-сайт с помощью Bootstrap и нуждаюсь в контактной форме, поэтому я решил использовать его из Bootstrapious. Форма работает правильно, и я могу получать сообщения по электронной почте, но сообщение об успешности появляется на пустой странице, а не на странице формы.

Я видел здесь два вопроса, которые касались аналогичной проблемы:

PHP-контактная форма перенаправляет на contact.php с успешным сообщением. Этот человек сам разрешил проблему, но на самом деле не объясняет, как это сделать.

Форма контакта с PHP не приземлялась на правую страницу. У этого была проблема, разрешенная кем-то другим, но, похоже, это не работает для меня (или, может быть, я просто не понимаю решение).

Вот моя страница, если вы хотите попробовать, чтобы увидеть, что именно она делает.

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

HTML-страница:

    <!doctype html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap core CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"></head>

<body>
<form id="contact-form" method="post" action="contact.php" role="form">
<div class="messages"></div>

<div class="controls">

<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_name">Prénom*</label>
<input id="form_name" type="text" name="name" class="form-control" placeholder="Prénom" required="required" data-error="Votre prénom est requis.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_lastname">Nom de famille*</label>
<input id="form_lastname" type="text" name="surname" class="form-control" placeholder="Nom de famille" required="required" data-error="Votre nom de famille est requis.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_email">Courriel*</label>
<input id="form_email" type="email" name="email" class="form-control" placeholder="Courriel" required="required" data-error="Votre adresse courriel est requise.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="form_phone">Téléphone</label>
<input id="form_phone" type="tel" name="phone" class="form-control" placeholder="Numéro de téléphone">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="form_postal">Code postal*</label>
<input id="form_postal" type="text" name="codepostal" class="form-control" placeholder="Code postal" required="required" data-error="Votre code postal est requis." pattern="[A-Za-z][0-9][A-Za-z]\s?[0-9][A-Za-z][0-9]">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="form_message">Message*</label>
<textarea id="form_message" name="message" class="form-control" placeholder="Votre message" rows="4" required="required" data-error="Veuillez entrer votre message."></textarea>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-md-12">
<input type="submit" class="btn btn-success btn-send" value="Envoyer">
</div>
</div>
<div class="row">
<div class="col-md-12">
<p class="text-muted"><strong>*</strong> Champs obligatoires</p>
</div>
</div>
</div>

</form>

</div>
</div>
</div>

<!-- /.container -->

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
<script src="../../../../assets/js/vendor/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<script src="validator.js"></script>
<script src="contact.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.css"></script>

contact.php:

<?php

$from = 'test <test@test.com>';
$sendTo = 'test <test@test.com>';
$subject = 'Nouveau message';
$fields = array('name' => 'Prénom', 'surname' => 'Nom de famille', 'phone' => 'Téléphone', 'email' => 'Courriel', 'message' => 'Message');
$okMessage = 'Le formulaire de contact a bien été envoyé. Merci! Nous vous contacterons dans les plus brefs délais.';
$errorMessage = 'Une erreur s\'est produite en envoyant le formulaire. Veuillez réessayer plus tard.';

error_reporting(E_ALL & ~E_NOTICE);

try
{

if(count($_POST) == 0) throw new \Exception('Le formulaire est vide');

$emailText = "Vous avez un nouveau message de votre formulaire de contact\n=============================\n";

foreach ($_POST as $key => $value) {
// If the field exists in the $fields array, include it in the email
if (isset($fields[$key])) {
$emailText .= "$fields[$key]: $value\n";
}
}

// All the neccessary headers for the email.
$headers = array('Content-Type: text/plain; charset="UTF-8";',
'From: ' . $from,
'Reply-To: ' . $from,
'Return-Path: ' . $from,
);

// Send email
mail($sendTo, $subject, $emailText, implode("\n", $headers));

$responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}

// if requested by AJAX request return JSON response
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);

header('Content-Type: application/json');

echo $encoded;
}
// else just display the message
else {
echo $responseArray['message'];
}

Contact.js:

$(function () {

// init the validator
// validator files are included in the download package
// otherwise download from http://1000hz.github.io/bootstrap-validator

$('#contact-form').validator();

// when the form is submitted
$('#contact-form').on('submit', function (e) {

// if the validator does not prevent form submit
if (!e.isDefaultPrevented()) {
var url = "contact.php";

// POST values in the background the the script URL
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
// data = JSON object that contact.php returns

// we recieve the type of the message: success x danger and apply it to the
var messageAlert = 'alert-' + data.type;
var messageText = data.message;

// let compose Bootstrap alert box HTML
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';

// If we have messageAlert and messageText
if (messageAlert && messageText) {
// inject the alert to .messages div in our form
$('#contact-form').find('.messages').html(alertBox);
// empty the form
$('#contact-form')[0].reset();
}
}
});
return false;
}
})
});

Редактировать 06/03: Я пробовал предложение Нитина Шармы, но это не работает. Я могу перенаправить на первую страницу, но потом сообщение об успешном завершении вообще не появляется.

спросил(а) 2021-01-21T16:30:39+03:00 5 месяцев назад
1
Решение
99

С помощью страницы атрибута action перенаправить на любую другую страницу. В вашем состоянии он перенаправляет вас на contact.php и если вы хотите, чтобы страница перенаправлялась в любое другое место после отправки, просто измените contact.php на нужное имя страницы.

<form id="contact-form" method="post" action="contact.php" role="form">

изменить действие на

<form id="contact-form" method="post" action="newPage.php" role="form">

ответил(а) 2021-01-21T16:30:39+03:00 5 месяцев назад
45

Ondrej от Bootstrapious.com здесь. Я автор учебника.

Проблема была хорошо скрыта :) Это не работает, потому что вы работаете с Slim-версией jQuery, которая не содержит функции AJAX, необходимые для этого.

Надеюсь, это поможет.

Ондрей

ответил(а) 2021-01-21T16:30:39+03:00 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема