Form submit and set value in text field which get in response

Question

I have Multiple Form On single Page Like this

<form name="abc" id="frm1">
   <input type="text" name="ClientName">
   <select name="clientAdd">
      <option value="1">Abc</option>
      <option value="2">xyz</option>
      <option value="3">pqr</option>
   </select>
   <input type="button" class="btnSave">
</form>

<form name="abc" id="frm2">
       <input type="text" name="agentName">
       <select name="agentAdd">
          <option value="1">Abc</option>
          <option value="2">xyz</option>
          <option value="3">pqr</option>
       </select>
       <input type="button" class="btnSave">
</form>

<form name="abc" id="frm3">
       <input type="text" name="supplierName">
       <select name="supplierAdd">
          <option value="1">Abc</option>
          <option value="2">xyz</option>
          <option value="3">pqr</option>
       </select>
       <input type="button" class="btnSave">
</form>

<form name="abc" id="frm4">
       <input type="text" name="ArtistName">
       <select name="ArtistAdd">
          <option value="1">Abc</option>
          <option value="2">xyz</option>
          <option value="3">pqr</option>
       </select>
       <input type="button" class="btnSave">
</form>

Js :-

$('.btnSave').click(function () {
     var thisClass = $(this);
     var addFormData = thisClass.closest('form').serializeArray();
     var result = {};
     $.each(addFormData, function (i, field) {
         result[field.name] = field.value;
     });
     $.ajax({
         type: 'POST',
         url: Routing.generate('book_client_edit_detail'),
         data: {'data': result},
         success: function (data) {
              console.log(data);
         } 
     });
 });

Response Like This:-

[{
    "ClientName":abc,
    "clientAdd":"1",
    "agentName":abc,
    "agentAdd":"1",
    "supplierName":abc,
    "supplierAdd":"1",
    "ArtistName":abc,
    "ArtistAdd":"1"
}]

I want automatically set value in text filed and select field When I got response.

Response name and text Field name are the same, so how can I do in JavaScript?

Answer 1

You should use document.getElementsByName() method in order to access a DOM element by its name.

You can set value separated for each element, but exist a beautiful way to do this.

All you have to do is to iterate through response[0] keys.

var response=[{"ClientName":'abc',"clientAdd":"1","agentName":'abc',"agentAdd":"1","supplierName":'abc',"supplierAdd":"1","ArtistName":'abc',"ArtistAdd":"1"}];
for(key in response[0]){
   console.log(key+':'+response[0][key]);
}

Another method to obtain all keys of an object is to use Object.keys() method.

The last step consists in setting the value of each DOM element.

document.getElementsByName(key)[0].value=response[0][key];

var response=[{"ClientName":'abc',"clientAdd":"1","agentName":'abc',"agentAdd":"1","supplierName":'abc',"supplierAdd":"1","ArtistName":'abc',"ArtistAdd":"1"}];
for(key in response[0]){
   document.getElementsByName(key)[0].value=response[0][key];
}

<form name="abc" id="frm1">
   <input type="text" name="ClientName">
   <select name="clientAdd">
      <option value="1">Abc</option>
      <option value="2">xyz</option>
      <option value="3">pqr</option>
   </select>
   <input type="button" value="Save" class="btnSave">
</form>

<form name="abc" id="frm2">
       <input type="text" name="agentName">
       <select name="agentAdd">
          <option value="1">Abc</option>
          <option value="2">xyz</option>
          <option value="3">pqr</option>
       </select>
       <input type="button" value="Save" class="btnSave">
</form>

<form name="abc" id="frm3">
       <input type="text" name="supplierName">
       <select name="supplierAdd">
          <option value="1">Abc</option>
          <option value="2">xyz</option>
          <option value="3">pqr</option>
       </select>
       <input type="button" value="Save" class="btnSave">
</form>

<form name="abc" id="frm4">
       <input type="text" name="ArtistName">
       <select name="ArtistAdd">
          <option value="1">Abc</option>
          <option value="2">xyz</option>
          <option value="3">pqr</option>
       </select>
       <input type="button" value="Save" class="btnSave">
</form>