如何仅使用javascript发布html表单(带有数组数据(?
嗨,伙计们,
我有一个简单的 HTML,用户可以在其中从 html 表中选择多行。我有一个按钮,它将向后端提交表单。我已经使用单个条目进行了测试(在我对数组进行更改之前(。
我尝试过研究,这就是我现在所处的位置。我尝试提交表格,但我认为值未正确传递。
如果有人可以查看我的代码并指导我,那将不胜感激。
<form id="frmbasket" name="frmbasket" action="SAPEVENT:POST" method="post" target="_top">
<div class="container">
<table id=table class="scroll">
<thead>
<tr>
<th>Material</th>
<th>MaterialType</th>
<th>MaterialGroup</th>
<th>MaterialDesc</th>
<th>Plant</th>
<th>Storage Location</th>
<th>Price</th>
<th>Quantity</th>
<th>Item Category</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
<input type="hidden" id="fDesc" name="aItems[NEW_ITEM-DESCRIPTION]">
<input type="hidden" id="fMat" name="aItems[NEW_ITEM-MATNR">
<input type="hidden" id="fMgroup" name="aItems[NEW_ITEM-MATGROUP]">
<input type="hidden" id="fQty" name="aItems[NEW_ITEM-QUANTITY]">
<input type="hidden" name="NEW_ITEM-UNIT[1]" value = "EA">
<input type="hidden" name="aItems[NEW_ITEM-PRICE]">
<input type="hidden" name="NEW_ITEM-PRICEUNIT[1]" value = "5">
<input type="hidden" name="NEW_ITEM-CURRENCY[1]" value = "USD">
<input type="hidden" name="NEW_ITEM-LEADTIME[1]" value = "1">
<input type="hidden" name="NEW_ITEM-VENDOR[1]" value = "">
<input type="hidden" name="NEW_ITEM-VENDORMAT[1]" value = "">
<input type="hidden" name="NEW_ITEM-MANUFACTCODE[1]" value = "">
<input type="hidden" name="NEW_ITEM-MANUFACTMAT[1]" value = "">
<input type="hidden" name="NEW_ITEM-CONTRACT[1]" value = "">
<input type="hidden" name="NEW_ITEM-CONTRACT_ITEM[1]" value = "">
<input type="hidden" name="NEW_ITEM-SERVICE[1]" value = "">
<input type="hidden" name="NEW_ITEM-EXT_QUOTE_ID[1]" value = "">
<input type="hidden" name="NEW_ITEM-EXT_QUOTE_ITEM[1]" value = "">
<input type="hidden" name="NEW_ITEM-EXT_PRODUCT_ID[1]" value = "">
<input type="hidden" name="NEW_ITEM-LONGTEXT_1:132[1]" value = "longtext_1: Test Text">
<input type="hidden" id="fCustField1" name="aItems[NEW_ITEM-CUST_FIELD1]">
<input type="hidden" name="NEW_ITEM-CUST_FIELD2[1]" value = "custf 1.2">
<input type="hidden" name="NEW_ITEM-CUST_FIELD3[1]" value = "custf 1.3">
<input type="hidden" name="NEW_ITEM-CUST_FIELD4[1]" value = "custf 1.4">
<input type="hidden" name="NEW_ITEM-CUST_FIELD5[1]" value = "custf 1.5">
</div>
</form>
$(document).ready(function() {
$("#btnSubmit").click(function() {
document.frmbasket.submit();
});
});
数组是 a 项
aItems
(4) [{…}, {…}, {…}, {…}]
0: {KeyIndex: 1, NEW_ITEM-MATNR: "5", NEW_ITEM-MATGROUP: "31260000", NEW_ITEM-DESCRIPTION: "Casings", NEW_ITEM-CUST_FIELD1: "N", …}
1: {KeyIndex: 3, NEW_ITEM-MATNR: "1511", NEW_ITEM-MATGROUP: "31260000", NEW_ITEM-DESCRIPTION: "Casings", NEW_ITEM-CUST_FIELD1: "N", …}
2: {KeyIndex: 5, NEW_ITEM-MATNR: "1513", NEW_ITEM-MATGROUP: "31260000", NEW_ITEM-DESCRIPTION: "Casings", NEW_ITEM-CUST_FIELD1: "N", …}
3: {KeyIndex: 7, NEW_ITEM-MATNR: "1514", NEW_ITEM-MATGROUP: "31260000", NEW_ITEM-DESCRIPTION: "Casings - No MMSL", NEW_ITEM-CUST_FIELD1: "N", …}
length: 4
__proto__: Array(0)
我没有使用 PHP,所以我想知道我是否仍然可以提交数组中有多个条目的表单?我没有PHP的经验,这就是为什么我只是尝试使用javascript。
谢谢!
设法解决了它。
我所要做的就是遍历我的数组并动态创建表单,然后发布它。
$(document).ready(function() {
$("#btnSubmit").click(function() {
alert("Submitted");
// var $form = $('<form />', { action: 'SAPEVENT:POST', method: 'post' });
//Create form
aItems.unshift("Blank"); //OCI starts with parameter[1] so if we loop through array, array[0] won't be picked
var form = $(document.createElement('form'));
$(form).attr("action", "SAPEVENT:POST");
$(form).attr("method", "post");
for (var index = 0; index < aItems.length; ++index) {
var MatDesc = $("<input>").attr("type", "hidden").attr("name", 'NEW_ITEM-DESCRIPTION' + '[' + index + ']').val(aItems[index]["NEW_ITEM-DESCRIPTION"]);
var MatNo = $("<input>").attr("type", "hidden").attr("name", 'NEW_ITEM-MATNR' + '[' + index + ']').val(aItems[index]["NEW_ITEM-MATNR"]);
var MatGrp = $("<input>").attr("type", "hidden").attr("name", 'NEW_ITEM-MATGROUP' + '[' + index + ']').val(aItems[index]["NEW_ITEM-MATGROUP"]);
var CustField1 = $("<input>").attr("type", "hidden").attr("name", 'NEW_ITEM-CUST_FIELD1' + '[' + index + ']').val(aItems[index]["NEW_ITEM-CUST_FIELD1"]);
var Price = $("<input>").attr("type", "hidden").attr("name", 'NEW_ITEM-PRICE' + '[' + index + ']').val(aItems[index]["NEW_ITEM-PRICE"]);
var Qty = $("<input>").attr("type", "hidden").attr("name", 'NEW_ITEM-QUANTITY' + '[' + index + ']').val(aItems[index]["NEW_ITEM-QUANTITY"]);
$(form).append($(MatDesc));
$(form).append($(MatNo));
$(form).append($(MatGrp));
$(form).append($(CustField1));
$(form).append($(Price));
$(form).append($(Qty));
};
form.appendTo( document.body )
$(form).submit();
});
});
看起来您的 docready 函数实际上可能没有提交表单。尝试将其更改为:
$(document).ready(function() {
$('#frmbasket').submit();
});
});
因为我认为document.frmbasket是未定义的。