I have another code snippet which is in javascript language to add dynamic textbox or even other input controls. Below is a simple HTML code which contains a div tag with an id of dynamic, a label, the textbox and the add button.
HTML Code JAVASCRIPT ADD DYNAMIC TEXTBOX
<!DOCTYPE html>
<html>
<head>
<title>PHP Addict | Add Dynamic Textbox</title>
</head>
<body>
<div id="dynamic">
Student<input type="text" name="name[]">
</div>
<button id="addmt" onClick="addInput('dynamic');">Add</button>
</body>
</html>
Javascript Code JAVASCRIPT ADD DYNAMIC TEXTBOX
<script>
var counter = 1;
var limit = 10;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + 10 + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Student<input type='text' name='name[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>
In the javascript code, you've notice the limit. It means that you can only add 10 textboxes. If you want to add more than that, then adjust the value of limit. You can also add any element in javascript inside the innerHTML. And don't forget to change all double quotations (") to single quotes (').
Before clicking the add button
After
No comments:
Post a Comment