Question

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

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

Answer 1

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

您可以为每个元素设置值分隔，但存在一种美妙的方式来执行此操作。

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

＆＃13;

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

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

表单提交和设置值在文本字段中得到响应

1 个答案: