我想序列化使用jQuery的表单数据

我已经粘贴我的HTML代码下面。

HTML

<div class="row"> 
    <div class="col-md-12 col-sm-12"> 
     <div class="ibox-content"> 
      <form id="product"> 
       <table class="table"> 
        <thead> 
         <tr> 
          <th>Action</th> 
          <th>Product Name</th> 
          <th>Price</th> 
          <th>Qty</th> 
          <th>Total</th> 
         </tr> 
        </thead> 
        <tbody> 
         @foreach (var _product in Model.ProductList) 
         { 
          <tr> 
           <td><a href="javascript:;">Details</a></td> 
           <td> 
            <strong> 
             @_product.name 
             <input type="hidden" name="productId" value="@_product.productId" /> 
            </strong> 
           </td> 
           <td id="price">@_product.wholesalePrice</td> 
           <td id="quantity"><input style="width:50px;" name="qty" value="0"><input type="hidden" name="total" id="rowTotal" /></td> 
           <td id="value"></td> 
          </tr> 
         } 
        </tbody> 
       </table> 
      </form> 
      <div class="ibox-content"> 
       <button id="totalCal" class="btn btn-primary pull-right">Calculate</button> 
      </div> 
      <table class="table invoice-total"> 
       <tbody> 
        <tr> 
         <td><strong>Sub Total :</strong></td> 
         <td id="result">$1026.00</td> 
        </tr> 
        <tr> 
         <td><strong>Shipping :</strong></td> 
         <td id="Shipping">$235.98</td> 
        </tr> 
        <tr> 
         <td><strong>TOTAL :</strong></td> 
         <td id="finalTotal">$1261.98</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div>

jQuery函数

function GetTblRow() { 
    var data = $("#product").serializeArray(); 
    var from = JSON.stringify(data); 
    console.log(from); 
};

输出

[{"name":"productId","value":"1"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"2"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"3"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"4"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"5"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"6"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"7"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"8"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"9"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"10"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"12"},{"name":"qty","value":"0"},{"name":"total","value":"0"},{"name":"productId","value":"13"},{"name":"qty","value":"0"},{"name":"total","value":"0"}]

期望输出

[{"ProductId":"1","qty":"0","total":"0"},"ProductId":"1","qty":"0","total":"0"},{"ProductId":"2","qty":"0","total":"0"},{"ProductId":"3","qty":"0","total":"0"},{"ProductId":"4","qty":"0","total":"0"}]

我做上面连载的形式数据的代码，但我不能得到预期的输出上面。那么你能帮助我吗？

来源

2017-01-23 Nirav Dudhat

什么值的数据变量？ –

谢谢@vivek nuna –

[{“name”：“productId”，“value”：“1”}，{“name”：“qty”，“value”：“0”}，{“name”：“total “ ”值“： ”0“}，{ ”名称“： ”的productId“， ”值“： ”2“}，{ ”名称“： ”数量“， ”值“： ”0“}，{” 名“：”total“，”value“：”0“}] –

你不能直接使用serializeArray()获得预期的JSON你必须预期的结果，从阵列

<script> 
$.fn.serializeObject = function() 
{ 
    var o = {}; 
    var a = this.serializeArray(); 
    $.each(a, function() { 
     if (o[this.name] !== undefined) { 
      if (!o[this.name].push) { 
       o[this.name] = [o[this.name]]; 
      } 
      o[this.name].push(this.value || ''); 
     } else { 
      o[this.name] = this.value || ''; 
     } 
    }); 

    return o; 
}; 

$(function() { 
    $("#totalCal").click(function(){ 
     alert(JSON.stringify($('#product').serializeObject())); 

     return false; 
    }); 
}); 
</script>

来源

2017-01-23 11:14:05 Usman

{”productId“：[”1“，”2“，”3“ ， “4”， “5”， “6”， “7”， “8”， “9”， “10”， “12”， “13”]， “数量”：[ “0”， “0” ， “0”， “0”， “0”， “0”， “0”， “0”， “0”， “0”， “0”， “0”]， “总”：[ “0” ，“0”，“0”，“0”，“0”，“0”，“0”，“0”，“0”，“0”，“0”，“0”]} 输出 –

分开你可以使用一些自定义代码来格式化你的阵列。这里是最简单的解决方案：

function getFormattedArray(array){ 
    var result = []; 

    for(var currentPosition = 0;currentPosition < array.length; currentPosition += 3) { 
    result.push({ProductId: array[currentPosition].value, 
       qty: array[currentPosition+1].value, 
       total: array[currentPosition+1].value});  
    } 

    return result; 
}

来源

2017-01-23 11:14:17

我想序列化使用jQuery的表单数据

回答

相关问题