[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

where to put <form> tag in dynamic rows

Posted on 2009-05-02
5
Medium Priority
?
289 Views
Last Modified: 2013-11-24
In the below code when i write <form> tag after <BODY> i am getting  weird exception.
"Internet explorer cannot open internet site ;operation aborted".you can check the code in your browser.

but when i place <form> after end </script> tag then page is coming .i dont know what is the exact problem?Is it browser problem or Coding problem?.I can't put <form> tag after </script> tag cos when i submit page the values will not go the servlet page where i need to read the values and insert into the database.
here i am dynamically creating rows so i need to place <form> tab after <body> tag only.
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>
   <BODY>
        <form>
 
  <script language="JavaScript">
   
 table=document.createElement("table");
	table.setAttribute("id","TableA");
	table.setAttribute("border","0");
	table.setAttribute("width","50%");
	table.bgColor="lightblue"
    body = document.createElement("tbody");
    row =document.createElement("tr");
	    cell11 =document.createElement("td");
    cell11.appendChild(document.createTextNode(''));
	cell11.setAttribute("width","5%");
    row.appendChild(cell11);
 
    cell0 =document.createElement("td");
    cell0.appendChild(document.createTextNode('Sno'));
	cell0.setAttribute("id","Sno");
	cell0.setAttribute("width","5%");
    row.appendChild(cell0);
 
 
    cell1 =document.createElement("td");
    cell1.appendChild( document.createTextNode('ContainerType'));
	cell1.setAttribute("width","10%");
	cell1.setAttribute("font-style" ,"italic");
    row.appendChild(cell1);
 
   cell2 =document.createElement("td");
   cell2.setAttribute("width","10%");
    cell2.appendChild( document.createTextNode('ContainerNumber'));
    row.appendChild(cell2);
 
	cell3 =document.createElement("td");
	cell3.setAttribute("width","20%");
    cell3.appendChild( document.createTextNode('ContainerDescription'));
    row.appendChild(cell3);
	body.appendChild(row);
 
window.onload =function dynamicRows()
{
  
		
 
	row1 =document.createElement("tr");
 
 
    cell10 =document.createElement("td");
	check= document.createElement("input");
	check.setAttribute("type","checkbox");
	check.setAttribute("name","checked");
	check.setAttribute("value","true");
 
    cell10.appendChild(check);
    row1.appendChild(cell10);
 
 
    cell8 =document.createElement("td");
	cell8.appendChild(document.createTextNode(document.getElementById('TableA').rows.length));
	row1.appendChild(cell8);
 
 
 
    cell4 =document.createElement("td");
	select =document.createElement("select");
	select.setAttribute("name","contype");
	select.setAttribute("id","contype0");
 
	option =document.createElement("option");
	option.setAttribute("value","20F");
	option.appendChild(document.createTextNode("20F"));
	select.appendChild(option);
 
	option =document.createElement("option");
	option.setAttribute("value","40H");
	option.appendChild(document.createTextNode("40H"));
	select.appendChild(option);
 
	option =document.createElement("option");
	option.setAttribute("value","60L");
	option.appendChild(document.createTextNode("60L"));
	select.appendChild(option);
 
	option =document.createElement("option");
	option.setAttribute("value","80M");
	option.appendChild(document.createTextNode("80M"));
	select.appendChild(option);
 
    cell4.appendChild(select);
    row1.appendChild(cell4);
 
    cell5 =document.createElement("td");
	ContainerInput= document.createElement("input");
	ContainerInput.setAttribute("type","text");
	ContainerInput.setAttribute("name","containerno");
	ContainerInput.setAttribute("value",'CONATIONER156');
 
    cell5.appendChild(ContainerInput);
    row1.appendChild(cell5);
 
 
    cell6 =document.createElement("td");
	ContainerDesc= document.createElement("input");
	ContainerDesc.setAttribute("type","text");
	ContainerDesc.setAttribute("name","containerdesc");
	ContainerDesc.setAttribute("value",'TU');
 
    cell6.appendChild(ContainerDesc);
    row1.appendChild(cell6);
 
	cell7 =document.createElement("td");
	add= document.createElement("input");
	add.setAttribute("type","button");
	add.setAttribute("name","add");
	add.setAttribute("value","+");
	add.onclick = function(){ addRow(); }
    cell7.appendChild(add);
    row1.appendChild(cell7);
 
		if(document.getElementById('TableA').rows.length >1)
		{
			 cell9 =document.createElement("td");
			remove= document.createElement("input");
			remove.setAttribute("type","button");
			remove.setAttribute("id","remove");
			remove.setAttribute("name","remove");
			remove.setAttribute("value","-");
	
			remove.onclick = function(){  
					removeRow(this);
			};
 
 
			cell9.appendChild(remove);
			row1.appendChild(cell9);
		}
		 	body.appendChild(row1);
 
		if(document.getElementById('contype0'))
				{
		
			for (j=0;j<document.getElementById('contype0').length;j++)
						  {
							   if ('20F' == document.getElementById('contype0').options[j].value)
							   {
									document.getElementById('contype0').options[j].selected = true;  
								     break;
							   }
						  }
				}
 
 
	
}
 
	table.appendChild(body);
    document.body.appendChild(table);
 
			
 
 function addRow()
  {
	 dynamicRows();
  }
function removeRow(theRow){
 
		var tab=document.getElementById('TableA');
		index= theRow.parentNode.parentNode.rowIndex;
       tab.deleteRow(index);
 
	  for (i=1;i<tab.rows.length;i++)
	  {
			tab.rows[i].cells[1].innerHTML = i;
	  }
}
 
 
  </script>
 
 
 
 
 
	 <input type="submit" name="submit" value="submit">
 
 </form>
 
 </BODY>
</HTML>

Open in new window

0
Comment
Question by:chaitu chaitu
  • 3
  • 2
5 Comments
 
LVL 6

Expert Comment

by:mudbuggle
ID: 24286007
move your script into the head of the document. Leave your form tag in the body and give it an id, use document.getElementById() to access the form tag in your script and append all of the elements in your script to the form tag. If you need to have multiple forms create your forms in your script. If you need an example let me know and I'll whip one up.
0
 
LVL 20

Author Comment

by:chaitu chaitu
ID: 24288455
if i move script into the head of the document then this piece of code document.body.appendChild(table);
gives problem.

you want me to do like this <form id="frm> and append all elements to the form .it means cell0 ,cell1,cell2,cell3... cell11 all these elements i need to append form tag.

0
 
LVL 6

Expert Comment

by:mudbuggle
ID: 24288493
yes... it should work if you append the created elements (cell1, cell2, cell3, etc.) to the the form tag. If it doesn't work with document.form_name.appendChild(appending_elements) create an id for the form and use document.getElementById('form_id').appendChild(appending_elements). That should get you rolling.
0
 
LVL 20

Author Comment

by:chaitu chaitu
ID: 24288804
check this code its not working as you specified.i added table element to the form tag but still document.getElementById('TableA') is coming as null;

i appened one textbox to the form tag but still text box value is not coming.

document.getElementById('myform').appendChild(cell5);

<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>
   <BODY>
 
  <script language="JavaScript">
   
 table=document.createElement("table");
        table.setAttribute("id","TableA");
        table.setAttribute("border","0");
        table.setAttribute("width","50%");
        table.bgColor="lightblue"
document.getElementById('myform').appendChild(table);
 
    body = document.createElement("tbody");
    row =document.createElement("tr");
            cell11 =document.createElement("td");
    cell11.appendChild(document.createTextNode(''));
        cell11.setAttribute("width","5%");
    row.appendChild(cell11);
 
    cell0 =document.createElement("td");
    cell0.appendChild(document.createTextNode('Sno'));
        cell0.setAttribute("id","Sno");
        cell0.setAttribute("width","5%");
    row.appendChild(cell0);
 
 
    cell1 =document.createElement("td");
    cell1.appendChild( document.createTextNode('ContainerType'));
        cell1.setAttribute("width","10%");
        cell1.setAttribute("font-style" ,"italic");
    row.appendChild(cell1);
 
   cell2 =document.createElement("td");
   cell2.setAttribute("width","10%");
    cell2.appendChild( document.createTextNode('ContainerNumber'));
    row.appendChild(cell2);
 
        cell3 =document.createElement("td");
        cell3.setAttribute("width","20%");
    cell3.appendChild( document.createTextNode('ContainerDescription'));
    row.appendChild(cell3);
        body.appendChild(row);
 
	window.onload =function dynamicRows()
	{
	  
					
	 
			row1 =document.createElement("tr");
	 
	 
		cell10 =document.createElement("td");
			check= document.createElement("input");
			check.setAttribute("type","checkbox");
			check.setAttribute("name","checked");
			check.setAttribute("value","true");
	 
		cell10.appendChild(check);
		row1.appendChild(cell10);
	 
	 
		cell8 =document.createElement("td");
 
			cell8.appendChild(document.createTextNode(document.getElementById('TableA').rows.length));
			row1.appendChild(cell8);
	 
	 
	 
		cell4 =document.createElement("td");
			select =document.createElement("select");
			select.setAttribute("name","contype");
			select.setAttribute("id","contype");
	 
			option =document.createElement("option");
			option.setAttribute("value","20F");
			option.appendChild(document.createTextNode("20F"));
			select.appendChild(option);
	 
			option =document.createElement("option");
			option.setAttribute("value","40H");
			option.appendChild(document.createTextNode("40H"));
			select.appendChild(option);
	 
			option =document.createElement("option");
			option.setAttribute("value","60L");
			option.appendChild(document.createTextNode("60L"));
			select.appendChild(option);
	 
			option =document.createElement("option");
			option.setAttribute("value","80M");
			option.appendChild(document.createTextNode("80M"));
			select.appendChild(option);
	 
		cell4.appendChild(select);
		alert(document.getElementById('myform').appendChild(cell4))
		document.getElementById('myform').appendChild(cell4);
		row1.appendChild(cell4);
	 
		cell5 =document.createElement("td");
			ContainerInput= document.createElement("input");
			ContainerInput.setAttribute("type","text");
			ContainerInput.setAttribute("name","containerno");
			ContainerInput.setAttribute("value",'CONATIONER156');
	 
		cell5.appendChild(ContainerInput);
		document.getElementById('myform').appendChild(cell5);
		row1.appendChild(cell5);
	 
	 
		cell6 =document.createElement("td");
			ContainerDesc= document.createElement("input");
			ContainerDesc.setAttribute("type","text");
			ContainerDesc.setAttribute("name","containerdesc");
			ContainerDesc.setAttribute("value",'TU');
	 
		cell6.appendChild(ContainerDesc);
		row1.appendChild(cell6);
	 
			cell7 =document.createElement("td");
			add= document.createElement("input");
			add.setAttribute("type","button");
			add.setAttribute("name","add");
			add.setAttribute("value","+");
			add.onclick = function(){ addRow(); }
		cell7.appendChild(add);
		row1.appendChild(cell7);
	 
					if(document.getElementById('TableA').rows.length >1)
					{
							 cell9 =document.createElement("td");
							remove= document.createElement("input");
							remove.setAttribute("type","button");
							remove.setAttribute("id","remove");
							remove.setAttribute("name","remove");
							remove.setAttribute("value","-");
			
							remove.onclick = function(){  
											removeRow(this);
							};
	 
	 
							cell9.appendChild(remove);
							row1.appendChild(cell9);
					}
							body.appendChild(row1);
	 
					if(document.getElementById('contype0'))
									{
					
							for (j=0;j<document.getElementById('contype0').length;j++)
													  {
															   if ('20F' == document.getElementById('contype0').options[j].value)
															   {
																			document.getElementById('contype0').options[j].selected = true;  
																		 break;
															   }
													  }
									}
	 
	 
 
 
        table.appendChild(body);
    document.body.appendChild(table);
 
           }             
 
 function addRow()
  {
         dynamicRows();
  }
function removeRow(theRow){
 
                var tab=document.getElementById('TableA');
                index= theRow.parentNode.parentNode.rowIndex;
       tab.deleteRow(index);
 
          for (i=1;i<tab.rows.length;i++)
          {
                        tab.rows[i].cells[1].innerHTML = i;
          }
}
 
 
  </script>
 
 
         <form id="myform">
 
 
         <input type="button" name="submit" value="submit">
 
 </form>
 
 </BODY>
</HTML>

Open in new window

0
 
LVL 6

Accepted Solution

by:
mudbuggle earned 1500 total points
ID: 24295034
I had to cut some code out because it was causing problems... but I did get the code functioning. You'll want to rethink how to count the rows so you can get cell8 and cell9 working properly. Let me know if you need anything else.
<html>
<head>
<script language="Javascript">
function begin()
{
	var table = document.createElement("table");
	var body = document.createElement("tbody");
	table.setAttribute("id","TableA");
	table.setAttribute("border","0");
	table.setAttribute("width","50%");
	table.bgColor="light blue"
 
	var table = document.createElement("table");
	var body = document.createElement("tbody");
	table.setAttribute("id","TableA");
	table.setAttribute("border","0");
	table.setAttribute("width","50%");
	table.bgColor="light blue"
 
	var row = document.createElement("tr");
	var cell11 = document.createElement("td");
	cell11.appendChild(document.createTextNode(''));
	cell11.setAttribute("width","5%");
	row.appendChild(cell11);
 
	var cell0 = document.createElement("td");
	cell0.appendChild(document.createTextNode('Sno'));
	cell0.setAttribute("id","Sno");
	cell0.setAttribute("width","5%");
	row.appendChild(cell0);
 
	var cell1 = document.createElement("td");
	cell1.appendChild( document.createTextNode('ContainerType'));
	cell1.setAttribute("width","10%");
	cell1.setAttribute("font-style" ,"italic");
	row.appendChild(cell1);
 
	var cell2 = document.createElement("td");
	cell2.setAttribute("width","10%");
	cell2.appendChild( document.createTextNode('ContainerNumber'));
	row.appendChild(cell2);
 
	var cell3 = document.createElement("td");
	cell3.setAttribute("width","20%");
	cell3.appendChild( document.createTextNode('ContainerDescription'));
	row.appendChild(cell3);
	body.appendChild(row);
 
	var row1 = document.createElement("tr");
	var cell10 = document.createElement("td");
	var check = document.createElement("input");
	check.setAttribute("type","checkbox");
	check.setAttribute("name","checked");
	check.setAttribute("value","true");
	
	cell10.appendChild(check);
	row1.appendChild(cell10);
	 
 
 
	var cell4 = document.createElement("td");
	var select = document.createElement("select");
	select.setAttribute("name","contype");
	select.setAttribute("id","contype");
 
	var option = document.createElement("option");
	option.setAttribute("value","20F");
	option.appendChild(document.createTextNode("20F"));
	select.appendChild(option);
	 
	var option = document.createElement("option");
	option.setAttribute("value","40H");
	option.appendChild(document.createTextNode("40H"));
	select.appendChild(option);
	 
	var option = document.createElement("option");
	option.setAttribute("value","60L");
	option.appendChild(document.createTextNode("60L"));
	select.appendChild(option);
	 
	var option = document.createElement("option");
	option.setAttribute("value","80M");
	option.appendChild(document.createTextNode("80M"));
	select.appendChild(option);
	 
	cell4.appendChild(select);
	row1.appendChild(cell4);
	 
	var cell5 = document.createElement("td");
	var ContainerInput = document.createElement("input");
	ContainerInput.setAttribute("type","text");
	ContainerInput.setAttribute("name","containerno");
	ContainerInput.setAttribute("value",'CONATIONER156');
	 
	cell5.appendChild(ContainerInput);
	row1.appendChild(cell5);
	 
	var cell6 = document.createElement("td");
	ContainerDesc= document.createElement("input");
	ContainerDesc.setAttribute("type","text");
	ContainerDesc.setAttribute("name","containerdesc");
	ContainerDesc.setAttribute("value",'TU');
	 
	cell6.appendChild(ContainerDesc);
	row1.appendChild(cell6);
	 
	var cell7 = document.createElement("td");
	var add = document.createElement("input");
	add.setAttribute("type","button");
	add.setAttribute("name","add");
	add.setAttribute("value","+");
	add.onclick = function(){ addRow(); }
	cell7.appendChild(add);
	row1.appendChild(cell7);
 
	body.appendChild(row1);
	if(document.getElementById('contype0'))
	{				
		for (j=0;j<document.getElementById('contype0').length;j++)
		{
			if ('20F' == document.getElementById('contype0').options[j].value)
			{
				document.getElementById('contype0').options[j].selected = true;
				break;
			}
		}
	}
	table.appendChild(body);
	document.getElementById('myform').appendChild(table);
 
}
 
 
function addRow()
{
	dynamicRows();
}
 
function removeRow(theRow)
{
	var tab = document.getElementById('TableA');
	var index = theRow.parentNode.parentNode.rowIndex;
	tab.deleteRow(index); 
	for (i=1;i<tab.rows.length;i++)
	{
		tab.rows[i].cells[1].innerHTML = i;
	}
}
</script>
</head>
<body onload="begin()">
<form id="myform">
</form>
</body>
</html>

Open in new window

0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question