Одна страница Форма обратной связи PHP & Script

Question

Я делаю сайт на одной странице, и я хотел бы добавить контактную форму в одном разделе. Таким образом, я работаю с 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@emailhere.com'; 
$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 говорит ему перейти на какую-то пустую страницу, когда вы нажмете submit, поэтому я не знаю, где остановиться и запустить скрипт. Я также просто не знаю, как правильно собрать это все вместе. Является ли это в PHP или сценарии, где я проверяю все элементы, прежде чем он сможет вызвать действие «спасибо наложить». Я просто не знаю, в каком направлении идти отсюда.

Большое вам спасибо за ваше время. Я изучаю это много, поэтому мои знания неоднозначны.

Пожалуйста, дайте мне знать, если я смогу помочь в этом.

-rj

Answer 1

Хава взгляд на JQuery Ajax. Обычно вы отправляете данные сервером, перейдя на другую страницу, так что вы выполняете «синхронный» запрос. Метод Ajax позволяет вам оставаться на странице, в то время как запрос сделан, «асинхронный» запрос. JQuery делает запросы Ajax намного проще. Удачи;)

Answer 2

Try добавление onclick события на #submit кнопки и использовать объект Javascript XMLHttpRequest вместо action="mail.php" в виде

Answer 3

Это работает из примера, надеюсь, что это может подтолкнуть вас на правильном пути :)

Добавить эту строку сразу после кнопки отправки

<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(); 
     } 
    }); 
});