jquery — контактная форма для одной страницы PHP & amp; скрипт
Я делаю веб-сайт на одну страницу, и я хотел бы добавить контактную форму в одном разделе. Так что я работаю с PHP, но я не могу найти какие-либо базовые готовые формы, которые не открывают новую веб-страницу или не направляют вас на новую страницу после отправки. Я хотел бы сохранить эту одну страницу, поэтому я хотел бы, чтобы наложение появлялось, когда все в форме правильно и все было отправлено. Нет всплывающих окон или перенаправлений. Это может потребовать jQuery, но я не уверен, как его вставить, чтобы он действительно это делал.
Вот как я настроил форму в HTML:
<form action="mail.php" method="post" enctype="multipart/form-data" >
<label></label>
<input name="name" required placeholder="Your Name">
<label></label>
<input name="email" type="email" required placeholder="Your Email">
<label></label>
<textarea name="message" cols="20" rows="5" required placeholder="Message"></textarea>
<input id="submit" name="submit" type="submit" value="Submit">
</form>
Вот mail.php
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$from = 'From: Website';
$to = '[email protected]';
$subject = 'Email Inquiry';
$body = "From: $name\n E-Mail: $email\n Message:\n $message";?>
<?php
if ($_POST['submit']) {
if (mail ($to, $subject, $body, $from)) {
echo '<p>Thank you for your message! </p>';
} else {
echo '<p>An error occurred. Try sending your message again.</p>'; }}?>
Теперь я хотел бы иметь возможность удалить эхо для сообщения с благодарностью и заменить его на код jQuery для наложенного мною наложения.
$(document).ready(function() {
$("#overlay").show();
});
Мне не хватает части функции, так как сейчас она просто собирается показать, когда страница готова. Но я не знаю, где поставить это / как это работает с этим PHP.
Моя путаница в том, что я не уверен, где PHP указывает перейти на какую-то пустую страницу, когда вы нажимаете «Отправить», поэтому я не знаю, где остановиться и запустить скрипт. Я также просто не знаю, как правильно объединить все это вместе. В PHP или в скрипте, где у меня есть, проверьте все элементы, прежде чем он сможет вызвать к действию «оверлей спасибо». Я просто не знаю, в каком направлении идти отсюда.
Большое вам спасибо за ваше время. Я многому учусь сам, поэтому мои знания неоднозначны.
Пожалуйста, дайте мне знать, если я могу помочь что-нибудь прояснить.
-т
Решение
Посмотрите на jQuery Ajax. Обычно вы отправляете данные на сервер, переходя на другую страницу, поэтому вы делаете «синхронный» запрос. Техника Ajax позволяет вам оставаться на странице, пока выполняется запрос, «асинхронный» запрос. JQuery делает запросы Ajax намного проще. Удачи 😉
Другие решения
Попробуйте добавить onclick событие на #submit кнопка и использовать Javascript XMLHttpRequest объект вместо action="mail.php" в виде
Это работает на примере, надеюсь, это может подтолкнуть вас на правильный путь 🙂
Добавьте эту строку сразу после кнопки отправки
<span class="status"></span>
PHP
if($mail_sent){
echo "<span class='notice'>Your message has been sent, thank you.</span>";
exit;
}else{
echo "<span class='error'>We couldn't send your message please try again, thank you.</span>";
exit;
}
И JS часть для отображения ошибок
jQuery(function($) {
$("#contact-form").submit(function(){
return false;
})
$("#contact-form input[type=submit]").click(function(event){
var formerror = false;
$(this).attr('disabled', 'disabled').css({'cursor': 'auto', 'opacity': 0.5});
$('.status').fadeIn('normal').html('Loading please wait...');
$(this).closest("form").find("input, textarea").each(function(){
error = false;
switch($(this).attr('id')){
case 'name':
if($(this).val().match(/^[a-zA-Z\ \']+$/) == null || $(this).val() == "Name")
error = true;
else
error = false;
break;
case 'email':
if($(this).val().match(/^[a-zA-Z0-9_\.\-]+\@([a-zA-Z0-9\-]+\.)+[a-zA-Z0-9]{2,4}$/) == null)
error = true;
else
error = false;
break;
case 'message':
if($(this).val().length < 4 || $(this).val() == "Type your message")
error = true;
else
error = false;
break;
}
if(error){
$(this).css('border-color', '#f00');
formerror = true;
}
});
if(formerror){
$('.status').fadeOut('normal',
function(){
$(this).html("One or more required fields are missing or invalid, please correct and resend.")
.addClass("error");
}
).fadeIn();
$(this).removeAttr('disabled').css({'cursor': 'pointer', 'opacity': 1});
event.preventDefault();
}else{
//get teh link
$.post( "contact.php", { name: $('#name').val(),
email: $('#email').val(),
website: $('#website').val(),
message: $('#message').val()
})
.done(function( data ) {
$('.status').removeClass('error').fadeIn('normal', function(){$(this).html(data)});
$("#contact-form input[type=submit]").removeAttr('disabled').css({'opacity': 1, 'cursor': 'pointer'});
});
event.preventDefault();
}
});
});