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

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

Answer 1

将表单处理逻辑放在与表单
使用Ajax
处理表单

Answer 2

在这种情况下你必须使用ajax。

基本上，您需要使用ajax发布所有数据。在服务器端，您需要使用$ _POST [＆＃39; name＆＃39;]获取所有参数，就像通常在服务器脚本中一样。

FORM

<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引用

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('');

Answer 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();
  });
});

Answer 5

尝试这样的事情

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

编辑：

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

             }

Answer 6

我定位了一个iframe来解决问题，而且效果很好。

＆＃13;

<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>

＆＃13;

Answer 7

字面上：

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

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

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

Answer 8

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

Answer 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!"); }
        );
   }
}

提交后留在页面上

9 个答案: