Question

到目前为止，我能够添加动态字段并获取其值并设置值数据并转换为json，

我遇到的问题是我无法将值设置为输入，因为我想要它。

<form action="doSomethmg" method="post" id="createDoc" name="createDoc" class="form-horizontal">
<div class="form-body">
<div class="form-group">
<label class="col-md-2 control-label">Document Group</label>
<div class="col-md-4">
<select onchange="" name="documentGroupId" id="documentGroupId" class="form-control">
          <option value="">--Select--</option>
          <option value="PURCHASE_ORDER">Purchase Order</option>
          <option value="SHIPPING_ORDER">Shipping Order</option>
</select>
</div>
</div>



<div class="form-group">
<label class="col-md-2 control-label">Document Type</label>
<div class="col-md-4">
<select class="form-control" name="documentTypeId" id="documentTypeId"><option>--Select--</option><option value="BILL_OF_LADING">Bill of Lading</option><option value="hhh">Shipment</option><option value="Sip001">null</option><option value="hhhh">null</option>
</div>
</div>


<div class="form-group">
<label class="col-md-2 control-label">Temp Id</label>
<div class="col-md-4">
<input type="text" class="form-control" name="documentTempId" id="documentTempId">
</div>
</div>




 <div id="input1" style="margin-bottom:4px;" class="clonedInput">

        label1: <input type="text" name="label1" id="label123" value="">  
        Field Name: <input type="text" name="name1" id="name1" value="">   

    </div><div id="input2" style="margin-bottom:4px;" class="clonedInput">

        label1: <input type="text" name="oiio" id="name2" value="">  
        Field Name: <input type="text" name="name1" id="name1" value="">   

    </div><div id="input3" style="margin-bottom:4px;" class="clonedInput">

        label1: <input type="text" name="oiio" id="name3" value="">  
        Field Name: <input type="text" name="name1" id="name1" value="">   

    </div>

    <div>
        <input type="button" id="btnAdd" value="add new field">
        <input type="button" id="btnDel" value="remove field" disabled="disabled">
    </div>

<div class="">
<div class="row">
<div class="col-md-offset-2 col-md-9">

`
<button type="submit" class="btn btn-primary btn-xs">Create</button>
</div>
</div>
</div>


</div></form>

<script>
           function getDocumentGroup(){
             var documentGroupId = document.getElementById("documentGroupId").value;
             $.ajax({
             type: "POST",
             url: "getDocumentTemplateList",
             data:  {"documentGroupId": documentGroupId},
             success: function (data) {
             $("#documentTypeId").empty();
              $("#documentTypeId").append('<option>--Select--</option>');
                    for(var i=0;i<data.length;i++)
                    {
                    $("#documentTypeId").append('<option value="'+data[i].docTypeId+'">'+data[i].docTypeName+'</option>');
                    }
                }
                });
         }
           </script>

           <script>

   $('#btnAdd').click(function() {
    var num       = $('.clonedInput').length;

    var newNum    = new Number(num + 1);  

     value = $("#label123").attr('value'); 


    var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);


   // newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

   newElem.children(':first').attr('id', 'name' + newNum).attr('name', value);




    $('#input' + num).after(newElem);


    $('#btnDel').attr('disabled','');

    if (newNum == 15)
        $('#btnAdd').attr('disabled','disabled');
});

$('#btnDel').click(function() {
    var num    = $('.clonedInput').length;   
    $('#input' + num).remove();       

    $('#btnAdd').attr('disabled','');

    if (num-1 == 1)
        $('#btnDel').attr('disabled','disabled');
});


$('#btnDel').attr('disabled','disabled');


     </script>
     <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() {
    $('form').submit(function() {  
    alert("hereee");
        $('#result').text(JSON.stringify($('form').serializeObject()));
        return false;
    });
});
     </script>

我想让用户添加标签和值，以便我可以将其转换为json日期以进行进一步处理。

现在返回的响应是

{  
   "documentGroupId":"PURCHASE_ORDER",
   "documentTypeId":"BILL_OF_LADING",
   "documentTempId":"",
   "label1":"name1",
   "name1":[  
      "myname",
      "yoourName",
      "yoourName123"
   ],
   "oiio":[  
      "name2",
      "name123"
   ]
}

非常感谢任何帮助。

Answer 1

只需快速浏览一下，我就可以说当您使用jQuery和输入时，您希望使用the .val() method代替.value

以此行为例：

var value = $('#label123').attr('value');

应该是

var value = $('#label123').val();

如果您想设置该输入的值：

var myValue = 'some data';
$('#label123').val(myValue);

尝试将来电替换为

.attr('value');

致电：

.val();

而是看看你是否无法获得所需的结果。

我试图动态创建一个表单并将表单数据转换为json

1 个答案: