Adding additional textboxes if checkbox is checked

[mindapolis]

Hi, I'm working with a form in which I need to add textboxes if a checkbox is checked.  Are there any tutorial that could walk through that?  I have googled it but not having much luck.  Any suggestions would be appreciated. 

[smerny]

i'm not sure what you mean exactly.

 

what are these checkboxes for? are there predetermined checkboxes that will come up for a specific checkbox being checked? does this repeat for infinite # of checkboxes?

[smerny]

if you have specific checkboxes that you want to shop up for specific checkboxes, you could have checkboxes within an element that is "display: none" and then use jquery .show() to show it if a specific checkbox is checked.

 

http://api.jquery.com/show/

[mindapolis]

The page has information about the customer's dog (name, age, breed).  If the customer has more than one dog and if they check the checkbox about having more than one dog I need those textboxes to appear. 

[rythemton]

Here is code I used to add additional 'Address' fields to a form:

function newaddress() {
formvalue = parseInt( document.getElementById( 'additions' ).value ) + 1;
formvalue = formvalue.toString();
formdata = document.getElementById( 'fields' );
checkfields = formdata.getElementsByTagName( 'input' );
totalstored = 0;
var inputname = new Array();
var inputvalu = new Array();
for( var i=0; i<checkfields.length; i++ ) {
	var testvalue = checkfields[ i ].value;
	if( testvalue.length > 0 ) {
		inputname[ totalstored ] = checkfields[ i ].id;
		inputvalu[ totalstored ] = testvalue;
		totalstored++;
	}
}
newform = '<fieldset><label for="fname' + formvalue + '">First Name</label><input name="fname';
newform += formvalue + '" id="fname' + formvalue + '" /><label for="lname';
newform += formvalue + '">Last Name</label><input name="lname' + formvalue;
newform += '" id="lname' + formvalue + '" /><label for="address' + formvalue;
newform += '">Address</label><input name="address' + formvalue + '" id="address';
newform += formvalue + '" /><label for="city' + formvalue + '">City</label><input name="city';
newform += formvalue + '" id="city' + formvalue + '" /><label for="state' + formvalue;
newform += '">State</label><input name="state' + formvalue + '" id="state' + formvalue;
newform += '" /><label for="zip' + formvalue + '">Zip Code</label><input name="zip';
newform += formvalue + '" id="zip' + formvalue + '" /><label for="phone' + formvalue;
newform += '">Phone Number</label><input name="phone' + formvalue + '" id="phone' + formvalue + '" /></fieldset>';
formdata.innerHTML += newform;
for( var i=0; i<totalstored; i++ ) {
	document.getElementById( inputname[ i ] ).value = inputvalu[ i ];
}
document.getElementById( 'additions' ).value = formvalue;
return false;
}

The form field that had the 'additions' Id was a hidden field. I appended numbers on the end of the field names so they had unique names for PHP. I found when I added additional fields, the previous fields reset to their default values, so I added the loops to store, then restore, the field values that were filled in before the additional fields were added. Perhaps you can modify this code to work for you.

[smerny]

you could use arrays rather than formvalue, that would allow you to do this without having to rebuild every time. it would also make it easier when you go to process the form.

 

by arrays i mean like:

 

<input name="fname[]" />

 

then when you process you could have

 

foreach ($_POST['fname'] as $fname) {

  //process each

}