Js Code for dynamically adding input form elements

Addinput. js

// ======================================
// Function: input file control in a form
// Parameter: parentID --- parent element ID of the input file control to be inserted
// InputID ---- ID of the input file control, which must be consistent with the name; otherwise, problems may occur.
// MaxNum --- the maximum number 0 is unlimited
// ======================================
Function createInput (parentID, inputFileID, maxNum ){

If (maxNum> 0 ){
X = document. getElementsByName (inputFileID );
Y = x. length;
If (y> = maxNum ){
Alert ('only '+ maxNum +' can be added at most ');
Return false;
}
}

Var parent = $ G (parentID); // obtain the parent Element

Var div = document. createElement ("div"); // create a div container tb to include the input file
Var x = parseInt (Math. random () * (80-1) + 1;
Var divName = inputFileID + x. toString (); // name of the random div container
Div. name = divName;
Div. id = divName;

Var aElement = document. createElement ("input"); // create input
AElement. name = inputFileID;
AElement. id = inputFileID;
AElement. type = "text"; // set the type to file.
AElement. className = "dynInputLen ";

Var delBtn = document. createElement ("input"); // create a Button to delete the input file.
DelBtn. type = "button ";
DelBtn. value = "";
DelBtn. className = "btn_del ";
DelBtn. onclick = function () {removeInput (parentID, divName)}; // set the tbonclick method for the button

Div. appendChild (aElement); // Add the input file to the div container
Div. appendChild (delBtn); // Add the delete button to the div container
Parent. appendChild (div); // Add the div container to the parent Element
}
// ==================================
// Function: delete a div container containing input file
// Parameter: parentID --- parent element ID of the input file control
// DelDivID ---- div container ID containing input file
// ==================================
Function removeInput (parentID, DelDivID ){
Var parent = $ G (parentID );
Parent. removeChild ($ G (DelDivID ));
}
// Obtain the elements in the document using the element ID
Function $ G (v) {return document. getElementById (v );}

The addinput.js file. HTML code is as follows:

<Div id = "div_zc" class = "dynInput">
<Input name = "zhuancheng []" type = "text" id = "zhuancheng" value = "" maxlength = "50"/>
</Div>
<Div style = "clear: both; margin-top: 10px; padding-left: 5px;">
<Input type = "button" onClick = "createInput ('div _ zc', 'zhuancheng [] ', 3) "name =" button "id =" button "value =" + Add (limited to 3) "class =" btn_add ">
You can set the maximum number of inputs that can be added. If it is set to 0, no limit is imposed.

Author: tbwshc