Форма представить и установить значение в текстовое поле, которое получают в ответ

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

Response Как это: -

[{ 
    "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].

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

Другой метод, чтобы получить все keys о качестве object является использование метода 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>