JavaScript DOM Learning Chapter 7 Form Extension_Basic Knowledge

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 will view on average? How many fields do you need to add to this page?
This was indeed a problem before W3CDOM came along. Let's say you placed 7 CDs. But users may only want to view one CD, and too many may scare users. Some users want to view all their CDs, so they have to submit them many times. This is really annoying.
Only using W3C DOM allows the user to decide how many fields to generate. This effect is very different from the previous one.
Example
When you click Send, the form will send all the parameters obtained in the form of an array. This is used to check whether it was actually sent to the server. Unfortunately, the mac versions of IE and Safari cannot send.
Problems with IE
IE under windows has two serious problems:
The first problem is that all generated radio button boxes belong to the same array, even if their names are different. In this way, the user can only select one of all radio button boxes. In other words, you cannot use radio buttons in the generated form.
Some readers said that there is no problem with the radio button generated through innerHTML. If you insist on using radio buttons, you can try it.
The second problem is that the generated forms are not accessible through traditional document.forms: IE does not include them in the array. This can be solved by setting IDs for them.
Explain the HTML code of the
form:

Copy the code The code is as follows:

onclick="this.parentNode.parentNode.removeChild(this. parentNode);" />



& Lt; option & gt; rating & lt;/option & gt;
& lt; option value = "excellent" & gt; excellet & lt;/option & gt;
& lt; option va lue = "good" & gt; good & lt;/option & gt;
                                                                                                                                                                           /option>
 


  Short review textarea> <br>  <br>Radio buttons included to test them in Explorer:<br> <br>  <input type="radio" name="something" value="test1"> Test 1<br> <br>  <input type="radio" name="something" value="test2">Test 2 <br>

 

True The form item is in the DIV with ID readroot and the display value is none. This DIV is a template and cannot be modified by the user. When the user needs more forms, we copy this template and add it after the form. We load it at the beginning so that the user can see it when they open the page.
This DIV is outside the form, so when the user submits the form, the content of this template will not be submitted.

The SPAN with ID writeroot is a tag. The newly generated form is inserted in front of it.
Add form items
The following code can be used to add form items when needed:

Copy code Code 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 counter, because all form items should have unique a name. We add the counter value after the generated name. Initialize the counter:

Copy code The code is as follows:

var counter = 0;

Then is the actual function. We add 1 to the counter:

Copy code The code is as follows:

function moreFields() {
counter ;

Then copy our template, remove the ID, and set the display to block. readroot should be the only ID in the entire document, and it should be displayed for users to see after copying the template.

Copy code The code is as follows:

var newFields = document.getElementById('readroot'). cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';

We iterate over the child elements of this copy:

Copy code The code is as follows:

var newField = newFields.childNodes;
for (var i=0; i

If the child element has a name attribute, then we add the counter value to the name value to ensure its uniqueness:

Copy code The code is as follows:

var theName = newField[i].name
if (theName)
newField[i].name = theName counter;
}

Now this copy is ready for insertion. We insert it before writeroot:

Copy code The code is as follows:

var insertHere = document.getElementById( 'writeroot');
insertHere.parentNode.insertBefore(newFields,insertHere);
}

Then we execute it once when the page is loaded, so that when the user enters See:

Copy code The code is as follows:

window.onload = moreFields;

Remove form items
Each template copy has a remove button:

Copy code The code is as follows:

onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />

Clicking this button will remove it from its parent element (DIV). The entire generated form will disappear and will not appear again.
Translation address: http://www.quirksmode.org/dom/domform.html
Please keep the following information for reprinting
Author: Bei Yu (tw: @rehawk)