我基本上正在尝试实现http://www.impressivewebs.com/html5-form-attribute/
我有一个正在输出的购物车,中间夹着一个html表。在表格下面,我现在有我的提交按钮。
<thead>
<tr>
<th>ITEM</th>
<th>PRICE</th>
<th>WEIGHT (Kg)</th>
<th>QTY</th>
<th>SUBTOTAL</th>
<th></th>
</tr>
</thead>
<tbody>
<form action='shop.php' id='cart' method='post'>
<?php echo $cartOutput; ?>
</form>
<tr>
<td class="totals"><strong>Total</strong></td>
<td class="totals"> </td>
<td class="totals"><?php if (isset($weightTotal)) { echo $weightTotal . 'kg';} ?> </td>
<td class="totals"><?php if (isset($quantityTotal)) { echo $quantityTotal; } ?></td>
<td class="totals"><strong><?php if (isset($cartTotal)) { echo '$' . $cartTotal; } ?></strong></td>
<td class="totals"></td>
</tr>
</tbody>
/*此处的代码整理表*/
<div class="col-lg-12 col-md-12 col-xs-12 remove-padding">
<button type="submit" class="btn btn-default" form="cart" name="adjustButton" id="adjust-button">UPDATE CART</button>
<button type="button" class="btn btn-default" form="contact" name="order" id="order-button" onclick="confirmOrder()" >ORDER NOW</button>
</div>
因此,因为我希望布局的外观。。我无法将按钮放在表单中。我希望能够将更新按钮放在购物车下面。现在订单按钮不是提交按钮,而是一个按钮。我可以把它放在它自己的表单部分下面,但现在我强制它通过javascript进行确认,然后如果他们说OK,就通过JS提交请求。
我想在支持IE 9+10等浏览器的同时保留这个功能。根据我的发现,form=""
在IE 中不起作用
我能做到这一点吗?
将form
标记放在所有"相关"内容(包括提交按钮)之外:
<body>
<form>
<table>
</table>
<div>
<button>
</button>
</div>
</form>
</body>
如果按钮不能在窗体内部,请将窗体设置在按钮
这应该适用于所有浏览器:
document.getElementById('cart').submit();
您可以将其放在onClick中,并在需要时将其封装在函数中。
编辑:由于问题(根据下面的评论)是您在表单之外有输入:实际上,最简单的解决方案,也是不涉及Javascript的解决方案是将</form>
放在页面的末尾(这样您的所有输入和按钮都将在表单中)。当然,如果你需要在页面上有多个表单,这是不可行的,而且根据页面的布局,这甚至可能是不可能的。
如果您的提交按钮在表单之外,并且您在表单之外有一些输入元素,那么发送此表单(不使用ajax)的最简单方法是制作一个表单并将提交按钮放入其中。
由于您的输入字段在表单之外,您将在表单内部复制这些输入字段,并使用display:none;
将其隐藏。当用户更改可见输入字段的值时,您将使用javascript更改隐藏输入字段的数值。
通过这种方式,您可以以通常的方式发送表单,而无需在表单内部输入字段。。。。。
您可以将外部表单元素复制到表单内部,并使用JS同步它们。
http://jsfiddle.net/rudiedirkx/y0cmda4o/
if ( !('fform' in document.createElement('input')) ) {
$('input[fform], textarea[fform], select[fform]').on('change', function(e) {
this.$hidden.val(this.value);
}).each(function(i, el) {
var formId = $(el).attr('fform'),
$form = $('#' + formId),
$hidden = $('<input name="' + el.name + '" type="hidden">');
$form.append($hidden);
el.$hidden = $hidden;
});
}
正如您所看到的,我使用了fform
属性来触发if语句。将其更改为form
并在IE.中尝试
免责声明:
- 这不适用于多值元素(如
select[multiple]
),或者您必须添加一些严肃的JS来伪造这些多值 - 这不会发送触发的按钮值。普通提交按钮只发送其值,而不发送其他提交按钮的值。你可以添加一个
onclick
来处理这个。。。如果你使用它