Question

所以我下载了一个html模板，我无法让联系表格工作..

所以这是联系表格：

<form id="contact" action="contact.php" method="get" />
<div class="row-fluid">
    <p class="span12">
        <label for="name" class="second-color">
            Nome</label>
        <input type="text" id="name" name="name" class="required second-color span12" maxlength="25" />
    </p>
</div>
<div class="row-fluid">
    <p class="span12">
        <label for="email" class="second-color">
            E-mail</label>
        <input type="text" id="email" name="email" class="required second-color email span12" maxlength="25" />
    </p>
</div>
<div class="row-fluid">
    <p class="span12 multi">
        <label for="comment" class="second-color">
            Mensagem</label>
        <textarea id="comment" name="comment" class="required second-color span12"></textarea>
    </p>
</div>
<a href="javascript:;" class="btn medium color1 hidden-tablet hidden-phone">ENVIAR MENSAGEM</a>
<a href="javascript:;" class="btn small color1 visible-tablet visible-phone">ENVIAR MENSAGEM</a>
<div id="loadingForm">
    <img src="assets/images/loading.gif" alt="loading" />
</div>
</form>

在javascript文件中，我有一段与表单相关的代码：

/*post operation for contact page*/
$("#contact a").click(function () {
    $('#contact #loadingForm').fadeIn('slow');

    /*function which validates input with required class in contact page */
    var myform = $("#contact").validate({
        email: true,
        errorPlacement: function (error, element) {
            error.appendTo();
        }
    }).form();

    /*myform returns true if form is valid.*/
    if (myform) {
        var action = $("#contact").attr('action');
        $.post(action, {
            name: $('#name').val(),
            email: $('#email').val(),
            web: $('#web').val(),
            message: $('#message').val()
        },
        function (data) {
            d = data;
                $('.response').remove();

            if (data == 'Message sent!') {
                $('#contact a').attr('disabled', '');
                $('#contact').append('<span class="success"></p>');
            }
            else {
                $('#contact').append('<span class="response"></span>');
            }
        });
    }
    $('#contact #loadingForm').fadeOut('slow');
    return false;
});

现在，我需要为联系工作做些什么？模板位于ajax上，因此表单无法重新加载页面，因为如果页面重新加载，背景音乐将停止。

我必须创建文件contact.php，但是，如果我这样做，当我点击按钮时页面会重新加载，对吗？

任何人都可以帮我吗？

Answer 1

如果您像使用Ajax一样调用它，则不会重新加载页面。请确保表单未提交。

我想补充一下：

$("#contact a").click(function (event) {
   event.preventDefault();

确保点击时不会重新加载您的页面。

然后在PHP方面你可以使用这样的东西：

<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$formcontent="From: $name \n Message: $message";
$recipient = "emailaddress@here.com";
$subject = "Contact Form";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Message sent!";
?>

联系表单php和jquery

1 个答案: