Question

如何仅使用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();
    });
});

数组是aItems

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。

谢谢！

Answer 1

设法解决。

我要做的就是遍历数组并动态创建表单，然后将其发布。

$(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();       
    });
});

Answer 2

看来您的docready函数可能实际上未提交表单。尝试将其更改为：

$(document).ready(function() {
        $('#frmbasket').submit();
    });
});

因为我认为document.frmbasket是未定义的。

如何使用数组提交HTML？

2 个答案: