提交后停留在页面答案

【问题标题】：Staying on page after submitting提交后停留在页面
【发布时间】：2012-05-03 13:55:56
【问题描述】：

只是一个问题--

我如何实际提交表单并在脚本执行时仍停留在同一页面上？

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

<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 弹出窗口说“谢谢”之类的。

如何在脚本运行时实际停留在同一页面上？

【问题讨论】：

如果你和 process.php 不在同一个页面上，ajax 是唯一的方法。如果您与 process.php 在同一页面上，请使用类似 srini 的方法回发到同一页面。

标签： php jquery html

【解决方案1】：

将表单处理逻辑与表单放在同一页面上
使用 Ajax
process.php 处理完表单后重定向回该页面

【讨论】：

我猜 Ajax 响应会自动返回到请求它的页面。所以重定向似乎有点模糊。
jQuery Ajax 将是最好的方法。有无数关于如何做到这一点的教程，所以我会留给你找到一个解释你喜欢的教程。

【解决方案2】：

在这种情况下你必须使用 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');
            }
        });
    });
});

查看示例here

请注意，不要忘记放 jquery 参考和 jquery ui 参考

【讨论】：

请注意，您可以只使用$("#form").serialize() 而不是手动构造字符串。

【解决方案3】：

我认为约翰·康德给出了最好的答案。

我会这样做，以便显示表单的 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('');

【讨论】：

【解决方案4】：

假设您使用的是 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();
  });
});

【讨论】：

这实际上并没有提交表单。
用$.ajax提交怎么样
我假设他已经有一些功能来处理提交时的 ajax 请求，但添加了注释以表明这里也可以实现这一点

【解决方案5】：

试试这样的

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

编辑：

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

             }

【讨论】：

这只会将表单提交到同一页面。
现在检查我的答案是否正确？因为我提高了我的知识
我不太确定你想在那里完成什么。
虽然对我不起作用，但我不知道为什么，但我的 mail() 函数没有执行，即使标题语句位于主 mail() 代码之后
你想要重定向更改标头位置

【解决方案6】：

我针对 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>

【讨论】：

【解决方案7】：

字面意思：

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

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

但您更有可能寻找 AJAX，some Introduction。

【讨论】：

这会在另一个选项卡/窗口中打开 process.php 文件...？我不是在寻找那个。我只想在用户仍在页面上时提交表单。
@RenoYeo：是的，我也这么认为。这就是为什么我也谈到了 AJAX。请参阅链接教程以基本了解您想要做什么。
是的，我正在阅读相关内容。我对 AJAX 完全一无所知，希望我学得快

【解决方案8】：

为此，您需要 jquery ajax，请参阅此处$.post

【讨论】：

【解决方案9】：

你可以做这样的事情（使用 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!"); }
        );
   }
}

【讨论】：