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一个按钮更新表单上的多个输入字段

回答

相关问题