提交表单后停留在当前页面

Question

只是一个问题--

我该如何在表单提交后仍停留在同一页而脚本正在执行？

我有一个简单的表单，如下所示：

<form action="process.php" method="post" id="form">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" required="required" />
    <label for="email">Email</label>
    <input type="email" name="email" id="email" required="required" />
    <label for="subject">Subject</label>
    <input type="text" name="subject" id="subject" required="required" />
    <label for="message">Message</label>
    <input type="text" name="message" id="message" required="required" />
    <input type="submit" id="button" value="Submit"/>
</form>

但每次我提交表单时，都会跳转到process.php页面。我不想这样，我希望它留在同一页上，甚至可以弹出一个jQuery弹窗显示“谢谢”或其他内容。

在运行脚本的同时如何保持在同一页呢？

- Kyle Yeo

---

如果您不在process.php的同一页上，那么ajax是唯一的选择。如果您在process.php的同一页上，请使用类似srini的方法来进行回传到同一页。 - dragon66

Answer 1

在这种情况下，您需要使用ajax。

基本上，您需要使用ajax发送所有数据。在服务器端，您将需要像通常在服务器脚本中一样使用$_POST['name']来获取所有参数。

表单

<form action="process.php" method="post" id="form">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" required="required" />
    <label for="email">Email</label>
    <input type="email" name="email" id="email" required="required" />
    <label for="subject">Subject</label>
    <input type="text" name="subject" id="subject" required="required" />
    <label for="message">Message</label>
    <input type="text" name="message" id="message" required="required" />
    <input type="button" id="button" value="Submit"/>
</form>

<div id="dialog-message" title="Thank You">
    <p>Your message here</p>
</div>

​

JQUERY

$(document).ready(function(){

    $('#dialog-message').dialog({
        modal: true,
        autoOpen: false,
        buttons: {
            Ok: function() {
                $(this).dialog("close");
            }
        }
    });



    $('#button').on('click', function() {
        var name = $('#name').val();
        var email = $('#email').val();
        var subject = $('#subject').val();
        var message = $('#message').val();
        var dataString = 'name=' + name + '&email=' + email + '&subject=' + subject + '&message=' + message;
        $.ajax({
            type: "POST",
            url: "process.php",
            data: dataString,
            success: function() {
                alert('');
                $('#dialog-message').dialog('open');
            }
        });
    });
});​

请在此处查看示例。

请注意，不要忘记引用jQuery和jQuery UI。

- William Calvin

---

请注意，您可以使用$（“＃form”）.serialize（）而不是手动构建字符串。 - Michael Mior

Answer 2

1. 将表单处理逻辑放在与表单相同的页面上
2. 使用Ajax
3. 当process.php完成表单处理后，重定向回该页面

- John Conde

---

我猜测Ajax响应将自动返回请求它的页面。因此，重定向似乎有点模糊。 - dragon66

jQuery Ajax是实现它的最佳方式。有无数关于如何实现它的教程，所以我会让你自己找到一个适合你的解释。 - John Conde

Answer 3

我认为John Conde给出了最好的答案。

我会让显示表单的php文件处理$_POST，或者如果无法这样做，则使用类似于以下代码的Ajax进行处理：

$("#form").bind("submit", function() { 

var nameTxt = $("#name").val();
var emailTxt = $("#email").val();
$.post('process.php', 
    {
        name: nameTxt,
        email: emailTxt
    }, 
    function(data) {
                if (data == 'ko')
                    alert('Could not submit...');
                else {
                    alert('Thank you for your message.');
                }
            });
return false;
}

这个操作会在点击提交按钮时“阻止”表单的正常提交，获取输入值并将它们发送到 process.php 脚本。它假设您的“process.php”执行以下操作：

 echo "ko"; 

如果出现错误，您可以在表单成功发送后通过重置输入来进行一些表单清理：

$("#name").val('');
$("#email").val('');

- Deratrius

Answer 4

我针对一个iframe解决了问题，它完美地起到了作用。

<form name="contact" role="form" method="post" action="contact.php" target="my_iframe">
      
  Feild 1: <input name="feild1" id="feild1" type="text" placeholder="Lorem ipsum dolor"><br/><br/>
  Feild 2: <input name="feild2" id="feild2" type="text" placeholder="Lorem ipsum dolor"><br/><br/>
  Feild 3: <textarea name="feild3" id="feild3" rows="5" type="text" placeholder="Lorem ipsum dolor, sit amet."></textarea><br/><br/>
  <input type="submit">
      
</form>

<!-- target iframe to prevent redirection to 'contact.php' -->
<iframe name="my_iframe" width="1" height="1" style="border:none"></iframe>

- jajaperson

Answer 5

假设您正在使用jQuery：

$(document).ready(function(){
  $('#form').submit(function(e){
    // do some ajax request to process.php here...

    // stop the form doing its default action of submitting directly to process.php
    e.preventDefault();
  });
});

- duncan

---

这并不实际提交表单。 - Michael Mior

使用 $.ajax 提交怎么样？ - Michael

我假设他已经有了处理ajax请求onsubmit的功能，但是我添加了注释以指示在此处也可以实现该功能。 - duncan

Answer 6

尝试像这样做些事情。

      action="<?php print $_SERVER["PHP_SELF"]; ?>" (or) action=""

编辑：

         <?php
         if(isset($_POST['Submit'])){
             //do your validation or something here
             header("location:Process.php");

             }

- srini

---

这只会将表单提交到相同的页面。 - Michael Mior

现在检查一下我的答案，是否正确？因为我想提高自己的知识水平。 - srini

我不太确定你在那里想要实现什么。 - Michael Mior

但是对我来说不起作用，我不知道为什么，即使标题语句在主要的mail()代码之后，我的mail()函数也无法执行。 - Kyle Yeo

你想要重定向并更改头部位置。 - srini

Answer 7

字面上：

<form action="process.php" method="post" id="form" target="_blank">
                                                   ^^^^^^^^^^^^^^^^

即使表单已提交，这将使浏览器保留在同一页上。

但您更可能正在寻找AJAX，一些介绍。

- hakre

---

这会在另一个选项卡/窗口中打开process.php文件...？我不想要那个。我只想让表单在用户仍然在页面上的情况下提交。 - Kyle Yeo

@RenoYeo：是的，我也这么想。这就是为什么我也提到了AJAX。请参见链接的教程，以获得您想要做的基本理解。 - hakre

是的，我正在阅读关于那个的内容。我对AJAX一窍不通，希望我能快速学习。 - Kyle Yeo

Answer 8

你可以这样做（使用jQuery，未经测试）

$(function() {
    $("#form").submit(e) {
        // Prevent regular form submission
        e.preventDefault();

        // Submit the form via AJAX
        var $form = $("#form");
        $.post(
            $form.attr("action"),
            $form.serialize(),
            function() { alert("Done!"); }
        );
   }
}

- Michael Mior

Answer 9

要做到这一点，您需要使用jQuery Ajax，请参见此处{{link1：$.post}}

- Pluda