Layer to realize the _javascript technique of the window submission information

layer is a very useful window plugin, see the official documentation
Click here to enter. The official has many examples, the use method is also very simple, introduces the official downloading CSS and the JS to be possible. But sometimes, window reminders don't meet all of our requirements. For example, in the trophy interface, when you want to click "Edit Prizes", you can pop up a dialog box and let us fill out the information as shown in the following illustration:

How to achieve this function with simple and beautiful layer? The authorities did not provide us with examples, so write it yourself. Post the code below.

Click to trigger Confirmupdateaward method for Add Prizes button

var awards = ""; function Confirmupdateaward (i) {Layer.open ({type:1, Closebtn:false, Shift:7, shadeclose:true, Content: "& Lt;div style= ' width:350px; ' ><div style= ' width:320px;margin-left:3% ' class= ' form-group has-feedback ' ><p> Please enter the award name </p>< Input id= ' awardname ' class= ' form-control ' type= ' text ' name= ' awardname ' value= ' "+awards[i].awname+ '"/></div > "+" <div style= ' width:320px;margin-left:3%; ' class= ' form-group has-feedback ' ><p> Please enter the award description </p> <input id= ' awarddescription ' class= ' form-control ' type= ' text ' name= ' awarddescription ' value= ' ' +awards[i '. awdescription+ "'/></div>" + "<div style= ' width:320px;margin-left:3%; ' class= ' Form-group has-feedback ' ><p> Please enter the number of winners </p><input id= ' awardusercount ' class= ' Form-control ' type= ' name= ' Awardusercount ' value= ' "+awards[i].awusercount+" '/></div> ' + ' <div style= ' width:320px;margin-left:3%; ' class= ' form-group has-feedback ' ><p> Please enter the awardCategory </p><input id= ' awardkind ' class= ' form-control ' type= ' text ' name= ' awardkind ' value= ' "+awards[i].awkind+ '" /> "+" <button style= ' margin-top:5% type= ' button ' class= ' btn btn-block btn-success btn-lg ' onclick= ' UpdateAward
("+awards[i].id+") ' > Submit </button></div> '});
 function Updateaward (awardid) {var awardusercount = $ (' #awardUserCount '). Val (); if (awardusercount*1>8888 | | awardusercount*1<1) {layer.msg (' number must be 1 to 8888 ', {time:500,//0.5s automatically shutdown//BTN: [
 ' Understand ', ' know ']};
  }else{var awardname = $ ("#awardName"). Val ();
  var awarddescription = $ ("#awardDescription"). Val ();
  var Awardkind = $ ("#awardKind"). Val (); $.ajax ({type: Post), Url:getcontextpath () + "/award/updateaward", DataType: ' JSON ', data: {"Awardid": A Wardid, "Awardname": Awardname, "awarddescription": Awarddescription, "Awardusercount": Awardusercount, "Awar
Dkind ": Awardkind}, Success:function (data) {var updatesuccess = Data.data;    if (updatesuccess) {layer.msg (' modified successfully ', {time:500,//0.5s automatically shut down//BTN: [' understand ', ' know ']});
    RefreshPage ();
    }else{layer.msg (' modify failed ', {time:500,//20s automatically shut down//BTN: [' understand ', ' know ']});
  }
   }
  });
 Layer.closeall ();

 }
}

Here are a few points to note:

first of all: Finally, we must use

Layer.closeall ();

Otherwise the window will not be closed by itself after submission.

Second:

<input type= "Number"/>

You can only guarantee that the user cannot enter the letter (actually the letter E can be entered, it will be considered a scientific and technical method), but it is still a string that passes through JSON to the back end.

Integer.valueof ();

When you convert to integer, you must determine whether the string is empty or it throws an exception.

Third:

Here is actually using a JS method to invoke a clever pass object.

When we take several trophy records from the database, each record should have a "modify" button. When we make changes, users want to display the input box before the information, but JS method between the call, the object is very troublesome, what is the easy way?

As the above source code shows, we only pass serial number I past. The following code is the code for the trophy display page, and we can see that each record has an edit button.

$ (document). Ready (function () {refreshpage ();});

Define global variable var awards = ""; function RefreshPage () {$.ajax ({type: Post), Url:getcontextpath () + "/award/getallawards", DataType: ' JSON ', D
   ATA: {}, Success:function (data) {awards = Data.data;
   var awardhtml = "";
   var ilen = awards.length; Traversal takes out each prize for (var i = iLen-1 i >=0; i--) {awardhtml+= "<tr><td><span id= ' span" +i+ "' style= ' Cursor:pointer ' onclick= ' Selectaward ("+i+", "+ilen+") ' class= ' label Label-default ' > ' + ' select ' + ' </span></
     Td><td> "+awards[i].awname+" </td><td> "+awards[i].awdescription+" </td><td> "+ awards[i].awusercount+ "</td><td>" +awards[i].awkind+ "</td><td><span style= ' cursor: Pointer ' class= ' label Label-info ' onclick= ' Confirmupdateaward ("+i+") ' > ' + ' edit ' + ' &LT;/SPAN&GT;&LT;/TD&GT;&LT;TD > "+" <span class= ' label Label-danger ' style= ' cursor:pointer; ' onclick= ' Comfirmdeleteaward ("+awards[i"). id+ ") ' > ' +" delete "+" </span></td></tr> ";
  $ ("#awardTable"). HTML (awardhtml);
}
 });


 }

Pay attention to see

Onclick= ' Confirmupdateaward ("+i+") ' > ' + ' edit ' + ' </span>

In this sentence, we only pass I to our first written Confirmupdateaward method inside, but because in JS defined the global variable awards, can cleverly in the Confirmupdateaward method to use Awards[i].

Layer do information submitted to the pits are written here, should no longer have any other questions, if necessary, can leave a comment.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.