creating input field for html form... but adding a 'label' for it as well?

Question

I have an html form. When you click the button, a javascript function adds a new field. I'm trying to have the function also add a 'label' for the field as well.

I've tried using document.createElement("LABEL"), but that doesn't let me change the innerHtml (or maybe I'm doing it wrong..), nor add a closing

Here is my code. Thanks! var instance = 2;

        function newTextBox(element)
        {       
            instance++; 
            // Create new input field
            var newInput = document.createElement("INPUT");
            newInput.id = "text" + instance;
            newInput.name = "text" + instance;
            newInput.type = "text";
            instance++; 

            document.body.insertBefore(document.createElement("BR"), element);
            document.body.insertBefore(newInput, element);

        }
    </script>
</head>


<body>
    <LABEL for="text1">First name: </LABEL>
    <input id="text1" type="text" name="text1">
    <LABEL for="text2">Last name: </LABEL>
    <input id="text2" type="text" name="text2">



    <input type="button" id="btnAdd" value="New text box" onclick="newTextBox(this);" />
</body>

post your code where you tried doing a document.createElement('LABEL') so we can debug it. — philfreo
– philfreo, Commented Dec 23, 2009 at 6:06
sorry, deleted it because I thought it was useless: var label = document.createElement("LABEL"); label.htmlFor = newInput.id; label.value = 'First Name'; — Matt
– Matt, Commented Dec 23, 2009 at 6:07

Amr Saber · Accepted Answer · 2016-07-26 12:23:36Z

11

   function newTextBox(element)
            {               
                    instance++; 
                    // Create new input field
                    var newInput = document.createElement("INPUT");
                    newInput.id = "text" + instance;
                    newInput.name = "text" + instance;
                    newInput.type = "text";

                    var label = document.createElement("Label");

                    label.htmlFor = "text" + instance;
                    label.innerHTML="Hello";
                    instance++; 

                    document.body.insertBefore(document.createElement("BR"), element);
                    document.body.insertBefore(newInput,element);
                    document.body.insertBefore(label, newInput);

Note that for attribute of the label tag, corresponds to the property htmlFor fo the label object in javascript

edited Jul 26, 2016 at 12:23

Amr Saber

1,06312 silver badges30 bronze badges

answered Dec 23, 2009 at 6:10

Vincent Ramdhanie

103k23 gold badges143 silver badges196 bronze badges

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

2 Comments

Paul Over a year ago

You cannot use label.for. The answer from Proto Bassi is correct.

Rafe Over a year ago

Actually. Both these answers are wrong in some ways. They both advocate using innerHTML which is bad but more important, the 'for' is set using label.htmlFor

Dinkheller · Accepted Answer · 2012-02-07 21:13:21Z

9

The example from Vincent does not work.

Try this:

var newlabel = document.createElement("Label");
    newlabel.setAttribute("for",id_from_input);
    newlabel.innerHTML = "Here goes the text";
parentDiv.appendChild(newlabel);

answered Feb 7, 2012 at 21:13

Dinkheller

5,1346 gold badges43 silver badges72 bronze badges

3 Comments

Paul Over a year ago

This is the correct answer. The attribute for must be set using setAttribute.

Rafe Over a year ago

-1 for the suggestion of dom creation and then innerHTML usage instead of document.createTextNode

Dinkheller Over a year ago

@Rafe, please give an example on how you will set the type to "Label" and how you are going to set an attribute on a TextNode. I don't thing your comment is anyhow helpful.

score 0 · Accepted Answer · 2012-11-23 18:02:06Z

0

<div id="somediv">
 some div
</div>

<script>

var instance = 0;

function newTextBox(element){               

instance++; 
// Create new input field
var newInput = document.createElement("INPUT");
newInput.id = "text" + instance;
newInput.name = "text" + instance;
newInput.type = "text";

var newlabel = document.createElement("Label");
newlabel.setAttribute("for","text" + instance);
newlabel.innerHTML = "Here goes the text";
document.getElementById("somediv").appendChild(newlabel);
document.getElementById("somediv").appendChild(newInput);
}

</script>

edited Nov 23, 2012 at 18:02

answered Nov 21, 2012 at 18:04

user1502852

Collectives™ on Stack Overflow

creating input field for html form... but adding a 'label' for it as well?

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related