In this chapter, I will handle a simple W3CDOM script. He will help us look at interaction design from a new perspective. Idea
Suppose you have an online CD rating tool. You want users to view all their favorite CDs. But how do you know how many images a user can view on average? How many fields do you need to add on this page?
Before W3CDOM appeared, this was indeed a problem. Suppose you have placed 7 CDs. However, users may only want to view one, too many may scare users, and some users want to view all their CD, so they have to submit it multiple times. This is really annoying.
Only W3C DOM can be used to determine the number of fields to be generated. This effect is different from the previous one.
Example
When you click send, the form will send all the parameters in the form of an array. This is used to check whether it is actually sent to the server. Unfortunately, mac version IE and Safari cannot be sent.
IE Problems
There are two serious problems with IE in windows:
The first problem is that all generated single partitions belong to the same array, even if their names are different. In this way, the user can only select one of all single shards. That is to say, you cannot use a ticket in the generated form.
Some readers say that a single token generated through innerHTML is okay. You can try it if you have to use a single sequence.
The second problem is that the generated forms cannot be accessed through the traditional document. forms: IE does not include them in the array. This can be solved by setting IDs for them.
Explanation
Form HTML code:
The Code is as follows:
Onclick = "this. parentNode. parentNode. removeChild (this. parentNode);"/>
Rating Excellent Good OK Poor Bad
Short review
Radio buttons need ded to test them in Explorer:
Test 1
Test 2
The real form project is in the DIV with the ID of readroot and the display value is none. This DIV is a template and cannot be modified by the user. When you need more forms, copy the template and add it after the form. We load it at the beginning so that you can see it when you open the page.
This DIV is outside the form, so the content of this template will not be submitted when the user submits the form.
The SPAN with ID writeroot is a tag. The new form is inserted before it.
Add Form Project
The following code can be used to add a form project when necessary:
The Code is as follows:
Var counter = 0;
Function moreFields (){
Counter ++;
Var newFields = document. getElementById ('readroot'). cloneNode (true );
NewFields. id = '';
NewFields. style. display = 'block ';
Var newField = newFields. childNodes;
For (var I = 0; I Var theName = newField [I]. name
If (theName)
NewField [I]. name = theName + counter;
}
Var insertHere = document. getElementById ('writeroot ');
InsertHere. parentNode. insertBefore (newFields, insertHere );
}
Window. onload = moreFields;
First, we need a counter, because all form items should have a unique name. We add the counter value after the generated name. Initialization counter:
The Code is as follows:
Var counter = 0;
Then there is the actual function. We add 1 to the counter:
The Code is as follows:
Function moreFields (){
Counter ++;
Copy our template, remove the ID, and set display to block. Readroot should be the unique ID in the entire document. After copying the template, it should be displayed for users to see.
The Code is as follows:
Var newFields = document. getElementById ('readroot'). cloneNode (true );
NewFields. id = '';
NewFields. style. display = 'block ';
We traverse the copied child element:
The Code is as follows:
Var newField = newFields. childNodes;
For (var I = 0; I
If the sub-element has a name attribute, we add the counter value to the name value to ensure its uniqueness:
The Code is as follows:
Var theName = newField [I]. name
If (theName)
NewField [I]. name = theName + counter;
}
Now the copy is ready for insertion. We insert it before writeroot:
The Code is as follows:
Var insertHere = document. getElementById ('writeroot ');
InsertHere. parentNode. insertBefore (newFields, insertHere );
}
Then we run the command once when loading the page so that the user can see the following when entering the page:
The Code is as follows:
Window. onload = moreFields;
Remove form items
Each template copy has a removal button:
The Code is as follows:
Onclick = "this. parentNode. parentNode. removeChild (this. parentNode);"/>
Click this button to remove its parent element (DIV ). The entire generated form disappears and will not appear again.
Http://www.quirksmode.org/dom/domform.html
Reprinted please keep the following information
Author: Beiyu (tw: @ rehawk)
