7 Replies - 414 Views - Last Post: 27 October 2013 - 11:40 AM

#1 CodeNubee  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 28-March 13

Web Form is Not Allowing a Re-Submit

Posted 26 October 2013 - 10:10 AM

I don't think the title of this post is accurate enough.

My web page is at http://www.analog24....Trig/index.html

I am just learning to program in JS and one of my lessons involves this page. Rather than getting into the entire lesson (as I don't want all the answers just given to me), I am having trouble with the following:

I have a web form that is using "onclick" to execute a function that simply displays a table. Inside of the "buildTable" function is a function call to re-display the web form (which is in the "buildForm" function).

The problem I am having is that when it executes, the table displays and so does the web form. However, clicking on the radio button again (which should call the "buildTable" function) does nothing.

I originally went this route because when I just called the "buildTable" function, it would display the table, but I would lose everything else on the page, so I had to re-paint the entire page this way instead. If you have a suggestion how to do this better, I am listening.

Here is my code. I hope you can help.

<html>
<head><title>Computer Science 553 Lab Pages</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/Javascript">
	function buildForm(){
		document.write("<link rel='stylesheet' type='text/css' href='style.css' />");
		document.write("<h1>Lab 3: Trig Functions on the Fly</h1>");
		document.write("<div align='center'>");
		document.write("<form id='angleSelect' name='angleSelect' method='post'>");
		document.write("<input type='radio' name='angleSelect' id='angleDegrees' value='1' onclick='buildTableDegrees(\"Degrees\")'>");
		document.write("<label for='angleSelect'>Degrees</label>");
		document.write("<input type='radio' name='angleSelect' id='angleRadian' value='1' onclick='buildTableRadians(\"Radians\")'>");
		document.write("<label for='angleSelect'>Radian</label>");
		document.write("</form>");
		document.write("</div>");
	}
	function buildTableDegrees(inText){
		buildForm();
		document.write("<div align='center'>");
		document.write("<table border='1'>");
		document.write("<tr><th>" + inText + "</th>");
		document.write("<th>sin(x)</th>");
		document.write("<th>cos(x)</th>");
		document.write("<th>tan(x)</th>");
		document.write("</tr>");
		for ( var i = 0; i < 13; i++ )	{
			openTableRow();
			writeTableData(i + " " + inText)
			writeTableData("sin(" + i + ")");
			writeTableData("cos(" + i + ")");
			writeTableData("tan(" + i + ")");
			closeTableRow();
		}
		document.write("</table>");
		document.write("</div>");
	}

	function buildTableRadians(inText){
		buildForm();
		document.write("<div align='center'>");
		document.write("<table border='1'>");
		document.write("<tr><th>" + inText + "</th>");
		document.write("<th>sin(x)</th>");
		document.write("<th>cos(x)</th>");
		document.write("<th>tan(x)</th>");
		document.write("</tr>");
		for ( var i = 0; i < 13; i++ )	{
			openTableRow();
			writeTableData(i + " " + inText);	// radians Column
			writeTableData("sin(" + i + ")");	// sin(x) Column
			writeTableData("cos(" + i + ")");	// cos(x) Column
			writeTableData("tan(" + i + ")");	// tan(x) Column
			closeTableRow();
		}
		document.write("</table>");
		document.write("</div>");
	}
	
	function writeTableData(inText){
		document.write("<td>" + inText + "</td>"); 
	}

	function openTableRow(){
		document.write("<tr>");
	}

	function closeTableRow(){
		document.write("</tr>");
	}
</script>
</head>
<body>
<script type="text/Javascript">buildForm();</script>
</div>

</body></html>


Is This A Good Question/Topic? 0
  • +

Replies To: Web Form is Not Allowing a Re-Submit

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2881
  • View blog
  • Posts: 9,559
  • Joined: 12-December 12

Re: Web Form is Not Allowing a Re-Submit

Posted 26 October 2013 - 11:29 AM

I suspect the main problem is because you are using document.write :whistling:. Is this how they are teaching you?

document.write can only write once, while the page is being built, and is a poor way to construct a page. Using document.write at any point after the page is loaded will cause the whole page content to be removed.

But your HTML is also malformed. You are creating page-content in the head-section. It should be in the body. Having corrected this, also check your browser's console for error messages.

This post has been edited by andrewsw: 26 October 2013 - 11:30 AM

Was This Post Helpful? 0
  • +
  • -

#3 CodeNubee  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 28-March 13

Re: Web Form is Not Allowing a Re-Submit

Posted 26 October 2013 - 12:00 PM

View Postandrewsw, on 26 October 2013 - 11:29 AM, said:

document.write can only write once, while the page is being built, and is a poor way to construct a page. Using document.write at any point after the page is loaded will cause the whole page content to be removed.

Well, this explains my first problem. When i just call for the function "buildTable", everything goes away but the table. And yes, at this stage, it is what I am being taught.

View Postandrewsw, on 26 October 2013 - 11:29 AM, said:

But your HTML is also malformed. You are creating page-content in the head-section. It should be in the body. Having corrected this, also check your browser's console for error messages.

I thought that since I am calling the "buildForm" function in the <body> of the web page, all html tags that are written (even though the functions are in the header, would display in the body properly.

Is my logic not correct? Should I move the entire javascript into the <body>?

In my specific case, what do you suggest I use instead of document.write?
Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 404
  • View blog
  • Posts: 1,720
  • Joined: 30-April 10

Re: Web Form is Not Allowing a Re-Submit

Posted 26 October 2013 - 01:45 PM

Quote

In my specific case, what do you suggest I use instead of document.write?


I suggest you look into adding elements to the page using things like .innerHTML.

document.getElementById('myTagId').innerHTML = "<p>This is an added p tag</p>";



The above will add a node to the element with the id of myTagId.

This link may be of help also.

This post has been edited by laytonsdad: 26 October 2013 - 01:48 PM

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 2881
  • View blog
  • Posts: 9,559
  • Joined: 12-December 12

Re: Web Form is Not Allowing a Re-Submit

Posted 26 October 2013 - 03:13 PM

Quote

I thought that since I am calling the "buildForm" function in the <body> of the web page, all html tags that are written (even though the functions are in the header, would display in the body properly.

You are right, my apologies. The use of document.write() distracted my attention ;)

The functions are a little pointless though, as they can only be called once, and only while the page is being created. But I wouldn't use document.write().

This post has been edited by andrewsw: 26 October 2013 - 03:17 PM

Was This Post Helpful? 0
  • +
  • -

#6 CodeNubee  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 28-March 13

Re: Web Form is Not Allowing a Re-Submit

Posted 26 October 2013 - 09:38 PM

Thank you for all your help. I re-wrote the index.html page to be this:

<html>
<head><title>Computer Science 553 Lab Pages</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<script type="text/Javascript" src="trig.js"></script>
	<h1>Lab 3: Trig Functions on the Fly</h1>
<div align="center">
	<script type="text/Javascript">
		buildForm();
	</script>
</div>
</body></html>


And the trig.js file now looks like this:
function buildForm(){
	var form = document.createElement("form");

	// First Radio Input
	var input_1 = document.createElement('input');
	input_1.setAttribute('type','radio');
	input_1.setAttribute('id','angleDegrees');
	input_1.setAttribute('name','angleSelect');
	input_1.setAttribute('value','1');
	input_1.setAttribute('onclick','buildTable()');
	form.appendChild(input_1);
	var label_1 = document.createElement('label');
	label_1.appendChild(document.createTextNode('Degrees'));
	form.appendChild(label_1);

	// Second Radio Input
	var input_2 = document.createElement('input');
	input_2.setAttribute('type','radio');
	input_2.setAttribute('id','angleRadians');
	input_2.setAttribute('name','angleSelect');
	input_2.setAttribute('value','1');
	input_2.setAttribute('onclick','buildTable()');
	form.appendChild(input_2);
	var label_2 = document.createElement('label');
	label_2.appendChild(document.createTextNode('Radians'));
	form.appendChild(label_2);
	
	document.body.appendChild(form);
}

function buildTable(){
	var table1 = document.createElement("table");
	table1.style.width='75%';
	table1.setAttribute('border','1');
	table1.setAttribute('id','myTable');
		var tRowH = document.createElement('tr');
		var tCellH_1 = document.createElement('th');
			tRowH.appendChild(tCellH_1);
			tCellH_1.appendChild(document.createTextNode('Degrees'));
		var tCellH_2 = document.createElement('th');
			tRowH.appendChild(tCellH_2);
			tCellH_2.appendChild(document.createTextNode('sin(x)'));
		var tCellH_3 = document.createElement('th');
			tRowH.appendChild(tCellH_3);
			tCellH_3.appendChild(document.createTextNode('cos(x)'));
		var tCellH_4 = document.createElement('th');
			tRowH.appendChild(tCellH_4);
			tCellH_4.appendChild(document.createTextNode('tan(x)'));
		table1.appendChild(tRowH);

	for ( var i=0; i<13; i++ ) {
		var tRow = document.createElement('tr');
		
		var tCell_1 = document.createElement('td');
		tRow.appendChild(tCell_1);
		tCell_1.appendChild(document.createTextNode('1'));
		
		var tCell_2 = document.createElement('td');
		tRow.appendChild(tCell_2);
		tCell_2.appendChild(document.createTextNode('2'));
		
		var tCell_3 = document.createElement('td');
		tRow.appendChild(tCell_3);
		tCell_3.appendChild(document.createTextNode('3'));
		
		var tCell_4 = document.createElement('td');
		tRow.appendChild(tCell_4);
		tCell_4.appendChild(document.createTextNode('4'));

		table1.appendChild(tRow);
	}
		document.body.appendChild(table1);
}

function buildTableRadians(inText){
	buildForm();
	document.write("<table border='1'>");
	document.write("<tr><th>" + inText + "</th>");
	document.write("<th>sin(x)</th>");
	document.write("<th>cos(x)</th>");
	document.write("<th>tan(x)</th>");
	document.write("</tr>");
	for ( var i = 0; i < 13; i++ )	{
		openTableRow();
		writeTableData(i + " " + inText);
		writeTableData("sin(" + i + ")");
		writeTableData("cos(" + i + ")");
		writeTableData("tan(" + i + ")");
		closeTableRow();
	}
	document.write("</table>");
}

function writeTableData(inText){
	document.write("<td>" + inText + "</td>"); 
}

function openTableRow(){
	document.write("<tr>");
}

function closeTableRow(){
	document.write("</tr>");
}


This is my first attempt after doing some studying on my own.
It works now, however the table ignores my stylesheet and it appends
a new table to the end of the page whenever the radio button is clicked
(I wanted it to replace the table with a new one).

Any advice you can give me would be appreciated.
Was This Post Helpful? 0
  • +
  • -

#7 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3392
  • View blog
  • Posts: 9,586
  • Joined: 08-June 10

Re: Web Form is Not Allowing a Re-Submit

Posted 27 October 2013 - 10:38 AM

View PostCodeNubee, on 27 October 2013 - 06:38 AM, said:

It works now, however the table ignores my stylesheet and it appends
a new table to the end of the page whenever the radio button is clicked

cf. document.body.appendChild(form);. as the name suggests, it appends, not replaces.

with regards to the CSS, hard to tell without seeing it.

View PostCodeNubee, on 27 October 2013 - 06:38 AM, said:

(I wanted it to replace the table with a new one).

wrap the table/form into a container element, and empty that before you append the content to the wrapper again.
Was This Post Helpful? 0
  • +
  • -

#8 CodeNubee  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 28-March 13

Re: Web Form is Not Allowing a Re-Submit

Posted 27 October 2013 - 11:40 AM

I solved the append problem by replacing:
document.body.appendChild(table1);
with:
if (document.getElementById("myTable") instanceof HTMLTableElement) {
     var currentTable = document.getElementById("myTable");
     currentTable.parentNode.replaceChild(table1, currentTable);
}
else {
     document.body.appendChild(table1);
}


Thank you everybody for your help.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1