javascript 如何防止页面重定向但仍提交表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13910699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to prevent the page redirect but still submit the form
提问by stackoverflow002
My form like is this:
我的表格是这样的：
<form action="http://example.com/test.php" method="post">
.....
<input type="submit" class="submit" />
</form>
When the user clicks the submit button, I want to popup a window which says "You have submitted the information..." and the information will be passed to the test.php page.
当用户点击提交按钮时，我想弹出一个窗口，上面写着“您已经提交了信息...”，信息将被传递到 test.php 页面。
Should I use jQuery for this?
我应该为此使用jQuery吗？
回答by CS?
You can do it without using AJAX if you want and you also don't even need jQuery. You'll need to place an IFRAME somewhere in your page (even a hidden one) and modify your form by adding a TARGET to the iframe.
如果需要，您可以在不使用 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>
In you test.php file you should have a line at the end (or after processing) like this:
在您的 test.php 文件中，您应该在末尾（或处理后）有一行，如下所示：
<script>alert('you have submitted the information....');</script>
回答by Amyth
You can use ajaxto achieve this. Try something like this:
您可以使用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.
}
}
In your test.php file you can get the values using $_POSTas the ajax will use the dataString we create to send POST value, so in your test.php file.
在您的 test.php 文件中，您可以获得使用的值，$_POST因为 ajax 将使用我们创建的 dataString 来发送 POST 值，所以在您的 test.php 文件中。
$name = $_POST['name']
$email = $_POST['email']
$phone = $_POST['phone']
$mssg = $_POST['message']
回答by hsuk
Yon can create an event for your form submit like
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();
});
});
and change
和改变
<input type="submit" class="submit" />
to
到
<input type="button" class="submit" name="btn_submit" />
回答by Rajesh Kumar Singh
Here is a very simple trick for the same: - Put your form in other file. - On your current page load that file in an iframe. - You will get your submitted data on the action of the form.
这是一个非常简单的技巧： - 将您的表单放在其他文件中。- 在您当前的页面上，在 iframe 中加载该文件。- 您将获得有关表单操作的提交数据。
You will be able to access the parent window after submission of form from your action using javascript and vice-versa.
使用javascript从您的操作提交表单后，您将能够访问父窗口，反之亦然。
