I am trying to create a form dynamically and convert form data to json

Question

So far I am able to add dynamic fields and get their values and set values data and convert to json,

the problem that i facing is i am not able to set the value to the input as i want it to be.

<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>

I want to let the user add both label and value ,so that i can convert it to json date for further process.

the response that is returned right now is

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

Any help would be greatly appreciated.

What does this have to do with `freemarker`? – Oleg Sep 20 '17 at 01:05 — Oleg, Sep 20 '17 at 01:05

score 0 · Answer 1 · answered Sep 19 '17 at 15:12

0

Well with just a quick glance I can say that when you're working with jQuery and inputs, you want to use the .val() method instead of .value

Take this line for example:

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

It should be

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

And if you wanted to set the value of that input:

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

Try replacing calls to

.attr('value');

With calls to:

.val();

instead and see if you're not able to get the results you want.

answered Sep 19 '17 at 15:12

Robbie Milejczak

5,664
3
32
65

ii dont find difference between the two – manju Sep 20 '17 at 04:49
the problem here is i need to dynamically set both text field name and value dynamically – manju Sep 20 '17 at 04:50
There is a massive difference between the two. One references an objects attributes, the other is referencing a property. You can't do anything dynamically with the value attribute, as it is only the value in the markup on pageload/document ready. The value property is what you want, so you should be using .val() or at the very least .prop('value'). .attr will NOT work for what you are trying to do. https://stackoverflow.com/questions/8312820/jquery-val-vs-attrvalue – Robbie Milejczak Sep 20 '17 at 13:26

I am trying to create a form dynamically and convert form data to json

1 Answers1