Advertisement

03.24.2008 at 12:42PM PDT, ID: 23265067
[x]
Attachment Details
[x]
The Solution Rating System

With so many solutions, how can you tell which solutions are most likely to help you and which ones are not? To provide you with a tool to use, we rate our solutions based on various elements that most accurately determine if a solution is a quality solution. To explain what factors affect the solution rating, here are the elements we take into consideration when formulating our solution rating.

  • The Grade of the Solution
  • The Zone Rank of the Expert Providing the Solution
  • The Number of Author and Expert Comments
  • The Number of Experts Contributing
  • The Feedback of the Community

Your Input Matters
Because of the way the system is set up, the most important variable in this equation is you. As a member of Experts Exchange, you are able to cast your vote on the quality of the solutions in regard to how complete, accurate, helpful and easy to understand each solution is. When you provide your feedback, each rating is adjusted accordingly. So, if you see a solution that has a poor rating that you think is a good solution, let us know by rating it. As you do, the rating will be adjusted and will become more accurate for other members of our site.

If you have any suggestions that you would like to make for our rating system, please ask a question in the Suggestions Zone of Community Support.

Thank you!
9.0

add text boxes to form dynamically

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

Tags:

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