jquery一個按鈕更新表單上的多個輸入字段

我想單擊一個按鈕時更新表單中的兩個輸入字段。在使用document.getElementById時，我確實擁有了所有的代碼，但是我使用的表單剝離了我設置的ID，所以我無法使用getbyid。如果我知道表格字段名稱，我怎麼能改變我的功能來做同樣的事情？請注意，我的表單有兩個以上的字段，包括提交按鈕，所以我不想更新這些字段。jquery一個按鈕更新表單上的多個輸入字段

這是我之前（與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]; 
     } 

    }

小提琴： http://jsfiddle.net/qwz47phx/3/

來源

2016-08-01 borie88

編輯以更簡單易讀的方式

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>

來源

2016-08-01 03:39:39

這工作，但什麼如果我的字段名稱有一個破折號嗎？ – borie88

@IsmailRBOUH這是完美的，非常感謝你！＆Roko原來的回答也太 – borie88

@ borie88破折號？你使用雙引號：'addVal（{「foo-baz」：「Hello」，bar：「World」}）' –

您可以使用一個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/

來源

2016-08-01 03:20:47 Santi

如果你有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/

我希望這會幫助你。

來源

2016-08-01 03:27:07

jquery一個按鈕更新表單上的多個輸入字段

回答

相關問題