[Translated works] Javascript DOM learning Chapter 7: Form Extension

Document directory

• IE Problems
• Add Form Project
• Remove form items

In this chapter, I will handle a simple W3C Dom 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:

<div id="readroot" style="display: none"><input type="button" value="Remove review"onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br /><input name="cd" value="title" /><select name="rankingsel"><option>Rating</option><option value="excellent">Excellent</option><option value="good">Good</option><option value="ok">OK</option><option value="poor">Poor</option><option value="bad">Bad</option></select><br /><br /><textarea rows="5" cols="20" name="review">Short review</textarea><br />Radio buttons included to test them in Explorer:<br /><input type="radio" name="something" value="test1" />Test 1<br /><input type="radio" name="something" value="test2" />Test 2</div><form method="post" action="/cgi-bin/show_params.cgi"><span id="writeroot"></span><input type="button" id="moreFields" value="Give me more fields!" /><input type="submit" value="Send form" /></form>
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:
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<newField.length;i++) {var theName = newField[i].nameif (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:
var counter = 0;
Then there is the actual function. We add 1 to the counter:
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.
var newFields = document.getElementById('readroot').cloneNode(true);newFields.id = '';newFields.style.display = 'block';
We traverse the copied child element:
var newField = newFields.childNodes;for (var i=0;i<newField.length;i++) {
If the sub-element has a name attribute, we add the counter value to the name value to ensure its uniqueness:
var theName = newField[i].nameif (theName)newField[i].name = theName + counter;}
Now the copy is ready for insertion. We insert it before writeroot:
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:
window.onload = moreFields;
Remove form items
Each template copy has a removal button:
<input type="button" value="Remove review"onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br />
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