New input on button click
Question
really noob question, but can someone tell me what's wrong with this code?
I'm trying to create, dynamically on button click, new input boxes with a new button on the side.
I want the new input boxes and buttons to have distinct IDs so I can delete them after.
Bonus question: How would I go about deleting a specific input box and button?
var counter = 1; function addInput(){ var newdiv = document.createElement('div'); newdiv.id = dynamicInput[counter]; newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'> <input type='button' value='-' onClick='removeInput("+dynamicInput[counter]+");'>"; document.getElementById('formulario').appendChild(newdiv); counter++; }
<form method="POST" id="formulario"> <div id="dynamicInput[0]"> Entry 1<br><input type="text" name="myInputs[]"> <input type="button" value="+" onClick="addInput();"> </div> </form>
4 answers
solution1
2 ACCPTED 2017-02-03 01:55:16
Additionally, you can also delete the created element:
<html> <head> <script> var counter = 1; var dynamicInput = []; function addInput(){ var newdiv = document.createElement('div'); newdiv.id = dynamicInput[counter]; newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'> <input type='button' value='-' onClick='removeInput("+dynamicInput[counter]+");'>"; document.getElementById('formulario').appendChild(newdiv); counter++; } function removeInput(id){ var elem = document.getElementById(id); return elem.parentNode.removeChild(elem); } </script> </head> <body> <form method="POST" id="formulario"> <div id="dynamicInput[0]"> Entry 1<br><input type="text" name="myInputs[]"> <input type="button" value="+" onClick="addInput();"> </div> </form> </body> </html>
solution2
1 2017-02-03 01:50:08
There is an error in your code:
Uncaught ReferenceError: dynamicInput is not defined
You need to define dynamicInput first.
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> var counter = 1; var dynamicInput = []; function addInput(){ var newdiv = document.createElement('div'); newdiv.id = dynamicInput[counter]; newdiv.innerHTML = "<section onclick='$(this).remove();'>Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'> <input type='button' value='-'></section>"; document.getElementById('formulario').appendChild(newdiv); counter++; } </script> </head> <body> <form method="POST" id="formulario"> <div id="dynamicInput[0]"> Entry 1<br><input type="text" name="myInputs[]"> <input type="button" value="+" onClick="addInput();"> </div> </form> </body> </html>
$(this).remove() .
You will require jQuery to do this.
The snippet above contains the following already.
solution3
1 2017-02-03 02:13:35
You don't need a counter and ids at all if adding/removing is all you want. You can get relevant inputs using this passed to the methods.
<html> <head> <script> function addInput(){ var newdiv = document.createElement('div'); //newdiv.id = dynamicInput[counter]; newdiv.innerHTML = "Entry <br><input type='text' name='myInputs[]'> <input type='button' value='-' onClick='removeInput(this);'>"; document.getElementById('formulario').appendChild(newdiv); } function removeInput(btn){ btn.parentNode.remove(); } </script> </head> <body> <form method="POST" id="formulario"> <div> Entry 1<br><input type="text" name="myInputs[]"> <input type="button" value="+" onClick="addInput();"> </div> </form> </body> </html>
solution4
1 2017-02-03 03:19:39
Instead of creating elements from the start, use what you already have by cloning the first group of elements. Details are commented in Snippet.
SNIPPET
/* The original dynamic input || is hiding it's remove button || so the first input never gets || deleted */ #dynInp0 input:last-of-type { display: none; } input { font: inherit; } [type='text'] { width: 20ch; line-height: 1.1; } [type='button'] { width: 2.5ch; height: 2.7ex; }
<html> <head> <script> var counter = 0; function addInput() { var form = document.getElementById('formulario'); // Increment counter counter++; // Reference dynamic input var template = document.getElementById('dynInp0'); // Clone dynamic input var clone = template.cloneNode(true); /* Reassign clone id to the string "dynInp"... ||...concatenated to the current value of counter */ clone.id = "dynInp" + counter; // Reference the first child of clone (<label>) var tag = clone.children[0]; /* Change tag's text to the string "Entry "... ||...concatenated to the current value of counter */ tag.textContent = "Entry " + counter; // Reference the 5th child of dynInp (<input>) var rem = clone.children[4]; // Change button display to `inline-block' rem.style.display = 'inline-block'; // Append clone to <form> form.appendChild(clone); } /* Pass the obj ele... ||...Reference <form>... ||...Reference the parent of ele... ||...Remove parent from <form> */ function removeInput(ele) { var form = document.getElementById('formulario'); var parent = ele.parentNode; var removed = form.removeChild(parent); } </script> </head> <body> <form method="POST" id="formulario"> <div id="dynInp0"> <label>Entry 0</label> <br> <input type="text" name="myInputs[]"> <input type="button" value="+" onclick="addInput();"> <input type='button' value="-" onclick='removeInput(this);'> </div> </form> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
@input to enter new items only on click of a button
How to add input on button click and create the new append a remove button to remove the new input?
Attach input mask in new row after click on button
Based on input selected redirect to new html page on button click
Click on button and add new input fields Yii2
Adding new date-picker input field when button click
Enable the input when click add new and Disable the input after click the create button
Toggle input on button click
click event on input button
checking for integer input on button click
Related Tags