17

By default I have 5 textboxes. When a user clicks on a button, one textbox should be added.

How could I do this?

8 Answers 8

24

If you replace the innerHTML, the previously entered values will be cleared, to avoid that, you can append the input elements programmatically:

var input = document.createElement('input'); 
input.type = "text"; 
//...    
container.appendChild(input); 

Check this example.

1
  • 1
    Correct answer - because innerHTML will replace the contents of the specified HTML element with the newly defined innerHTML value.
    – OMG Ponies
    Sep 7, 2009 at 17:43
12

Javascript Function

function add() {

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

//Create Labels
var label = document.createElement("Label");
label.innerHTML = "New Label";     

//Assign different attributes to the element.
element.setAttribute("type", "text");
element.setAttribute("value", "");
element.setAttribute("name", "Test Name");
element.setAttribute("style", "width:200px");

label.setAttribute("style", "font-weight:normal");

// 'foobar' is the div id, where new fields are to be added
var foo = document.getElementById("fooBar");

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

Html part,

<button id="button" value="Add" onClick:"javascript:add();">

And, Its done!

1
  • 1
    Here, you can set attributes for textbox. such as css properties, values, id, etc Nov 27, 2012 at 11:59
2
<script>
function add()
{
    document.getElementById("place").innerHTML="<input type='text' value=''>"
}
</script>
<input type="button" value="clickMe" onClick="add();">
<div id="place"></div>
1
  • 1
    Whomever voted for this, isn't aware of the impact of using innerHTML.
    – OMG Ponies
    Sep 7, 2009 at 17:44
1
<script>
function add()
{
    var inpt = document.getElementById('input_template');
    inpt.parentNode.appendChild(inpt.cloneNode(false));
}
</script>

<input type="button" onclick="add();">

set id=input_template to one of the predefined textboxes

1
  • 1
    I would have made it a separate function instead of inline, and I would have used CSS to keep the styles the same, but this does seem like a clever way to do it, and it does seem it would work. Sep 7, 2009 at 17:52
0

Best would be to attach an event on to the onclick of the button, that will set a div's visibility to inline. This is about the best way I can see for this, considering flexibility and robustness.

Have a look here for example code.

0

try this

<html>
<head>
<title>Dynamic Form</title>
<script language="javascript" type="text/javascript" >
function changeIt()
{

createTextbox.innerHTML = createTextbox.innerHTML +"<br><input type='text' name='mytext' >"

}
</script>
</head>
<body>

<form name="form">
<input type="button" value="clickHere" onClick="changeIt()">
<div id="createTextbox"></div>
</form> 
</body>
</html>
3
  • 1
    Whomever voted for this, isn't aware of the impact of using innerHTML.
    – OMG Ponies
    Sep 7, 2009 at 17:45
  • -1. Mucking about with innerHTML when a simple appendChild() would work is unnecessarily slow, and what is going on with your i variable? It doesn't even get used because the variable isn't expanded in the innerHTML string, so your HTML becomes name='mytext' followed by garbage that the browser can't understand. Sep 7, 2009 at 17:47
  • Writing to innerHTML once is fair enough; += on innerHTML is always a mistake.
    – bobince
    Sep 7, 2009 at 20:52
0

by change for loop values we can generate textboxes dynamically

function addFunction() {
  var table = document.getElementById("textbox");
  var rowlen = table.rows.length;
  var row = table.insertRow(rowlen);
  row.id = rowlen;
  var arr = ['textboxfiledname'];
  for (i = 0; i < 2; i++) {
    var x = row.insertCell(i)
    if (i == 1) {
      x.innerHTML = "<input type='button' onclick='removeCell(" + row.id + ")' value=Delete>"
    } else {
      x.innerHTML = "<label>" + arr[i] + ":</label><input type='textbox' name='" + arr[i] + "'>"
    }
  }
}

function removeCell(rowid) {
  var table = document.getElementById(rowid).remove();
}
input[type=text] {
  width: 100%;
  height: 50%;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
  font-family: sans-serif;
}

input[type=button] {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 6px 20px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<fieldset style="margin-left:20%;margin-right:20%;font-family:sans-serif;padding:15px;border-radius:5px;background:#f2f2f2;border:5px solid #1F497D">
  <legend style="background:#1F497D;color:#fff;padding:5px 10px;font-size:22px;border-radius:5px;margin-left:20px;box-shadow:0 0 0 5px #ddd">DynamicTextbox</legend>
  <table id="textbox">
    <tr>
      <td>
        <input type="button" onclick="addFunction()" value="AddTextbox" />
      </td>
    </tr>
  </table>
</fieldset>

0
The best I can help is with this code
<html>
  <head>
  </head>
    <body>
      <input type=text id="chat" placeholder="Enter a message..." maxlength="120">
      <input type=Button id="Button" value="Test" onClick="T()">
      <h1 id="message"></h1>

    <script>
    function T() {
      var m = document.getElementById("chat").value
      document.getElementById("message").innerHTML = m
    }
    </script>
    </body>
</html>
1
  • As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. Sep 14, 2022 at 8:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.