Geek Answers Handbook

By creating an input field for an html form ... but adding a label for it too?

I have an html form. When you click the button, the javascript function adds a new field. I am trying to have the function also add a “label” for the field.

I tried using document.createElement ("LABEL"), but this does not allow me to change innerHtml (or maybe I'm doing it wrong), and also not add closure

Here is my code. Thank you 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>

+5
source share
3 answers
   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);

, for htmlFor javascript

+6

Vincent .

:

var newlabel = document.createElement("Label");
    newlabel.setAttribute("for",id_from_input);
    newlabel.innerHTML = "Here goes the text";
parentDiv.appendChild(newlabel);
+6
<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>
0
source

More articles:


All Articles