javascript: changing the name attribute dynamically

Question

I have this script I'm working on and there's no errors on it but I want to add some functions on it like when I click the button it adds but I want the name attribute of the input text to be changed too.

Here's my script:

javascript:

var a = 1;
function add() {

    var fContent = document.getElementById('1');
    var sContent = document.getElementById('2');
    if (a <= 10) {
        a++;
        var objTo = document.getElementById('m');
        var divtest = document.createElement("div");
        divtest.innerHTML = (sContent.innerHTML + a + fContent.innerHTML);
        alert(divtest.innerHTML); 
        objTo.appendChild(divtest);
    }
}

html:

<input type="button" onclick="add();" value="+" />
<div id="m">
<div id="1">
<input type="text" name="f">
<input type="text" name="l">
<input type="text" name="m">
</div>
<div id="2"></div>
</div>

OUTPUT:

2
<input type="text" name="f">
<input type="text" name="l">
<input type="text" name="m">

EXPECTED OUTPUT:

2
<input type="text" name="f2">
<input type="text" name="l2">
<input type="text" name="m2">

and so on...

What about using name="f[]"? - this will create an array of values — user2182349
– user2182349, Commented May 4, 2015 at 20:34
innerHTML is string, so you can use regexp and replace value for name attribute. Also now your sContent.innerHTML always empty — Grundy
– Grundy, Commented May 4, 2015 at 20:38
I don't get it. Where exactly do you try to change the name attributes? Why do you expect them to be any different? — basilikum
– basilikum, Commented May 4, 2015 at 20:39
why not use jquery, it will be so much easier. I can provide you the jquery solution. — william.eyidi
– william.eyidi, Commented May 4, 2015 at 20:42

Jed Fox · Accepted Answer · 2017-06-30 13:47:35Z

3

You're not doing anything to change the name attributes. Trying to make those changes with html concatenation will get you into trouble. This will get you started:

(function() {

  var a = 1;

  // get a reference to the container
  var container = document.getElementById("m");
  // get a reference to the first row of input
  var base = container.children[0];  
  
  document.querySelector("button").addEventListener("click", function(e) {

    if(++a > 10) return;
    
    // clone the first row of input
    var clone = base.cloneNode(1);
    
    // change the number text by setting the span's textContent
    clone.children[0].textContent = a;
    // set the names of the input fields
    clone.children[1].name = "f" + a;
    clone.children[2].name = "l" + a;
    clone.children[3].name = "m" + a;
    
    // add the new row to the container
    container.appendChild(clone);
    
    console.log(clone);

  });

})();

<button type="button">+</button>
<div id="m">
  <div><span>1</span><input type="text" name="f1"><input type="text" name="l1"><input type="text" name="m1"></div>
</div>

If you'd rather create the elements from scratch...

(function() {

  var a = 1;

  // get a reference to the container
  var container = document.getElementById("m");    
  var input;
  var span;
  var div;
  
  document.querySelector("button").addEventListener("click", function(e) {

    if(++a > 10) return;
    
    // create our div
    div = document.createElement("div");
    
    // create and append our span
    span = document.createElement("span");
    span.textContent = a;
    div.appendChild(span);
    
    // create and append inputs    
    ["f","l","m"].forEach(function(n){
       input = document.createElement("input");
       input.name = n + a;
       div.appendChild(input);            
    });
                
    // append our div
    container.appendChild(div);
    
    console.log(div);

  });

})();

<button type="button">+</button>
<div id="m">
  <div><span>1</span><input type="text" name="f1"><input type="text" name="l1"><input type="text" name="m1"></div>
</div>

edited Jun 30, 2017 at 13:47

Jed Fox

3,0255 gold badges31 silver badges38 bronze badges

answered May 4, 2015 at 20:54

canon

41.8k10 gold badges77 silver badges102 bronze badges

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

2 Comments

Lutianna Over a year ago

is it possible without using a clone?

canon Over a year ago

@Myel Sure, create the elements from scratch. I've added an example.

Collectives™ on Stack Overflow

javascript: changing the name attribute dynamically

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related