Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 198
  • Last Modified:

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...
0
Jennie2004
Asked:
Jennie2004
  • 2
1 Solution
 
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

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now