php ajax一页联系表单

时间:2014-08-18 10:26:59

标签: javascript php ajax html5

我正在开发一个页面ajax contactform。我希望在不离开我的页面的情况下发送带有PHP的电子邮件,现在我完全迷失了。我不知道为什么它不起作用

我会告诉你我的联系表格。提前谢谢你的帮助。这是表格..

html代码

<article class="panel" style="background:url(img/cover/bg_panel_3.jpg); background-size:cover;" full-screen>

    <div style="padding-top:80px;">
        <div class="row text-center centered">


            <div id="contact-form">

                <form id="contact-us" action="contact.php" method="post">
                    <ul>
                        <li class="field" id="check-1">
                            <input class="input txt requiredField wide alpha-only" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>"  placeholder="Name" onBlur="check(this.value)" />


                        </li>
                        <li class="field" id="check-2">
                            <input class="input wide mail-only txt requiredField email" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" placeholder="Email" />


                        </li>
                        <li class="field" id="check-3">
                            <input class="input wide hack-check sub-check requiredField" name="subj" type="text" placeholder="Subject" value="<?php if(isset($_POST['subj']))  echo $_POST['subj'];?>" />


                        </li>
                        <li class="field" id="check-4">
                            <input class="input wide num-only requiredField" name="num" type="text" placeholder="Number" value="<?php if(isset($_POST['num']))  echo $_POST['num'];?>" />

                        </li>
                        <li class="field" id="check-5">
                            <textarea class="input textarea wide hack-check msg-check txtarea requiredField"  name="comments" id="commentsText" class="txtarea requiredField" placeholder="Message:">
                            <?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?>
                            </textarea>

                            </li>
                    </ul>
                    <div class="medium primary btn pretty-btn">
                        <input name="submit" class="subbutton" type="submit" value="Send" />
                    </div>
                    <input type="hidden" name="submitted" id="submitted" value="true" />
                </form>
                <?php } ?>
                <!-- End #contact --> 

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

** js code **

$(document).ready(function() {
    $('form#contact-us').submit(function() {
        $('form#contact-us .error').remove();
        var hasError = false;

                    });
        if(!hasError) {
            var formInput = $(this).serialize();
            alert(formInput);
            $.post("contact-us.php",formInput, function(data){
                $('form#contact-us').slideUp("fast", function() {                  
                    $(this).before('<p class="tick fg-white sans"><strong>Thanks!</strong> Your email has been delivered. !</p>' );
                });

            });
        }

        return false;   
    });
});

PHP代码

//If the form is submitted
if(isset($_POST['submitted'])) {


    $name = trim($_POST['contactName']);
    $email = trim($_POST['email']);
    $num = trim($_POST['num']);
    $subject = trim($_POST['subj']);
    $comments = trim($_POST['comments']);




$formcontent=" From : $name \n Email : $email \n Subject : $subj \n Phone number : $number \n \n Message : $message";
$recipient = "example@mail.com";
$subject = "Contact Form Query Received";
$mailheader = "From: $email \r\n";

mail($recipient, $subject, $formcontent, $mailheader) or die("Error encountered! Please try again or write directly to the mentioned email address.");

        // set our boolean completion value to TRUE
        $emailSent = true;

}

1 个答案:

答案 0 :(得分:0)

我怀疑你的问题是这个额外的});在你的代码中,即使被调用也停止$ .post(...)调用。你的JS的一小部分快速显示了这一点,仔细阅读。

var hasError = false;

======>  });  <====== remove this extra stuff.

if(!hasError) {