Question

我正在尝试创建一个验证和提交的联系表单，而不会实际刷新页面或破坏用户体验。

到目前为止，我一直在使用来自www.w3bees.com的联系表单，我已经对代码表示赞赏，但它实际上并没有验证，它只是不断提交，我无法弄清楚原因，所以我想是时候寻求帮助了。

这是我正在使用的确切PHP代码：

<?php


# request sent using HTTP_X_REQUESTED_WITH
if( isset( $_SERVER['HTTP_X_REQUESTED_WITH'] ) ){
if (isset($_POST['name']) AND isset($_POST['email']) AND isset($_POST['subject']) AND     isset($_POST['message'])) {
    $to = 'hi@email.com';

    $name = filter_var($_POST['name'], FILTER_SANITIZE_STRING);
    $email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
    $subject = filter_var($_POST['subject'], FILTER_SANITIZE_STRING);
    $message = filter_var($_POST['message'], FILTER_SANITIZE_STRING);
    $sent = email($to, $email, $name, $subject, $message);
    if ($sent) {
        echo 'Message sent!';
    } else {
        echo 'Message couldn\'t sent!';
    }
}
else {
    echo 'All Fields are required';
}
return;
}

/**
 * email function
 *
 * @return bool | void
 **/
function email($to, $from_mail, $from_name, $subject, $message){
$header = array();
$header[] = "MIME-Version: 1.0";
$header[] = "From: {$from_name}<{$from_mail}>";
/* Set message content type HTML*/
$header[] = "Content-type:text/html; charset=iso-8859-1";
$header[] = "Content-Transfer-Encoding: 7bit";
if( mail($to, $subject, $message, implode("\r\n", $header)) ) return true; 
}

?>

以下是实际的联系表格：

<form action="" method="post" class="navbar-form navbar-left" id="weeform" role="search" method="post">
        <div class="form-group">
            <label class="sr-only" for="name">Name</label>
          <input type="text" id="name" name="name" class="form-control"   placeholder="Name">

          <label class="sr-only" for="email">Email</label>
          <input type="email" id="email" name="email" class="form-control" placeholder="Email">

          <label class="sr-only" for="subject">Subject</label>
          <input type="text" id="subject" name="subject" class="form-control" placeholder="Message subject">

          <label class="sr-only" for="Message">Message/Query</label>
          <textarea type="text" id="Message" name="message" class="form-control" placeholder="Type message/query here."></textarea>
        </div>
        <button type="submit" class="btn btn-default" id="submit" value"submit">Submit</button>
      </form>

这是jQuery：

$(document).ready(function() {
var form = $('#weeform'); // contact form
var submit = $('#submit');  // submit button
var alert = $('.alert'); // alert div for show alert message

// form submit event
form.on('submit', function(e) {
    e.preventDefault(); // prevent default form submit
    // sending ajax request through jQuery
    $.ajax({
        url: '', // form action url
        type: 'POST', // form submit method get/post
        dataType: 'html', // request type html/json/xml
        data: form.serialize(), // serialize form data 
        beforeSend: function() {
            alert.fadeOut();
            submit.html('Sending....'); // change submit button text
        },
        success: function(data) {
            alert.html(data).fadeIn(); // fade in response data
            form.trigger('reset'); // reset form
            submit.html('Send Email'); // reset submit button text
        },
        error: function(e) {
            console.log(e)
        }
    });
});
});

要看很多东西，但是我很难过，而且我花了更多的时间来看待它，所以我认为最好寻求建议。任何帮助将不胜感激。

Answer 1

如果没有看到你的代码就很难诊断问题，但是我觉得你需要添加evt.preventDefault（）;在你的onsubmit处理程序的顶部

Answer 2

我认为您最好在提交事件函数的url中调用实际的PHP联系人文件。

$.ajax({
    url: 'contact.php', //actual mail processor file

Ajax / PHP表单未验证

2 个答案: