0

我似乎无法在我的代码中找到问题。我希望 php 文件中的验证触发 jquery 通知插件“toastr”，但是，php echo 会继续将 php 文件消息状态发布到新选项卡。我做错了什么，如何让消息出现在通知中，而不是？我的学校网站的实时版本在这里：赖特州立大学 BMES 网站，提交联系我们表格时可以复制该问题。先感谢您 ：）

HTML：

<form action=send-contact.php method=post data-show-errors="true" class=contact-form id=contact-form-id data-parsley-validate>
<p class=half>
<input autofocus parsley-trigger="change" name=name required id=name placeholder="Type your name" class="testBox label_better" data-new-placeholder="Example: Sir Humphrey Charleston III" parsley-required="true">
</p>
<p class=half>
<input name=email id=email placeholder="Type your e-mail address" class="testBox label_better" data-new-placeholder="Example: humphrey.charleston@wright.edu" parsley-type="email" parsley-trigger="change" required parsley-required="true">
</p>
<p>
<select class="contactselect required" name=subject id=subject parsely-required="true" required parsley-trigger="change">
    <option value="" parsley-trigger="change">Please select one topic:</option>
    <option value="1" parsley-trigger="change">Information about BMES Chapter</option>
    <option value="2" parsley-trigger="change">Information about upcoming events</option>
    <option value="3" parsley-trigger="change">Other</option>
</select>
</p>
<p>
<textarea name=message id=message rows=12 cols=20 class="label_better_text" placeholder="Tell us what's on your mind." parsley-trigger="keyup" parsley-rangelength="[1,300]" required parsley-required="true"></textarea>
</p>
<p>
<button name=send type=submit onclick="$( '#contact-form-id' ).parsley('validate')" id=submit value=1>Send message</button>
<span class="color-red"><button onclick="$( '#contact-form-id' ).parsley( 'destroy' ); $('#contact-form-id').parsley();" name=reset type=reset value=1>Reset</button></span>
</p>
</form>
<script type=text/javascript>
jQuery(document).ready(function(c){
$('#contact-form').parsley();
$('#contact-form-id').submit(function(e) { 
    e.preventDefault();
    if ( $(this).parsley('validate') ) {
        $.post("send-contact.php", $(this).serialize()); 
        toastr.success('Thank you, we will attend to your message shortly.');
        $( '#contact-form-id' ).parsley( 'destroy' );
    } 
}); });
</script>

PHP：

<?php
$name = '';  
$subject = '';  
$email = '';
$message = '';
function getIp()
{if(isset($_SERVER['HTTP_X_FORWARDED_FOR'])){
$ip_address=$_SERVER['HTTP_X_FORWARDED_FOR'];
}
if (!isset($ip_address)){
    if (isset($_SERVER['REMOTE_ADDR'])) 
    $ip_address=$_SERVER['REMOTE_ADDR'];
}
return $ip_address;
}
//taking the data from form 
$name = addslashes(trim($_POST['name']));   
$subject = addslashes(trim($_POST['subject'])); 
$email = addslashes(trim($_POST['email']));
$message = addslashes(trim($_POST['message']));
//form validation
$errors = array();
$fields = array();
if(!$name) {
$errors[] = "Please enter your name.";
$fields[] = "name";
}
$email_pattern = "/^[a-zA-Z0-9][a-zA-Z0-9\.-_]+\@([a-zA-Z0-9_-]+\.)+[a-zA-Z]+$/";
if(!$email) {
$errors[] = "Please enter your e-mail address.";
$fields[] = "email";
} else if(!preg_match($email_pattern, $email)) {
$errors[] = "The e-mail address you provided is invalid.";
$fields[] = "email";    
}
if(!$subject) {
$errors[] = "Please choose the subject of your message.";
$fields[] = "subject";
}
if(!$message) {
$errors[] = "Please enter your message.";
$fields[] = "message";
}
//preparing mail
if(!$errors) {
//taking info about date, IP and user agent
$timestamp = date("Y-m-d H:i:s");
$ip   = getIp();
$host = gethostbyaddr($ip); 
$user_agent = $_SERVER["HTTP_USER_AGENT"];
$headers = "MIME-Version: 1.0\n";
$headers .= "Content-type: text/html; charset=utf-8\n";
$headers .= "Content-Transfer-Encoding: quoted-printable\n";
$headers .= "From: $email\n";
$content = 'Subject: '.$subject.'<br>'.
'Name: '.$name.'<br>'.
'E-mail: '.$email.'<br>'.
'Message: '.$message.'<br>'.
'Time: '.$timestamp.'<br>'.
'IP: '.$host.'<br>'.
'User agent: '.$user_agent; 
//sending mail
$ok = mail("my-email-address-normally-goes-here","BMES Website Contact Us ", $content, $headers);
if($ok) {
    $response['msgStatus'] = "ok";
    $response['message'] = "Thank you for contacting us.  We will attend to your inquiry as soon as possible.";
} else {
    $response['msgStatus'] = "error";
    $response['message'] = "An error occured while trying to send your message. Please try again.";
}
} else {
$response['msgStatus'] = "error";
$response['errors'] = $errors;
$response['errorFields'] = $fields;
}
header('Content-type: application/json');
echo json_encode($response);
?>

Javascript：

$("form.contact-form").each(function(){
var form = $(this);
var button = form.find("button[type=submit]");
var buttonText = button.html();

button.click(function(e){
    e.preventDefault();

    var formTop = form.offset().top;
    var url = form.attr("action");
    var data = form.serialize();
    form.find("input, select, textarea, span").removeClass("error");
    form.find(".msg").remove();

    button.html("Sending...");

    $.post(url, data, function(response){
        var status = response.msgStatus;
        var msg = response.message;

        if(status == "ok") {
            form.prepend('<p class="msg success"><a class="hide" href="#">hide this</a>' + msg + '</p>');
            form.find("input, select, textarea").val("");
            var valField = form.find(".select .value");
            var selectField = valField.siblings("select");
            var selectedText = selectField.find("option").eq(0).html();
            valField.html(selectedText);

        } else if(status == "error") {
            if(response.errorFields.length) {
                var fields = response.errorFields;
                for (i = 0; i < fields.length; i++) {
                    form.find("#" + fields[i]).addClass("error");
                    form.find("select#" + fields[i]).parents(".select").addClass("error");
                }
                var errors = response.errors;
                var errorList = "<ul>";
                for (i = 0; i < errors.length; i++) {
                    errorList += "<li>" + errors[i] + "</li>";
                }
                errorList += "</ul>";
                form.prepend('<div class="msg error"><a class="hide" href="#">hide this</a><p>There were errors in your form:</p>' + errorList + '<p>Please make the necessary changes and re-submit your form</p></div>');

            } else form.prepend('<p class="msg error"><a class="hide" href="#">hide this</a>' + msg + '</p>');
        }
        $(".msg a.hide").click(function(e){
            e.preventDefault();
            $(this).parent().slideUp();
        });
        button.html(buttonText);
        window.scrollTo(0, formTop);
    }, 'json');
})
});
4

3 回答 3

0

您是否尝试过更多地使用 jquery？例如，ajax 而不是 post。

像这样的东西？

    button.click(function () {
        $.ajax({
            url: url,
            type: 'POST',
            data: form.serialize(),
            contentType: "application/json;charset=utf-8",
            success: function (data) {
                if (data.msgSTatus == "ok"){
                    alert(data.message);
                    // play with html here once you know the page stays.
                 }
            },
            error: function (data) {
                alert('Fail.');
            }
        });
    });

就 html 附加而言，我个人会在页面上已经有一个 id 的空白，并将 div 的内容设置为您收到的数据，这可能会使 js 看起来更干净。

于 2014-01-02T22:30:04.460 回答
0

尝试在其他脚本之前包含 jquery。此外，使用 Firebug 或内置浏览器 JS 调试工具来解决 Javascript 错误。

于 2014-01-02T22:45:36.983 回答
0

我已经设法解决了这个问题。下面列出了更改以进行比较，不仅可以帮助其他人，还可以关闭此问题。特别感谢@WhiteRuski 为我指明了正确的方向。PHP和HTML保持不变。这是新的Javascript：

$("form.contact-form").each(function(){
var form = $(this);
var button = form.find("button[type=submit]");
var buttonText = button.html();

button.click(function(e){
    e.preventDefault();

    var url = form.attr("action");
    var data = form.serialize();

    // button.html("Sending...");
    button.html('<i class="fa fa-cog fa-lg fa-spin"></i>' + ' Sending ... ');

    $.post(url, data, function(response){
        var status = response.msgStatus;
        var msg = response.message;

        if(status == "ok") {
            toastr.success('<p>' + msg + '</p>');
            var valField = form.find(".select .value");
            var selectField = valField.siblings("select");
            var selectedText = selectField.find("option").eq(0).html();
            valField.html(selectedText);
        } else if(status == "error") {
            if(response.errorFields.length) {
                var fields = response.errorFields;
                for (i = 0; i < fields.length; i++) {
                    form.find("#" + fields[i]).addClass("error");
                    form.find("select#" + fields[i]).parents(".select").addClass("error");
                }
                var errors = response.errors;
                var errorList = "<ul>";
                for (i = 0; i < errors.length; i++) {
                    errorList += "<li>" + errors[i] + "</li>";
                }
                errorList += "</ul>";
                // toastr.error('<p>There were errors in your form:</p>' + errorList + '<p>Please make the necessary changes and re-submit your form</p>');  This lists the specific errpr in the field
                toastr.error('<p>There were a few errors in your form. Please resubmit with corrections.</p>');

            } else toastr.error('<p>' + msg + '</p>');
        }
        button.html(buttonText);
    }, 'json');
})
});
于 2014-01-30T16:13:34.867 回答