javascript jQuery submit()-事件覆盖表单操作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9122056/
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
jQuery submit()-event to override form action
提问by tim
I have a form, and I have some jquery code to override the submit process. But it's not working and there are no errors. I have simplified the sample code, hope I made no typos.
我有一个表单，我有一些 jquery 代码来覆盖提交过程。但它不起作用并且没有错误。我已经简化了示例代码，希望我没有打错。
Does anyone know what is wrong with the code? It doesn't come to the point where I get the alert(). The click() event works fine.
有谁知道代码有什么问题？它没有到我收到警报（）的地步。click() 事件工作正常。
I tried setting an id to the form. still nothing.
我尝试为表单设置一个 id。依然没有。
Using jquery-1.4.2.min.js
使用 jquery-1.4.2.min.js
<form name="checkout_shipping" action="checkout.php" method="post">
<div class="contentText">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 0); document.checkout_shipping.submit();">
<td width="75%" style="padding-left: 15px;">Flat price</td>
<td>.00</td>
<td align="right"><input type="radio" name="shipping" value="flat_flat" onclick="this.form.submit();" /></td>
</tr>
<tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 1); document.checkout_shipping.submit();">
<td>Pick-up</td>
<td> document.checkout_shipping.submit();
.00</td>
<td align="right"><input type="radio" name="shipping" value="pickup_pickup" checked="checked" onclick="this.form.submit();" /></td>
</tr>
</table>
</div>
</form>
<script>
$('form[name=checkout_shipping]').submit(function(e) {
e.preventDefault();
alert('Houston we have contact!');
$.ajax({
url: '/includes/checkout/payment.php',
data: false, // false for testing
type: 'POST',
cache: false,
async: false,
dataType: 'html',
error: function(jqXHR, textStatus, errorThrown) {
// ...
},
success: function(data) {
// ...
}
});
});
</script>
回答by Nick Bork
The way you're submitting the form bypasses the event handelers.
您提交表单的方式绕过了事件处理程序。
Instead of:
代替：
$(this).closest('form').submit();
Use
利用
<form name="checkout_shipping" action="checkout.php" method="post">
<div class="contentText">
<table border="0" cellspacing="0" cellpadding="2">
<tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 0); $(this).closest('form').submit();">
<td width="75%" style="padding-left: 15px;">Flat price</td>
<td>.00</td>
<td align="right"><input type="radio" name="shipping" value="flat_flat" onclick="$(this).closest('form').submit();" /></td>
</tr>
<tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 1); $(this).closest('form').submit();">
<td>Pick-up</td>
<td><form name="checkout_shipping" id="checkout_shipping" action="checkout.php" method="post">
<div class="contentText">
<table border="0" width="100%" cellspacing="0" cellpadding="2">
<tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 0);">
<td width="75%" style="padding-left: 15px;">Flat price</td>
<td>.00</td>
<td align="right"><input type="radio" name="shipping" value="flat_flat" onclick="$(this).parents('form').submit();" /></td>
</tr>
<tr onmouseover="rowOverEffect(this)" onmouseout="rowOutEffect(this)" onclick="selectRowEffect(this, 1);">
<td>Pick-up</td>
<td>##代码##.00</td>
<td align="right"><input type="radio" name="shipping" value="pickup_pickup" checked="checked" onclick="$(this).parents('form').submit();" /></td>
</tr>
</table>
</div>
</form>
<script>
$(document).ready(function(){
$('#checkout_shipping').submit(function(e) {
e.preventDefault();
alert('Houston we have contact!');
});
})
</script>
.00</td>
<td align="right"><input type="radio" name="shipping" value="pickup_pickup" checked="checked" onclick="$(this).closest('form').submit();" /></td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
$(document).ready(function(){
$('form[name=checkout_shipping]').submit(function(e) {
e.preventDefault();
alert('Got you!');
});
});
</script>
See http://jsfiddle.net/6uZuS/
Full code:
完整代码：
##代码##