Jquery one button updates multiple input fields on form

Question

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/

Roko C. Buljan · Accepted Answer · 2016-08-01 09:21:45Z

1

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>

edited Aug 1, 2016 at 9:21

answered Aug 1, 2016 at 3:39

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

borie88 Over a year ago

This works, but what if my field name has a dash in it?

borie88 Over a year ago

@IsmailRBOUH That was perfect, thank you so much!!! & Roko for the original answer too

Roko C. Buljan Over a year ago

@borie88 dashes? you use double quotes: addVal({"foo-baz":"Hello", bar:"World"})

Ismail RBOUH · Accepted Answer · 2016-08-01 03:27:07Z

0

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.

answered Aug 1, 2016 at 3:27

Ismail RBOUH

10.5k2 gold badges26 silver badges37 bronze badges

Comments

Tyler Roper · Accepted Answer · 2016-08-01 03:39:57Z

0

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/

edited Aug 1, 2016 at 3:39

answered Aug 1, 2016 at 3:20

Tyler Roper

21.7k6 gold badges35 silver badges58 bronze badges

Collectives™ on Stack Overflow

Jquery one button updates multiple input fields on form

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related