JQuery одна кнопка обновляет несколько полей ввода в форме

Question

Я пытаюсь обновить два поля ввода в форме при нажатии одной кнопки. У меня на самом деле был весь код справа при использовании document.getElementById, но форма, которую я использую, убирает идентификаторы, которые я установил, поэтому я не могу использовать getbyid. Если мне известна форма имя поля, как я могу изменить свою функцию, чтобы сделать то же самое? Обратите внимание, что моя форма имеет более двух полей, включая кнопку отправки, поэтому я не хочу их обновлять.

Это то, что я использовал раньше (с селектором ID) Html:

<input type="text" name="field-1" id="info1"> 
<input type="text" name="field" id="info2"> 
<a href="#" onclick="addTxt(['value1','value2'],'info','2')">Populate</a> 

JS:

function addTxt(val, id,no) 
    { 
     var id = id; 
     for(var i=1;i<=no;i++){ 
     document.getElementById(id+i).value = val[i-1]; 
     } 

    } 

Fiddle: http://jsfiddle.net/qwz47phx/3/

Answer 1

Edited с гораздо более простым и читаемым подход

function addVal(obj) { 
 
    event.preventDefault(); // Prevent page scrolltop on anchor click 
 
    $.each(obj, function(k, v) { 
 
    $("input[name='"+ k +"']").val(v); 
 
    }) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="text" name="foo"> 
 
<input type="text" name="bar"> 
 

 
<a href="#" onclick='addVal({foo:"Hello", "bar-baz":"World"})'>Populate</a>

Или с носителями JS (ES5 +):

function addVal(obj) { 
 
    Object.keys(obj).forEach(function(name) { 
 
    document.querySelector('input[name="' + name + '"]').value = obj[name];  
 
    }); 
 
}

<input type="text" name="foo"> 
 
<input type="text" name="bar"> 
 
<input type="text" name="name-with-dashes"> 
 

 
<a href="#" onclick='addVal({foo:"Hello", bar:"World", "name-with-dashes": "Works !"})'>Populate</a>

Answer 2

Вы можете использовать селектор JQuery attribute= для захвата по имени вместо ID.

function addTxt(val, id,no) 
    { 
     for(var i=1;i<=no;i++){ 
     var name = id+i; 
     $("input[name='"+name+"']").val(val[i-1]); 
    } 

} 

Пожалуйста, обратите внимание, что эта функция будет искать имена info1, info2, info3 и т.д., так же, как сделал ваш оригинальный сценарий. Однако в HTML вы имеете имена info и info-1. Либо имена должны быть изменены, чтобы соответствовать функции, либо функция может быть немного более сложной.

Fiddle:http://jsfiddle.net/qwz47phx/8/

Answer 3

Если у вас есть проблемы с идентификаторами вы можете использовать querySelector для выбора входов по имени, как это:

JS:

function addTxt(val, id, no) { 
    for (var i = 1; i <= no; i++) { 
    document.querySelector('input[name="' + id + i + '"]').value = val[i - 1]; 
    } 
} 

HTML:

<input type="text" name="info1" id="info1"> 
<input type="text" name="info2" id="info2"> 
<a href="#" onclick="addTxt(['id','num'],'info','2')">Populate</a> 

Демо:http://jsfiddle.net/iRbouh/qwz47phx/6/

Я надеюсь, что это поможет.