...

View Full Version : Automatic Input Box Generation



Golden Kumquat
08-09-2008, 07:39 AM
I am trying to design a page that will allow one to toggle a checkbox, which will then reveal several input boxes. From there, I want to have a couple of buttons which will allow me to add or remove an input box (non-functioning example here (http://hdwhite.org/jsexample.html)). I know how to do it in PHP; however I wish to be able to do this without having to reload the page. I would be very much appreciated if you could help me out.

rangana
08-09-2008, 07:54 AM
There were two checkboxes. How does one affect the other? and how will the checkbox affect the "textbox" creation?

Also, how many textbox should be generated (when the checkbox is checked/not)?

Hope makes sense.

Golden Kumquat
08-09-2008, 08:00 AM
There were two checkboxes. How does one affect the other? and how will the checkbox affect the "textbox" creation?

Also, how many textbox should be generated (when the checkbox is checked/not)?

Hope makes sense.

What's above the line is supposed to represent what it looks like with the box unchecked while what's below supposed to represent what it looks like with the box checked. Sorry about the confusion.

Also, I'll probably end up wanting to generate seven initially, though I should be able to easily modify that.

rangana
08-09-2008, 08:38 AM
I'm not good at DOM, but hope this helps:


<script type="text/javascript">
window.onload=function(){
var i=1;
document.getElementById('el').onclick=function(){
var check=document.createElement('input'), // Create an input element [checkbox]
txt1=document.createElement('input'), // Create an input element [textbox]
txt2=document.createElement('input'), // Create an input element [textbox]
txt3=document.createElement('input'), // Create an input element [submit button]
txt4=document.createElement('input'), // Create an input element [submit button]
label1=document.createElement('label'), // Create label for checkbox
label2=document.createElement('label'), // Create label for textbox 1
label3=document.createElement('label'), // Create label for textbox 2
hold=document.getElementById('hold'); // ID of our element that will contain the newly created element
if(this.checked==true)
{
check.setAttribute('type','checkbox'); // Set the element as checkbox
check.setAttribute('name','elephant'+i); // Checkbox name is elephant[n]. n=1++
txt1.setAttribute('type','text'); // Set the element as textbox
txt1.setAttribute('name','line'+i) ; // Set textbox1 name as line[n]. n=1++.
txt2.setAttribute('type','text'); // Set the element as textbox
txt2.setAttribute('name','line'+i) ; // Set textbox2 name as line[n]. n=1++.
txt3.setAttribute('type','submit'); // Set the element as submit button
txt3.setAttribute('name','more'+i) ; // Set submit button name as more[n]. n=1++.
txt3.setAttribute('value','More lines!'); // Set the first submit button's value.
txt4.setAttribute('type','submit') ; // Set the element as submit button
txt4.setAttribute('name','less'+i) ; // Set submit button name as less[n]. n=1++.
txt4.setAttribute('value','Less lines!'); // Set the first submit button's value.
label1.innerHTML='Foo: ';
label2.innerHTML='Bar '+i+': ';i++;
label3.innerHTML='Bar '+i+': ';i++;
hold.appendChild(label1);
hold.appendChild(check);hold.appendChild(document.createElement('br'));
hold.appendChild(label2);
hold.appendChild(txt1);hold.appendChild(document.createElement('br'));
hold.appendChild(label3);hold.appendChild(txt2);
hold.appendChild(document.createElement('br'));hold.appendChild(txt3);
hold.appendChild(txt4);hold.appendChild(document.createElement('br'));
hold.appendChild(document.createElement('br'));
}
}}
</script>
<label for="el">Foo: </label><input type="checkbox" name="elephant" id="el">
<hr>
<div id="hold"></div>

Golden Kumquat
08-09-2008, 10:01 AM
Thanks a lot. I had to make a few adjustments, but it got me on the right track, which was all I needed.

Golden Kumquat
08-11-2008, 07:38 AM
Well, things are going smoothly until now. For some reason, I get an error when I try to generate a file upload box. The relevant code:


var bold = document.createElement('b');
bold.appendChild(document.createTextNode("Choose a starting map:"));
hold.appendChild(bold);
var newfile = document.createElement('input');
newfile.setAttribute('type','file');
newfile.setAttribute('name','uploadfile');
hold.appendChild('newfile');

And the error, according to Firebug:

uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLDivElement.appendChild]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://hdwhite.org/dominate/newgame.php :: anonymous :: line 92" data: no]

Line 0

(Note: Line #92 is "hold.appendChild('newfile');" according to the source code.)

rangana
08-11-2008, 09:42 AM
Remove highlighted:


hold.appendChild('newfile');

Golden Kumquat
08-11-2008, 10:23 AM
La di da, I am an idiot.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum