Jquery one buttonはフォーム上の複数の入力フィールドを更新します

Question

フォーム内の2つの入力フィールドを1つのボタンをクリックして更新しようとしています。私は実際にdocument.getElementByIdを使用するときにすべてのコードを実際に持っていましたが、私が使用しているフォームはIDを取り除き、getbyidを使用することはできません。 フィールド名がの場合、どうすれば同じことをするために私の関数を変更できますか？フォームには送信ボタンを含む2つ以上のフィールドがあるので、それらのフィールドを更新したくないことに注意してください。

これは私が のHTML（IDセレクタ付き）の前に使用したものである：

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

    } 

フィドル： http://jsfiddle.net/qwz47phx/3/

Answer 1

：

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です。関数に合うように名前を変更するか、関数をやや複雑にする必要があります。

フィドル：http://jsfiddle.net/qwz47phx/8/

Answer 3

あなたはIDの問題が発生した場合は、このような名前で入力を選択し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/

私は、これはあなたを助けることを願っています。

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 +）とはるかに単純で読みやすいアプローチで編集