javascript - 如何防止页面重定向但仍提交表单

Question

我的表格是这样的：

<form action="http://example.com/test.php" method="post">
.....
<input type="submit" class="submit" />
</form>

当用户单击提交按钮时，我想弹出一个窗口，上面写着“您已提交信息...”，信息将传递到 test.php 页面。

我应该为此使用jQuery吗？

Answer 1

如果你愿意，你可以不使用 AJAX 来做到这一点，而且你甚至不需要 jQuery。您需要在页面的某处放置一个 IFRAME（甚至是隐藏的），并通过向 iframe 添加一个 TARGET 来修改您的表单。

<iframe name="formSending"></iframe>
<form action="http://example.com/test.php" method="post" target="formSending">
.....
<input type="submit" class="submit" />
</form>

在您的 test.php 文件中，您应该在末尾（或处理后）有一行，如下所示：

<script>alert('you have submitted the information....');</script>

Answer 2

您可以使用ajax来实现这一点。尝试这样的事情：

<form action="http://example.com/test.php" method="post">
<input type="text" name="name" />
<input type="text" name="email" />
<input type="text" name="phone" />
<textarea name="message"></textarea>
<input type="submit" class="submit" onclick="formSubmit(event)" />
</form>

function formSubmit(e){

         e.preventDefault(); //This will prevent the default click action.

        // Create DataString
        var dataString = '&name=' + $('input[name=name]').val() +
                         '&email=' + $('input[name=email]').val() +
                         '&phone=' + $('input[name=phone]').val() +
                         '&message=' + $('textarea[name=message]').val() +

        $.ajax({
            type: "POST",
            url: "http://example.com/test.php",
            data: dataString,
            success: function() {
                alert('Form Successfully Submitted');
            },  
            error: function() {
                alert('There was an error submitting the form');
            }   
        }); 
        return false; // Returning false will stop page from reloading.
    }   
}

在您的 test.php 文件中，您可以获取值，$_POST因为 ajax 将使用我们创建的 dataString 来发送 POST 值，所以在您的 test.php 文件中。

$name = $_POST['name']
$email = $_POST['email']
$phone = $_POST['phone']
$mssg = $_POST['message']

Answer 3

Yon 可以为您的表单提交创建一个事件，例如

    var html_custom ='';
    $(document).ready(function(){
        $('#btn_submit').click(function(){
          html_custom+= "Name : " + $('#name').val();
          html_custom+= "Email : " + $('#email').val();
          html_custom+= "<a href='javascript:void(0);' id='form_submit'>Submit</a>";
          //now populate this custom html on the div which is going to be shown as pop up.
        });
       $('#form_submit').click(function(){
          $('form').submit();
        });

    });

和改变

       <input type="submit" class="submit" />

至

       <input type="button" class="submit" name="btn_submit" />

Answer 4

这是一个非常简单的技巧： - 将您的表单放入其他文件中。- 在您当前的页面上将该文件加载到 iframe 中。- 您将获得有关表单操作的提交数据。

在使用 javascript 从您的操作提交表单后，您将能够访问父窗口，反之亦然。