Reusable inputfields

Hello,
I have planned to have MANY input fields on my webpage. I have noticed that they will take up a considerable kb-size.
Can anyone show me how to create reusable objects that can work instead of input-fields so that the page won't take so long time before it loads.
Thank you...
Jennie2004Asked:
Who is Participating?
 
BatalfCommented:
<input type="text"> could be appended dynamically as shown below - but it's probably not a good idea. The time to run the script will probably take more time than loading the input boxes. The only advantage I can think of is if you have a lot of select boxes with the same information. Then you could use the addOption() command to add the same options to all the boxes.

example 1) Dynamic text boxes:


<html>
<head>
    <script>
    function addFields(){
        var divObj = document.getElementById('formContainer');
        for(var no=0;no<5;no++){
            var label = document.createElement('SPAN');
            label.innerHTML = 'input field no. ' + (no+1) + ": ";
            divObj.appendChild(label);
           
            var obj = document.createElement('INPUT');
            obj.setAttribute('type','text');
            obj.setAttribute('name','input'+no);
            divObj.appendChild(obj);
           
            var br = document.createElement('BR');
            divObj.appendChild(br);                
        }    
    }
    window.onload=addFields;
    </script>
</head>
<body>

<div id="formContainer">


</div>

</body>
</html>

Example 2) Add options to select boxes


<html>
<head>
    <script>
    function addFields(){

        var options = ['cat','dog','knife','alpha','beta','echo','gamma'];
        var objects = ['select1','select2','select3']; // Name of select boxes
       
        for(var no=0;no<objects.length;no++){
            var selectObj = document.forms[0].elements[objects[no]];
            for(var no2=0;no2<options.length;no2++){
                selectObj.options[selectObj.options.length] = new Option(options[no2],options[no2]);        
            }
        }            
           
           
    }
    window.onload=addFields;
    </script>
</head>
<body>
<form>

<select name="select1">
</select>
<select name="select2">
</select>
<select name="select3">
</select>

</form>

</body>
</html>
0
 
Jennie2004Author Commented:
Thanks Batalf :)
Explanation AND code as always!
0
 
BatalfCommented:
Glad I could help again:-)

Batalf
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.