JavaScript create input problems

Question

I found this JavaScript online that adds input buttons when you press a button.

I changed it so that instead of being able to select which type of input you create it just automatically creates a textbox. But it's not working. What should I change?

function add(type) {

  //Create an input type dynamically.
  var element = document.createElement("input");

  //Assign different attributes to the element.
  element.setAttribute("type", "text");
  element.setAttribute("name", "goal[]");

  var foo = document.getElementById("fooBar");

  //Append the element in page (in span).
  foo.appendChild(element);

}

<INPUT type="button" value="Add" onclick="add(document.forms[0].element.value)"/>

<span id="fooBar">&nbsp;</span>

Adam Rackis · Accepted Answer · 2012-01-16 16:40:25Z

1

DEMO

Your add function is correct, but I think something is broken here—document.forms[0].element.value

onclick="add(document.forms[0].element.value)"

Try changing it to

onclick="add()"

Since you're not using that type parameter anyway

answered Jan 16, 2012 at 16:40

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

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

4 Comments

Charles Murray Over a year ago

How would I also add a line break after each input so they rendered below each other?

Adam Rackis Over a year ago

I think you'd want to do: document.createElement("br"); and insert it where you want the line break

Charles Murray Over a year ago

Would I put it in the function add()? That didn't work. Should I put it with the onclick along with add?

Adam Rackis Over a year ago

You should be able to add the br like you did with the input - here's an updated fiddle jsfiddle.net/4Fa8Z/2

Frédéric Hamidi · Accepted Answer · 2012-01-16 16:42:01Z

0

Some browsers do not allow to set the name attribute dynamically on an element.

You can specify the name attribute in the markup passed to createElement() to work around this problem:

var element = document.createElement("<input name='goal[]' type='text' />");

answered Jan 16, 2012 at 16:42

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Collectives™ on Stack Overflow

JavaScript create input problems

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related