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从您的操作提交表单后，您将能够访问父窗口，反之亦然。

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

4 个答案: