Advertisement

03.24.2008 at 12:42PM PDT, ID: 23265067
[x]
Attachment Details

add text boxes to form dynamically

Asked by bluediesel in .Net Editors & IDEs, Microsoft Visual C#.Net

Tags: C#, .net 1.1 framework

Here's what I'm trying to do (C#, .NET 1.1) , I have a form for contact information (name, address, etc...).  This form also includes a field to input school and a field of study.  Because a person may have gone to more than one school, we would like to let them click a button and it would add another set (education, field of study) of fields to the form.

I already have javascript adding the fields and then when user submits all the data (zero, one or more) education 'sets' are being added to the database.

Here's where the problem lies, when there is an error, all the fields that either showed up in the original display of the page (ie., user previously entered a school and/or field of study) or that were entered at the moment go away.  So after the save function is ran the page comes back w/error msgs at the top instructing user what is wrong but all their education fields are gone.  

Can someone help me figure out how to keep these fields around?

I'm hoping I have given enough information, if not, please let me know and I'll do my best to explain further. I'm attaching the javascript file that adds the fields dynamically (which works).Start Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:

var TOTAL_EDUCATION_ADDS = 0;
 
function AddEducation()
{
	if (document.getElementById)
	{
		var tableElem = document.getElementById("tblEducation");
		var lastRow = tableElem.rows.length;
		var currLabelCount = parseInt(lastRow/4);
		
		// first row --------------------------------------------------------------------------------------------------
		var rowOne = tableElem.insertRow(lastRow);
		rowOne.id = "row_" + currLabelCount + "_0";
		
		// first cell: <td align="right" valign="middle" class="formFieldLabel">School Name:&nbsp;</td>
		var cell_1_1 = rowOne.insertCell(0);
		cell_1_1.align = "right";
		cell_1_1.vAlign = "middle";
		cell_1_1.className = "formFieldLabel";
		cell_1_1.appendChild(document.createTextNode("School Name:\u00a0"));
		
		// second cell: <td align="left" valign="middle" colspan="2"><input type="text" name="txtSchoolName" id="txtSchoolName" value="" style="width:309px" class="formInputText" /></td>
		var cell_1_2 = rowOne.insertCell(1);
		cell_1_2.align = "left";
		cell_1_2.vAlign = "middle";
		cell_1_2.colSpan = "2";
		var inputSchoolName = document.createElement("input");
		inputSchoolName.type = "text";
		inputSchoolName.id = "txtSchoolName_" + currLabelCount;
		inputSchoolName.name = "txtSchoolName_" + currLabelCount;
		inputSchoolName.value = "";
		inputSchoolName.className = "formInputText";
		inputSchoolName.style.width = "309px";
		cell_1_2.appendChild(inputSchoolName);
		
		// third cell: <td><a href="javascript:deleteEducation()"><img src="../images/myAccount/delete_school.gif" width="74" height="16" alt="Delete School" title="Delete School" onmouseover="this.src=iDeleteSchool_Over.src" onmouseout="this.src=iDeleteSchool_Off.src" border="0" /></a></td>
		var cell_1_3 = rowOne.insertCell(2);
		
		var ahrefDeleteEducation = document.createElement("a");
		//ahrefDeleteEducation.id = "btnDelete_" + currLabelCount;
		ahrefDeleteEducation.href = "javascript:deleteEducation(" + currLabelCount + ");";
		var imgDeleteEducation = document.createElement("img");
		//imgDeleteEducation.id = "btnDelete_" + currLabelCount;
		imgDeleteEducation.alt = "Delete School";
		imgDeleteEducation.title = "Delete School";
		imgDeleteEducation.src = "../images/myAccount/delete_school.gif";
		imgDeleteEducation.width = "86";
		imgDeleteEducation.height = "16";
		imgDeleteEducation.onmouseover = function (){this.src=iDeleteSchool_Over.src};
		imgDeleteEducation.onmouseout = function (){this.src=iDeleteSchool_Off.src};
		imgDeleteEducation.border = "0";
		ahrefDeleteEducation.appendChild(imgDeleteEducation);
		cell_1_3.appendChild(ahrefDeleteEducation);
		//cell_1_3.appendChild(document.createTextNode(""));
		
		// second row --------------------------------------------------------------------------------------------------
		var rowTwo = tableElem.insertRow(lastRow+1);
		rowTwo.id = "row_" + currLabelCount + "_1";
		
		// first cell: <td colspan="4"><img src="../images/global/spacer.gif" width="1" height="5" border="0"></td>
		var cell_2_1 = rowTwo.insertCell(0);
		cell_2_1.colSpan = "4";
		var spacerImage = document.createElement("img");
		spacerImage.src = "../images/global/spacer.gif";
		spacerImage.width = "1";
		spacerImage.height = "5";
		spacerImage.border = "0";
		cell_2_1.appendChild(spacerImage);
		
		// third row --------------------------------------------------------------------------------------------------
		var rowThree = tableElem.insertRow(lastRow+2);
		rowThree.id = "row_" + currLabelCount + "_2";
		
		// first cell: <td align="right" valign="middle" class="formFieldLabel">Field(s) of Study:&nbsp;</td>
		var cell_3_1 = rowThree.insertCell(0);
		cell_3_1.align = "right";
		cell_3_1.vAlign = "middle";
		cell_3_1.className = "formFieldLabel";
		cell_3_1.appendChild(document.createTextNode("Field(s) of Study:\u00a0"));		
 
		// second cell: <td align="left" valign="middle" colspan="2"><input type="text" name="txtFieldOfStudy" id="txtFieldOfStudy" value="" style="width:190px" class="formInputText" /></td>
		var cell_3_2 = rowThree.insertCell(1);
		cell_3_2.align = "left";
		cell_3_2.vAlign = "middle";
		cell_3_2.colSpan = "2";
		var inputFieldOfStudy = document.createElement("input");
		inputFieldOfStudy.type = "text";
		inputFieldOfStudy.id = "txtFieldOfStudy_" + currLabelCount;
		inputFieldOfStudy.name = "txtFieldOfStudy_" + currLabelCount;
		inputFieldOfStudy.value = "";
		inputFieldOfStudy.className = "formInputText";
		inputFieldOfStudy.style.width = "190px";
		cell_3_2.appendChild(inputFieldOfStudy);
 
		// third cell: <td></td>
		var cell_3_3 = rowThree.insertCell(2);
		cell_3_3.appendChild(document.createTextNode(""));		
 
		// third four --------------------------------------------------------------------------------------------------
		var rowFour = tableElem.insertRow(lastRow+3);
		rowFour.id = "row_" + currLabelCount + "_3";
		
		// first cell: <td colspan="4"><img src="../images/global/spacer.gif" width="1" height="5" border="0"></td>
		var cell_4_1 = rowFour.insertCell(0);
		cell_4_1.colSpan = "4";
		var spacerImage2 = document.createElement("img");
		spacerImage2.src = "../images/global/spacer.gif";
		spacerImage2.width = "1";
		spacerImage2.height = "15";
		spacerImage2.border = "0";
		cell_4_1.appendChild(spacerImage2);
		
		TOTAL_EDUCATION_ADDS++;
	}
}
 
function SerializeEducation(fieldName)
{
	if (document.getElementById)
	{
		var to_serialize = ""; // array header (if needed).
		for (var i=0; i<=TOTAL_EDUCATION_ADDS; i++)
		{
			if ( (document.getElementById("txtSchoolName_" + i)) && (document.getElementById("txtFieldOfStudy_" + i)) )
			{
				var currSchoolName = document.getElementById("txtSchoolName_" + i).value;
				var currFieldOfStudy = document.getElementById("txtFieldOfStudy_" + i).value;
				to_serialize += currSchoolName + "#" + currFieldOfStudy + "!"; // '!'=list separator, '#'=name/value pair separator.
			}
		}
		to_serialize += ""  // array footer (if needed).
		
		document.getElementById(fieldName).value = to_serialize;
	}
}
 
Keywords: add text boxes to form dynamically
Title
1 Education
2 The Rock of School
3 School
4 New Shadow Box Question
5 Educate Me :)
6 schooling
 
Loading Advertisement...
 
[+][-]03.24.2008 at 05:00PM PDT, ID: 21198569

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zones: .Net Editors & IDEs, Microsoft Visual C#.Net
Tags: C#, .net 1.1 framework
Sign Up Now!
Solution Provided By: sledgebox
Participating Experts: 1
Solution Grade: B
 
 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628