JavaScript Forum

**Gilligan** · 07-05-2008, 08:12 PM

I've seen this on sites before, when you click on a button saying add more box(es) and more textboxes appear. How do they achieve this?

**chrishirst** · 03:22 AM

With something like this

Code:

var m_NextRef = 0;
function addField(p_ebtn,p_form) {
l_oLB = document.createElement("br");
l_oNewField = document.createElement("input");
	l_oNewField.setAttribute("type","text");
	l_oNewField.setAttribute("name","text_" + m_NextRef.toString());
	l_oNewField.setAttribute("id","text_" + m_NextRef.toString());
	l_oNewField.setAttribute("value","New Text Field");
	l_oNewField.setAttribute("onfocus","this.select()");

document.forms[p_form].insertBefore(l_oNewField,p_ebtn);
document.forms[p_form].insertBefore(l_oLB,p_ebtn);
m_NextRef++
}

HTML Code:

<form name="testform" action="" method="post">
<input type="button" name="add" id="add_btn" value="add" onclick="addField(this,this.form.name)">
</form>

**Gilligan** · 07-06-2008, 12:45 PM

Can you give me an example of the input codes please, sorry.

Thank you for what you've done so far

**chrishirst** · 07-06-2008, 01:53 PM

input codes for?

**Gilligan** · 07-06-2008, 07:13 PM

Well i tested the code above, and when I click 'add' nothing happens. I think its because I haven't got any text inputs there, no?

**chrishirst** · 07-06-2008, 11:37 PM

No, you can start off with nothing but the form and the button.

heading out for the day shortly but I'll upload a demo page ASAP.

**Gilligan** · 05:30 PM

Thanks, this will proberly end up being a new div though.. With text saying something like "Part 8: [textbox]", "Part 9: [textbox]" etc.

**chrishirst** · 07-09-2008, 07:38 AM

demo page

The code, expanded a little and corrected for XHTML Doctypes

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var m_NextRef = 1;
var txtBoxName = "text_"
// change the above variable to suit 

function getNextRef(p_form) {
var l_eForm = document.forms[p_form];
var l_eFormElements = l_eForm.elements;
for (var i=0;i<l_eFormElements.length;i++) {
	if (l_eFormElements[i].type == "text") {
		if (l_eFormElements[i].name.substr(0,txtBoxName.length) == txtBoxName) {
			m_NextRef++;
		}
	}
}

}

function addField(p_ebtn,p_form) {
if (m_NextRef == 1) {
	getNextRef(p_form)
}
l_oLB = document.createElement("br");
var l_oNewField = document.createElement("input");
	l_oNewField.setAttribute("type","text");
	l_oNewField.setAttribute("name",txtBoxName + m_NextRef.toString());
	l_oNewField.setAttribute("id",txtBoxName + m_NextRef.toString());
	l_oNewField.setAttribute("value","Part " + m_NextRef.toString());
	l_oNewField.setAttribute("onfocus","this.select()");

var l_oNewFieldLabel = document.createElement("label");
	l_oNewFieldLabel.setAttribute("for",l_oNewField.id);
	l_oNewFieldLabel.innerHTML = l_oNewField.value + ": ";
if (m_NextRef.toString().length == 1) {
	l_oNewFieldLabel.innerHTML = l_oNewFieldLabel.innerHTML + "&nbsp;&nbsp;";
}	

m_NextRef++
document.forms[p_form].insertBefore(l_oNewFieldLabel,p_ebtn);
document.forms[p_form].insertBefore(l_oNewField,p_ebtn);
document.forms[p_form].insertBefore(l_oLB,p_ebtn);
document.forms[p_form].elements[p_ebtn.name].value = "Add Part " + m_NextRef.toString();
l_oNewField.focus()
}

</script>
<style type="text/css">

</style>

</head>

<body>

<form name="testform" action="" method="post">
<label for="text_1">Part 1: &nbsp;&nbsp;</label><input type="text" name="text_1" id="text_1" value="Part 1" onfocus="this.select()"/>
<br />
<label for="text_2">Part 2: &nbsp;&nbsp;</label><input type="text" name="text_2" id="text_2" value="Part 2" onfocus="this.select()"/>
<br />
<label for="text_3">Part 3: &nbsp;&nbsp;</label><input type="text" name="text_3" id="text_3" value="Part 3" onfocus="this.select()"/>
<br />
<input type="button" name="add" id="add_btn" value="add" onclick="addField(this,this.form.name)"/>
<input type="submit" name="submit" value="Go">
</form>
</body>
</html>

this version will check the form for existing text boxes where the name starts with the variable name specified and increments the counter to suit.
The add process then starts where the predefined ones finish.

**chrishirst** · 07-10-2008, 04:11 AM

BTW.

I edited the error in my first code that would "break" the function if you were using a XHTML DTD.

**Gilligan** · 07-10-2008, 04:18 AM

Wow, looking great! I'll use that if I can find a way to understand it

BTW I'm using html dtd.

**Gilligan** · 07-10-2008, 04:59 PM

OK, my attempt (fail):

http://www.sgilligan.co.uk/myattempt.html

Not sure what I've done wrong.

**chrishirst** · 07-10-2008, 06:43 PM

The problem is with having an element that is NOT a form control inside a form.

It "breaks" the DOM tree. Try it without the <div> in the form.

One solution would be to have a loop that set the hidden form elements visible or seeing as this is dealing with scripting, just create element blocks 1 to 7 "on the fly" when the check box is clicked (and of course destroy them if unchecked subsequently)

All the necessary code is there it just need a small rethink and restructure.

**chrishirst** · 07-11-2008, 05:11 PM

Sorry forget to post this last night.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script>

function multipart(){
if(document["testform"]["input"].checked){
document.getElementById("parts").style.display="block"

}
else{
document.getElementById("parts").style.display="none"

}
}
//-->
</script>

<script type="text/javascript">
var m_NextRef = 1;
var initCount = 8;
var txtBoxName = "text_"
// change the above variables to suit 

function getNextRef(p_form) {
var l_eForm = document.forms[p_form];
var l_eFormElements = l_eForm.elements;
for (var i=0;i<l_eFormElements.length;i++) {
	if (l_eFormElements[i].type == "text") {
		if (l_eFormElements[i].name.substr(0,txtBoxName.length) == txtBoxName) {
			m_NextRef++;
		}
	}
}

}

function addField(p_ebtn,p_form) {
		if (m_NextRef == 1) {
			getNextRef(p_form)
		}
	l_oLB = document.createElement("br");
	var l_oNewField = document.createElement("input");
		l_oNewField.setAttribute("type","text");
		l_oNewField.setAttribute("name",txtBoxName + m_NextRef.toString());
		l_oNewField.setAttribute("id",txtBoxName + m_NextRef.toString());
		l_oNewField.setAttribute("value","Part " + m_NextRef.toString());
		l_oNewField.setAttribute("onfocus","this.select()");
	
	var l_oNewFieldLabel = document.createElement("label");
		l_oNewFieldLabel.setAttribute("for",l_oNewField.id);
		l_oNewFieldLabel.innerHTML = l_oNewField.value + ": ";
		if (m_NextRef.toString().length == 1) {
			l_oNewFieldLabel.innerHTML = l_oNewFieldLabel.innerHTML + "&nbsp;&nbsp;";
		}	
	
	m_NextRef++
	document.forms[p_form].insertBefore(l_oNewFieldLabel,p_ebtn);
	document.forms[p_form].insertBefore(l_oNewField,p_ebtn);
	document.forms[p_form].insertBefore(l_oLB,p_ebtn);
	document.forms[p_form].elements[p_ebtn.name].value = "Add Part " + m_NextRef.toString();
	l_oNewField.focus()
}

function initTextBoxes(p_ebtn,p_form) {
	if (p_ebtn.checked) {
		for (var i=1; i<initCount;i++) {
			var l_oNewField = document.createElement("input");
				l_oNewField.setAttribute("type","text");
				l_oNewField.setAttribute("name",txtBoxName + i.toString());
				l_oNewField.setAttribute("id",txtBoxName + i.toString());
				l_oNewField.setAttribute("value","Part " + i.toString());
				l_oNewField.setAttribute("onfocus","this.select()");
			
			var l_oNewFieldLabel = document.createElement("label");
				l_oNewFieldLabel.setAttribute("for",l_oNewField.id);
				l_oNewFieldLabel.innerHTML = l_oNewField.value + ": ";
			if (i.toString().length == 1) {
				l_oNewFieldLabel.innerHTML = l_oNewFieldLabel.innerHTML + "&nbsp;&nbsp;";
			}	
			var l_oLB = document.createElement("br");
			document.forms[p_form].appendChild(l_oNewFieldLabel);
			document.forms[p_form].appendChild(l_oNewField);
			document.forms[p_form].appendChild(l_oLB);
			//l_oNewField.focus()
		}
		l_oLB = document.createElement("br");
			var l_oNewBtn = document.createElement("input");
				l_oNewBtn.setAttribute("type","button");
				l_oNewBtn.setAttribute("name","add");
				l_oNewBtn.setAttribute("id","add_btn");
				l_oNewBtn.setAttribute("value","Add Part " + (initCount) );
				l_oNewBtn.setAttribute("onclick","addField(this,this.form.name)");
				document.forms[p_form].appendChild(l_oNewBtn);
				document.forms[p_form].appendChild(l_oLB);
			var l_oNewBtn = document.createElement("input");
				l_oNewBtn.setAttribute("type","submit");
				l_oNewBtn.setAttribute("name","submit");
				l_oNewBtn.setAttribute("id","submit");
				l_oNewBtn.setAttribute("value","Submit" );
				document.forms[p_form].appendChild(l_oNewBtn);
	}
}
</script>


</head>

<body>

<form method="post" action="" name="testform">
  					  
      &lt;?php echo $linkname ?&gt; Address: 
<input type="text" name="textfield" id="textfield" />
 Multi Parts?<input type="checkbox" name="showparts" value="ON" onclick="initTextBoxes(this,this.form.name)">
<br />
 
                      
</form>              


 			
</body>
</html>

**Gilligan** · 07-12-2008, 07:11 PM

Thank you!

**Gilligan** · 07-25-2008, 08:51 PM

Strangely enough I've only just noticed a problem with it. When you click the checkbox to show the hidden div, then click it again to hide it, it doesn't hide it.

**chrishirst** · 07-26-2008, 04:49 AM

It can be added fairly simply however it wouldn't just hide them. It would destroy any contents the end user had added.

**wayfarer07** · 07-26-2008, 09:57 AM

If it was me, I would script it so that when you go to hide it, it simply adds a class that makes it hidden. Then, if you need to reveal it again, the class could be removed and all of the information would still be attached to it. Making things a bit more complicated here, but not that hard really...

**chrishirst** · 07-27-2008, 03:48 AM

A potential problem there is that hiding it would still send the data on a submit, so the receiving end has to check for the checkbox value being set before accepting the text box data.

**Gilligan** · 07-27-2008, 01:39 PM

So how do I make it so that when you hide it, it destroys it. Because 'd rather have that then what you stated above. Unless it will happen anyway, in which case what should I do?

**chrishirst** · 07-27-2008, 08:39 PM

Removes and destroys the text boxes.
Internet Exploders non-handling of setAttribute fixed as well

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
var m_NextRef = 1;
var initCount = 8;
var txtBoxName = "text_"
// change the above variables to suit 

function getNextRef(p_form) {
var l_eForm = document.forms[p_form];
var l_eFormElements = l_eForm.elements;
for (var i=0;i<l_eFormElements.length;i++) {
	if (l_eFormElements[i].type == "text") {
		if (l_eFormElements[i].name.substr(0,txtBoxName.length) == txtBoxName) {
			m_NextRef++;
		}
	}
}

}

function addField(p_ebtn,p_form) {
		if (m_NextRef == 1) {
			getNextRef(p_form)
		}
	l_oLB = document.createElement("br");
	var l_oNewField = document.createElement("input");
		l_oNewField.setAttribute("type","text");
		l_oNewField.setAttribute("name",txtBoxName + m_NextRef.toString());
		l_oNewField.setAttribute("id",txtBoxName + m_NextRef.toString());
		l_oNewField.setAttribute("value","Part " + m_NextRef.toString());
		l_oNewField.setAttribute("onfocus","this.select()");
	
	var l_oNewFieldLabel = document.createElement("label");
		l_oNewFieldLabel.setAttribute("for",l_oNewField.id);
		l_oNewFieldLabel.innerHTML = l_oNewField.value + ": ";
		l_oNewFieldLabel.setAttribute("id","lbl_" + m_NextRef.toString());
		if (m_NextRef.toString().length == 1) {
			l_oNewFieldLabel.innerHTML = l_oNewFieldLabel.innerHTML + "&nbsp;&nbsp;";
		}	
	m_NextRef++
	document.forms[p_form].insertBefore(l_oNewFieldLabel,p_ebtn);
	document.forms[p_form].insertBefore(l_oNewField,p_ebtn);
	document.forms[p_form].insertBefore(l_oLB,p_ebtn);
	document.forms[p_form].elements[p_ebtn.name].value = "Add Part " + m_NextRef.toString();
	l_oNewField.focus()
}

function TextBoxes(p_ebtn,p_form) {
	if (p_ebtn.checked) {
		initTextBoxes(p_ebtn,p_form);
	} 
	if (!p_ebtn.checked) {
		removeTextBoxes(p_ebtn,p_form);
	} 
}

function removeTextBoxes(p_ebtn,p_form) {
	if (!p_ebtn.checked) {
		if (m_NextRef == 1) {
			getNextRef(p_form)
		}
	m_NextRef--
	if (document.forms[p_form].hasChildNodes()) {
		var brCount = document.forms[p_form].childNodes;
   		for (var i = 0; i < brCount.length; i++) {
			if (brCount[i].tagName == "BR") {
			document.forms[p_form].removeChild( brCount[i]);
			}
		}
	}
		document.forms[p_form].removeChild(document.getElementById("add_btn"));
		document.forms[p_form].removeChild(document.getElementById("submit"));
	for (i=m_NextRef;i>0; i--) {
		document.forms[p_form].removeChild(document.getElementById("lbl_" + i.toString() ));
		document.forms[p_form].removeChild(document.getElementById(txtBoxName + i.toString() ));
		}
	}
m_NextRef = 1;
initCount = 8;
}

function initTextBoxes(p_ebtn,p_form) {
	if (p_ebtn.checked) {
			var l_oLB = document.createElement("br");
			document.forms[p_form].appendChild(l_oLB);
		for (var i=1; i<initCount;i++) {
			var l_oNewField = document.createElement("input");
				l_oNewField.setAttribute("type","text");
				l_oNewField.setAttribute("name",txtBoxName + i.toString());
				l_oNewField.setAttribute("id",txtBoxName + i.toString());
				l_oNewField.setAttribute("value","Part " + i.toString());
				l_oNewField.setAttribute("onfocus","this.select()");
			
			var l_oNewFieldLabel = document.createElement("label");
				l_oNewFieldLabel.setAttribute("for",l_oNewField.id);
				l_oNewFieldLabel.setAttribute("id","lbl_" + i.toString());
				l_oNewFieldLabel.innerHTML = l_oNewField.value + ": ";
			if (i.toString().length == 1) {
				l_oNewFieldLabel.innerHTML = l_oNewFieldLabel.innerHTML + "&nbsp;&nbsp;";
			}	
			var l_oLB = document.createElement("br");
			document.forms[p_form].appendChild(l_oNewFieldLabel);
			document.forms[p_form].appendChild(l_oNewField);
			document.forms[p_form].appendChild(l_oLB);
		}
				l_oLB = document.createElement("br");
			var l_oNewBtn = document.createElement("input");
				l_oNewBtn.setAttribute("type","button");
				l_oNewBtn.setAttribute("name","add");
				l_oNewBtn.setAttribute("id","add_btn");
				l_oNewBtn.setAttribute("value","Add Part " + (initCount) );
				l_oNewBtn.setAttribute("onclick","addField(this,this.form.name)");
				document.forms[p_form].appendChild(l_oNewBtn);
				document.forms[p_form].appendChild(l_oLB);
			var l_oNewBtn = document.createElement("input");
				l_oNewBtn.setAttribute("type","submit");
				l_oNewBtn.setAttribute("name","submit");
				l_oNewBtn.setAttribute("id","submit");
				l_oNewBtn.setAttribute("value","Submit" );
				document.forms[p_form].appendChild(l_oNewBtn);
	// this next line is for IE only because as usual the standard method doesn't work!!
	document.forms[p_form].elements["add_btn"].onclick = function() {addField(this,this.form.name);};
	}
}
</script>

</head>

<body>

<form method="post" action="" name="testform">
Multi Parts?<input type="checkbox" name="showparts" value="ON" onclick="TextBoxes(this,this.form.name)">
</form>  

</body>
</html>

http://www.candsdesign.co.uk/demo/dom-form/