CODEWITHSUNDEEP
javascriptjqueryhtmlforms
borie88
borie88

Reputation: 83

Jquery one button updates multiple input fields on form

I am trying to update two input fields in a form when clicking one button. I actually had all the code right when using document.getElementById, but the form that I'm using strips the ID's I set away, so I can't use getbyid. If I know the form field name, how could I change my function to do the same thing? Please note that my form has more than two fields, including a submit button, so I don't want to update those.

This is what I used before (with the ID selector) 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/

Upvotes: 1

Views: 1843

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206151

Edited with a much simpler and readable approach

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>

Or with native 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>

Upvotes: 1

Tyler Roper
Tyler Roper

Reputation: 21672

You can use a jQuery attribute= selector to grab by name instead of ID.

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

}

Please note that this function will be looking for names of info1, info2, info3, etc, just as your original script did. However, in the HTML, you have names of info and info-1. Either the names will have to be changed to fit the function, or the function can be slightly more intricate.

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

Upvotes: 0

Ismail RBOUH
Ismail RBOUH

Reputation: 10460

If you have problems with IDs you can use querySelector to select inputs by name like this:

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>

Demo: http://jsfiddle.net/iRbouh/qwz47phx/6/

I hope this will help you.

Upvotes: 0

Related Questions