Add and delete a set of text boxes in JS and verify the input information

A problem encountered during project creation is that we need to add several groups of data to the database, but the specific groups of data are uncertain and some customers fill in the data. For example, we need to add a discount policy, A policy may have many group solutions, such as "100 off, 200 off, 500 off", etc. This is implemented as a group of solutions, however, I am not sure whether there are several sub-solutions in a group of solutions. Therefore, I will use js to add and delete sub-solutions, and I will judge whether the input of the solution is correct, and write data to the database through JSON transmission. Here we mainly write if you add or delete a group of sub-projects and if you add verification to each text box.

 

Add a set of text boxes dynamically:

VaR counttable = 0; // Add the table row addtable = function () {// obtain the table var tab1 = document. getelementbyid ("discounttable"); // Number of all cells in the table // cell = tab1.cells. length; // number of rows in table n = tab1.rows. length; // Number of columns in the table // cell = cell/N; // Add row r = tab1.insertrow (n) to the table; // Add each cell R in the current row. insertcell (0 ). innerhtml = 'full consumption x RMB: <input type = \ 'text \ 'style = "width: 150px;" onblur = "terifynumfirst (this) "Class = \ 'groupfirst \ '/> <label class =" veritifymessage "style =" display: none; color: # f00; font-size: 16px; width: 10px; float: Right "> * </label> '; R. insertcell (1 ). innerhtml = 'discount rate: <input type = \ 'text \ 'style = "width: 150px;" onblur = "terifynumsecond (this) "Class = \ 'groupsecond \ '/> <label class =" veritifymessage "style =" display: none; font-size: 16px; color: # f00; width: 10px; float: Right "> * </label> '; R. insertcell (2 ). innerhtml = '<input type = "image" name = "imagefield" id = "' + counttable + '" onclick = "deletetable (this)" src = ".. /images/closestraty.jpg "/> '; counttable = counttable + 1 ;}

 

Note:

1. The counttable here should be all variables used to identify each row. In this way, it is determined that each row is different to prevent duplicate IDs after a row is deleted.

2. Here we add a focus departure event for each text, that is, when the focus leaves the current text box, we need to check whether it meets the input seriously.

3. A label is added behind the text box as the verification control. This label is visible when the entered text does not meet the requirements.

 

Delete any row:

// Delete the current row

Deletetable =
Function (EL ){

// Alert (El. ID );

// Obtain the table

VaR tab1 = Document. getelementbyid ("discounttable ");

// Cyclically determine the row to be deleted

For (I = 0; I <tab1.rows. length; I ++ ){

// Obtain the row ID

VaR deletevalue = tab1.rows [I]. cells [2]. childnodes [0]. ID;

// Obtain the ID of each row in a loop and compare it with the ID of the current click. If the ID is the same, delete the row.

If (El. ID = deletevalue ){

Tab1.deleterow (I );

Break;

}

}

}

 

 

First, we need to delete the row location. here we need to compare which row in the table is the current vertex and then delete it.

 

How to display and hide the verification control (when the focus leaves the text, judge the text ):

// Verify that the first entry is valid. terifynumfirst = function (objtext) {var terifytext = objtext. value; // the information cannot be empty. If (terifytext = "") {objtext. parentnode. children [1]. style. display = "Block"; return;} // The information must be a number, if (isnan (terifytext) {objtext. parentnode. children [1]. style. display = "Block"; return;} objtext. parentnode. children [1]. style. display = "NONE ";}

 

When all the information needs to be written, we also need to make a judgment. If there is an invalid prompt, otherwise the datatable will be generated and returned. How to transmit the information to the background will be written in the next blog.

 

// Generate the datatable object function generatedtb () {// judge whether the data can be written to the flag. If it is false, the data can be written, and if it is true, the data cannot be written to VaR flag = false; // obtain table var tab1 = document. getelementbyid ("discounttable"); // The first column of Data var firstgroup = document. getelementsbyclassname ("groupfirst"); // the second column of Data var secondgroup = document. getelementsbyclassname ("groupsecond"); // checks whether the verification information is valid. getelementsbyclassname ("veritifymessage"); // alert (secondg Roup. item (0 ). value); // determines whether it is null for (VAR I = 0; I <firstgroup. length; I ++) {// determines whether the data in the first column is null. If (firstgroup [I]. value = "") {vertex counts [(I * 2)]. style. display = "Block"; flag = true;} // determines whether the second column of data is empty. If (secondgroup [I]. value = "") {vertex counts [(I * 2 + 1)]. style. display = "Block"; flag = true ;}for (VAR I = 0; I <too many. length; I ++) {If (then else [I]. style. display = "Block") {fla G = true ;}/// alert (invalid partition. Length); // if all input information is valid, the current information is sorted as an array and the information is returned for processing. If (flag = false) {// write var txtname = document. getelementbyid ("txtname "). value; // create an array var dtb = new array (); // write data to the array cyclically and return for (VAR I = 0; I <firstgroup. length; I ++) {var ROW = new object (); row. name = txtname; row. fullmoney = firstgroup [I]. value; row. discount = secondgroup [I]. value; dtb. push (ROW) ;}return dtb ;}

The verification here is relatively simple. It only verifies whether the input in the text box is empty and whether it is a number. It uses the display and hiding of a label to determine whether the input meets the requirements, in the next article, I will write how to import arrays to the background and write them into the database.