需要获取PHP脚本才能在同一页面上显示结果

时间:2013-10-20 18:05:18

标签: javascript php jquery ajax forms

我在这里看过很多类似的问题,但我对JS / AJAX / jQuery或PHP的知识不足以了解如何将其转化为我的问题的解决方案。

我有一个联系表单,链接到contact.php以实际发送电子邮件。它目前正在工作,但它不是在我想要的同一页面上显示“发送消息”,而是将用户带到PHP页面。

只是为了澄清:我希望PHP回显的结果直接显示在HTML页面上的表单下方。

Contact.php http://pastie.org/8416873

http://pastie.org/8416875

1 个答案:

答案 0 :(得分:0)

如果您使用jQuery,则可以从表单中删除操作,并执行以下操作:

HTML:

<form class="contact_form" method="post" name="contact_form">

            <ul>
                <li>

                </li>
                <li>
                     <label for="name">Name:</label>
                     <input type="text" name="name" placeholder="John Doe" required />
                </li>
                <li>
                    <label for="email">Email:</label>
                    <input type="email" name="email" placeholder="JohnDoe@Email.com" required />
                </li>
                <li>
                    <label for="message">Message:</label>
                    <textarea name="message" cols="40" rows="6" required ></textarea>
                </li>
                <li>
                    <button class="submit btn btn-default" type="submit">Send Message</button>
                </li>
            </ul>

        </form>
        <div class="targetDiv"></div>

和javascript:

 function formSubmit(e){

     e.preventDefault(); //This will prevent the default click action.

    var frm = $('.contact_form'),
        data = JSON.stringify(frm.serializeArray());

    $.ajax({
        type: "POST",
        url: "contact.php",
        data: data,
        success: function() {
            $('.targetDiv').text('Your message has been sent!');
        },  
        error: function() {
           //your error message here
        }   
    }); 
    return false; 
   }   
}