1

我在制作此联系表时遇到了很大的问题，该联系表可以在下面的图片中看到。我希望联系表单做的是在提交感谢消息或确认消息时显示，而不是重定向到没有任何样式的 contact.php 文件，您可以在提供的链接上看到这一点。

我发现了一些我可以使用 Jquery Ajax 执行此操作的信息，我也尝试过在下面显示这些信息，但我似乎仍然无法让它在提交时工作以在弹出窗口中显示一条消息。

有谁知道更简单的方法来做到这一点，或者可能指出我正确的方向，因为这是我一直试图解决的问题，上帝知道多久了。

感谢您的任何帮助

视觉： http: //madaxedesign.co.uk/dev/index.html

PHP 和 HTML：

<?php
        $your_email = "maxlynn@madaxedesign.co.uk";
        $subject = "Email From Madaxe";
        $empty_fields_message = "<p>Please go back and complete all the fields in the form.</p>";
        $thankyou_message = "<p>Thank you. Your message has been sent. We Will reply as soon as possible.</p>";

        $name = stripslashes($_POST['txtName']);
        $email = stripslashes($_POST['txtEmail']);
        $message = stripslashes($_POST['txtMessage']);

        if (!isset($_POST['txtName'])) {

        ?>
        <form id="submit_message" class="hide_900" method="post" action="/contact.php" onsubmit="javascript: doSubmit();">
            <div id="NameEmail"> 
                <div>
                    <label for="txtName">Name*</label> 
                    <input type="text" title="Enter your name" name="txtName" />
                </div> 
                <div>
                    <label for="txtEmail">Email*</label> 
                    <input  type="text" title="Enter your email address" name="txtEmail" />
                </div> 
            </div>
            <div id="MessageSubmit">
                <div> 
                    <textarea maxlength="1200" title="Enter your message" name="txtMessage"></textarea> 
                    <label for="txtMessage">Message</label>
                </div>
                <div class="submit"> 
                    <input type="submit" value="Submit" /></label>
                </div>
            </div> 
        </form>

查询：

function doSubmit(){
  var postData = jQuery('#submit_message').serialize();    

  jQuery.ajax({
    url: '/contact.php',
    data: postData
  }).done(function( html ) {
    alert(html);
  });
4

4 回答 4

1

您可以添加return false；在 doSubmit 函数或以下代码的末尾，以防止表单将用户重定向到操作页面。

var doSubmit = function (event) {
  var postData = jQuery('#submit_message').serialize();    

  jQuery.ajax({
    url: '/contact.php',
    data: postData
  }).done(function( html ) {
    alert(html);
  });
  event.preventDefault();
}

$(function () {
    $('#submit_message').submit(doSubmit);
});

修改后的 HTLM

<form id="submit_message">
...
</form>

这段代码在做什么？

首先，我们定义一个提交表单数据的函数。注意函数中的事件参数。此函数中的第一个变量是在兼容 ajax 的请求字符串中序列化的所有表单值。该.ajax()功能将所有数据发送到您的服务器。请注意，由于您没有在.ajax()函数中设置类型参数，因此将使用 GET HTTP 方法发送数据。最后，event.preventDefault()防止在浏览器中触发提交事件。当浏览器检测到提交事件时，它会根据html 标签中的action和method参数尝试提交表单。<form>通常，此提交将用户重定向到action页面。这个event.preventDefault()将禁用此重定向。请注意，事件参数将由 jQuery 自动设置。

最后一部分，$(function() { ... });part的意思是“在文档完全加载时执行这部分”。它确保在调用方法sumbit_message之前具有 id 的元素存在。.submit()最后一种方法是事件绑定器。这意味着当在表单上触发提交事件时，将调用submit_message该函数。doSubmit

我希望你对这个脚本有更好的理解。这是一个非常基础的方法，但如果你清楚地了解其中的机制，它将帮助你成为一个更好的 jQuery 程序员。:)

小提琴演示

于 2013-04-25T11:13:24.007 回答
0 
1.<form onsubmit='confirm()'>
function confirm()
{
alert("Thank You");
}

2.在contact.php中调用再次显示的页面

于 2013-04-25T11:15:46.373 回答
0

您需要防止表单的默认事件。为此，请将e.preventDefault();函数添加到函数的顶部，以防止触发此事件。

另请注意，我们正在将e参数传递给您的函数。这表示已触发的事件。

function doSubmit(e){
  e.preventDefault();
  var postData = jQuery('#submit_message').serialize();    

  jQuery.ajax({
    url: '/contact.php',
    data: postData
  }).done(function( html ) {
    alert(html);
  });
}
于 2013-04-25T11:16:08.587 回答
0

尝试这个

更改您的表格

<form id="submit_message" class="hide_900" method="post">

并在脚本中放入

$("#submit_message").submit(function(e){
    e.preventDefault();
    //call your ajax
});
于 2013-04-25T11:22:31.377 回答