3

就一个问题 -

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

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

<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 弹出窗口说“谢谢”或其他东西。

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

4

9 回答 9

3
  1. 将表单处理逻辑与表单放在同一页面上
  2. 使用 Ajax
  3. 当 process.php 处理完表单后重定向回该页面
于 2012-05-03T13:58:07.543 回答
3

在这种情况下，您必须使用 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>

​

查询

$(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 参考

于 2012-05-03T14:17:29.577 回答
2

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

我会这样做，以便显示表单的 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('');
于 2012-05-03T14:29:42.367 回答
1

假设您使用的是 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();
  });
});
于 2012-05-03T13:57:53.050 回答
1

尝试这样的事情

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

编辑：

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

             }
于 2012-05-03T14:00:00.603 回答
1

我瞄准了一个 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>

于 2016-04-24T01:10:40.917 回答
0

字面上地：

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

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

但是您更有可能寻找 AJAX，一些 Introduction。

于 2012-05-03T13:59:26.763 回答
0

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

于 2012-05-03T14:00:44.113 回答
0

你可以做这样的事情（使用 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!"); }
        );
   }
}
于 2012-05-03T14:01:57.077 回答