联系表单脚本不发送表单

时间:2013-08-20 09:46:47

标签: php javascript jquery

我有这个PHP联系表单脚本(如下所示),我之前使用过,所以我知道有效,但是,由于我已经将html表单隐藏在一个新的jQuery驱动的div中:  (<div class="toggle hidemail" id="drop-button" href=""> Email us here </div> <div class="hidden hiddenform">) 上下切换,我似乎无法发送表格,发送时的表格应该淡出然后给用户一个确认消息(如脚本中所示)但它没有做任何事情,我不知道假设有人会知道这里出了什么问题,所以我可以让这个表格再次运作吗?

<?php

    $to = 'example@gmail.com';
    $subject = 'Company Name';

    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];

    $body = <<<EMAIL
        Hello my name is $name.
        $message
        From $name
        my email address is $email

    EMAIL;

    if($name == '' || $email == '' || $message == "") {
        echo "<h5>Sorry, I think you missed  bit....</h5>";
        $error = true;
    } else {
        $error = false;
        mail("example@gmail.com", $name, $email, $message);
        echo "<h5>Thank you for getting in touch. I'll get back to you ASAP.</h5>";
    }

    if($error == true):
?>

<article id="contact-form">             
    <article id="load_area">
        <form id="my-form">                     
            <input type="text" name="name" placeholder="Name" />
            <input type="text" name="email" placeholder="Email" />
            <textarea name="message" placeholder="Message" /></textarea>
            <input type="button" class="submit_button" value="Send" name="send_button" />                           
        </form>     
    </article>                              
</article>
<?php 
    endif; 
?>

这是HTML:

<div class="toggle hidemail" id="drop-button" href=""> Email us here </div>
    <div class="hidden hiddenform">
        <article id="contact-form">
            <article id="load_area">
                <form id="my-form">         
                    <input type="text" name="name" placeholder="Name" />
                    <input type="text" name="email" placeholder="Email" />
                    <textarea name="message" placeholder="Message" /></textarea>
                    <input type="button" class="submit_button" value="Send" name="send_button" />                   
                </form>
            </article>          
        </article>
    </div>

$(document).ready(function() {
    $(".submit_button").live("click", function() {
        $("#load_area").fadeOut('slow', function() {
            $("#load_area").fadeIn();
            $.post("process.php", $("#my-form").serialize(), function(data) {
                $("#load_area").html(data);
            })
        });
    })
})

1 个答案:

答案 0 :(得分:2)

尝试使用

$(".submit_button").on("click", function(){

而不是'$(".submit_button").live("click", function(){

来自jQuery Docs:

  

从jQuery 1.7开始,不推荐使用.live()方法

也尝试使用

$('#my-form').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});

并在html表单中设置一个操作,如下所示:

<form id="my-form" action="process.php">