Question

我正在尝试在单击一个按钮时更新表单中的两个输入字段。我在使用document.getElementById时确实拥有所有代码，但是我使用的表单剥离了我设置的ID，因此我无法使用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];
      }

  }

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

Answer 1

使用更简单易读的方法编辑

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。要么必须更改名称以适应功能，要么功能可能稍微复杂一些。

小提琴： 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/

我希望这会对你有所帮助。

Jquery一个按钮更新表单上的多个输入字段

3 个答案: