表单提交并在响应的文本字段中设置值答案

【问题标题】：Form submit and set value in text field which get in response表单提交并在响应的文本字段中设置值
【发布时间】：2017-02-18 11:45:02
【问题描述】：

我在一个页面上有多个表单像这样

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

这样的回应：-

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

我想在收到回复时自动在文本字段中设置值并选择字段。

响应名称和文本字段名称相同，在 JavaScript 中怎么办？

【问题讨论】：

@Alexandru-IonutMihai 非常感谢。

标签： javascript html arrays forms symfony

【解决方案1】：

您应该使用document.getElementsByName() 方法以通过名称访问DOM element。

您可以为每个元素设置单独的值，但存在一种很好的方式来做到这一点。

您所要做的就是遍历response[0] 键。

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]);
}

获取object中所有keys的另一种方法是使用Object.keys()方法。

最后一步是设置每个DOM 元素的值。

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>

【讨论】：