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

In the project to encounter such a problem, is that we need to add a few sets of data to the database, but the specific group of data is not certain, there are customers to fill out, such as we need to add a discount strategy, there may be a strategy has many groups of solutions, such as " 100 dozen 50 percent, 200 dozen 40 percent, 500 dozen 30 percent "and so on, this is implemented as a set of scenarios, but not certain of a set of scenarios, there are several sub-scenarios, so, here I use js to add a delete sub-scheme, and to judge the correctness of the scheme input, and through the JSON transfer to write to the database, Here we mainly write if add deletes a set of sub-items and if you add validation to each text box.

Add a set of text boxes dynamically:

varCounttable =0;//Add a table rowAddTable =function () {//Get Form    varTAB1 = document.getElementById ("discounttable"); //the number of cells in the table//cell = tab1.cells.length; //number of rows in tablen =tab1.rows.length; //number of columns in table//cell = cell/n; //adding rows to a tableR =Tab1.insertrow (n); //add each cell of the current rowR.insertcell (0). InnerHTML ='consumption of x yuan: <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, so that each row is different to prevent the deletion of a row after ID duplication.

2. A focus leave event has been added here for each text, that is, when the focus leaves the current text box, we need to be serious about whether it conforms to the input.

3. A label is added to the text box , and as avalidation control, the label is visible when the text we enter does not meet the requirements .

Delete any line://Delete current rowdeletetable=function (EL) {//alert (el.id); //Get Table    varTAB1 = document.getElementById ("discounttable"); //loop to determine which rows to delete     for(i =0; i < tab1.rows.length; i++) {              //gets the ID of the row        varDeleteValue = tab1.rows[i].cells[2].childnodes[0].id; //loop to get the ID of each row compared to the ID of the current click, same as Delete        if(El.id = =deletevalue)            {Tab1.deleterow (i);  Break; }    }}

First we need to be the location where we want to delete the row, and here we need to iterate over which row in the table is the current point and then delete it.

How to show and hide validation controls ( when the focus leaves text, the text is judged ):

    //Verify that the first message entry is legalTerifynumfirst =function (objtext) {varTerifytext =Objtext.value; //The information cannot be empty        if(terifytext=="") {objtext.parentnode.children[1].style.display="Block"; return; }          //The information must be a digital        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 illegal hint, otherwise generate a DataTable return, how to transfer back to the platform, will be written in the next blog.

//Generating a DataTable objectfunction Generatedtb () {//determines whether the data can be written to a flag, false to write, and true to not be writable    varFlag =false; //Get Table    varTAB1 = document.getElementById ("discounttable"); //first column of data    varFirstGroup = Document.getelementsbyclassname ("Groupfirst"); //second column of data    varSecondgroup = Document.getelementsbyclassname ("Groupsecond"); //Determine if verification information is legal    varVeritify = Document.getelementsbyclassname ("Veritifymessage"); //alert (Secondgroup.item (0). value); //determines whether the empty     for(vari =0; i < firstgroup.length; i++)    {        //determines whether the first column of data is empty, and displays a hint if it is empty        if(Firstgroup[i].value = ="") {veritify[(i*2)].style.display ="Block"; Flag=true; }        //determines whether the second column of data is empty and displays a hint if it is empty        if(Secondgroup[i].value = ="") {veritify[(i*2+1)].style.display ="Block"; Flag=true; }    }     for(vari =0; i < veritify.length; i++)    {        if(Veritify[i].style.display = ="Block") {flag=true; }    }      //alert (veritify.length);//How to enter the information is legal, then organize the current information into an array, return this information for processing.     if(Flag = =false) {        //Write        varTxtname = document.getElementById ("txtname"). Value; //Create an array        varDTB =NewArray (); //writes data to an array through a loop and returns         for(vari =0; i < firstgroup.length; i++) {            varrow =NewObject (); Row. Name=txtname; Row.fullmoney=Firstgroup[i].value; Row.discount=Secondgroup[i].value;        Dtb.push (row); }        returnDTB; }

The validation here is also relatively simple, just verify that the text box input is empty and whether it is a number, with a label display and hide to determine whether to conform to the input, in the next article will write how to pass the array into the background and write to the database.

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