JavaScript dynamic Add and delete input submit to PHP example

Take a look at some methods or something. This code is the HTML code can be written directly after the use of JS to implement the deletion of HTML elements. This combination of PHP words to achieve a lot of deletion is much easier. Clicking Add adds a text box so it's much better to use. Here is the HTML combination of PHP code

Let's see the simplest one.

This is found on the Internet.

<script type= "Text/javascript" >
function Add () {

var div = document.getElementById ("add");

var input = document.createelement ("input")
Input.setattribute ("type", "text")
Input.setattribute ("name", "tpiao[]")

var del = document.createelement ("input")
Del.setattribute ("Type", "button")
Del.setattribute ("Value", "delete")

var br = document.createelement ("BR");

Div.appendchild (Input)
Div.appendchild (DEL)
Div.appendchild (BR)

Del.onclick = function () {
Div.removechild (Input)
Div.removechild (DEL)
Div.removechild (BR)
}
}
</script>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<body>

<form action= "? a=1" method= "POST" >
<input type= "button" value= "adding" onclick= "Add ()"/>
<input type= "Submit" value= "submitted"/>
<br/>
<div id= "Add" ></div>
</form>
</body>

Example

Add or remove input and submit to PHP

<script type= "Text/javascript" >
Function del (ID) {
var box1 = document.getElementById ("Neir" +id);
Box1.parentNode.removeChild (Box1);

var box2 = document.getElementById ("del" +id);
Box2.parentNode.removeChild (BOX2);

var box3 = document.getElementById ("br" +id);
Box3.parentNode.removeChild (BOX3);
}

function Add () {
var IDT = document.getElementById (' Idtpiao '). Value=parseint (document.getElementById (' Idtpiao '). Value) +1;

var div = document.getElementById ("add");

var input = document.createelement ("input")
Input.setattribute ("type", "text")
Input.setattribute ("name", "tpiao[]")
Input.setattribute ("value", IDT)

var del = document.createelement ("input")
Del.setattribute ("Type", "button")
Del.setattribute ("Value", "delete")

var br = document.createelement ("BR");

Div.appendchild (Input)
Div.appendchild (DEL)
Div.appendchild (BR)

Del.onclick = function () {
Div.removechild (Input)
Div.removechild (DEL)
Div.removechild (BR)
}

}
</script>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<body>
<input type= "text" value= "0" id= "Idtpiao" ><br/>
<form action= "? a=1" method= "POST" >
<input type= "button" value= "adding" onclick= "Add ()"/>
<input type= "Submit" value= "submitted"/>
<br/>

<div id= "Add" >

<input type= "text" Name= "tpiao[]" value= "1" id= "Neir1" >
<input type= "button" value= "delete" id= "Del1" onclick= "del (1)" >
<BR id= "BR1"/>

<input type= "text" Name= "tpiao[]" value= "2" id= "Neir2" >
<input type= "button" value= "delete" id= "Del2" onclick= "del (2)" >
<BR id= "Br2"/>

</div>
</form>

</body>

<?php
$a = isset ($_get[' a '])? $_get[' A ']: "";
if ($a = = "1") {
Print_r ($_post[' Tpiao '));

?