www.webdeveloper.com
Results 1 to 7 of 7

Thread: JavaScript Not Allowing a Re-Submit

Hybrid View

  1. #1
    Join Date
    Oct 2013
    Location
    Los Angeles, CA.
    Posts
    5

    JavaScript Not Allowing a Re-Submit

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

    My web page is at http://www.analog24.net/~cscott/Lab3-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.

    Code:
    <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>

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    After the page has finished loading, document.write is most certainly not your friend anymore. Instead you can manipulate the content of DOM elements using Javascript.

    For example:

    Code:
    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8" />
    		<title>Computer Science 553 Lab Pages</title>
    
    		<link rel="stylesheet" type="text/css" href="style.css" />
    
    		<script type="text/javascript">
    
    			function buildTableDegrees(inText)
    			{
    				var i, table_data = '';
    
    				for (i = 0; i < 5; ++i) {
    					table_data +=
    						'<tr>' +
    							'<td>' + i + ' ' + inText + '</td>' +
    							'<td>sin(' + i + ')</td>' +
    						'</tr>';
    				}
    				document.getElementById('display').innerHTML =
    					'<table border="1">' +
    						'<tr><th>' + inText + '</th><th>sin(x)</th></tr>' +
    						table_data +
    					'</table>';
    			}
    
    			function buildTableRadians(inText)
    			{
    				var i, table_data = '';
    
    				for (i = 0; i < 5; ++i) {
    					table_data +=
    						'<tr>' +
    							'<td>' + i + ' ' + inText + '</td>' +
    							'<td>sin(' + i + ')</td>' +
    						'</tr>';
    				}
    				document.getElementById('display').innerHTML =
    					'<table border="1">' +
    						'<tr><th>' + inText + '</th><th>sin(x)</th></tr>' +
    						table_data +
    					'</table>';
    			}
    
    		</script>
    
    	</head>
    	<body>
    
    		<h1>Lab 3: Trig Functions on the Fly</h1>
    		<div align="center">
    			<form id="angleSelect" name="angleSelect" method="post">
    				<input type="radio" name="angleSelect" id="angleDegrees" value="1" onclick="buildTableDegrees('Degrees');" />
    				<label for="angleDegrees">Degrees</label>
    				<input type="radio" name="angleSelect" id="angleRadian" value="1" onclick="buildTableRadians('Radians');" />
    				<label for="angleRadian">Radian</label>
    			</form>
    			<br />
    			<div id="display"></div>
    		</div>
    
    	</body>
    </html>
    Don't tell anyone I actually wrote out full blown HTML within innerHTML, I have a reputation to keep
    JavaScript: Learn | Validate | Compact | bionoid

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    do not use document.write after the page has loaded. oops, i'm late lol
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  4. #4
    Join Date
    Oct 2013
    Location
    Los Angeles, CA.
    Posts
    5
    Thank you for all your help bionoid. I think I will avoid forcing html into my javascript whenever possible.
    I re-wrote the index.html page to be this:

    Code:
    <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:
    Code:
    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.

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    a much perverted variant:

    html

    Code:
    <!DOCTYPE html>
    <html>
    <head><title>Computer Science 553 Lab Pages</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <style>
    input[type=radio]{cursor:pointer;}
    </style>
    <script src="trig.js"></script>
    </head>
    <body>
    <h1>Lab 3: Trig Functions on the Fly</h1>
    </body>
    </html>
    javascript

    Code:
    /*
    http://www.webdeveloper.com/forum/showthread.php?285441-JavaScript-Not-Allowing-a-Re-Submit&p=1293587#post1293587
    */
    function doc(id){return document.getElementById(id);}
    function addCell(row,elem,txt){var el=document.createElement(elem);el.innerHTML=txt;row.appendChild(el);}
    function addRow(tab){var r=document.createElement('tr');tab.appendChild(r);return r;}
    
    function addElem(el,type,id,fr,inhtml,name,value,onclck,whereTo){
    var elem=document.createElement(el);
    if(type){elem.type=type;}
    if(id){elem.id=id;}
    if(fr){elem.setAttribute('for',fr);}
    if(inhtml){elem.innerHTML=inhtml;}
    if(name){elem.name=name;}
    if(value){elem.value=value;}
    if(onclck){eval('elem.onclick=function(){'+onclck+';}');}
    eval(whereTo+'.appendChild(elem)');
    }
    
    function buildForm(){
    addElem('form','','myform','','','myform','','','document.body');
    addElem('input','radio','angleDegrees','','','angleSelect','1','buildTable("mytab","Degrees",13)','doc("myform")');
    addElem('label','','','angleDegrees','Degrees','','','','doc("myform")');
    addElem('input','radio','angleRadians','','','angleSelect','2','buildTable("mytab","Radians",13)','doc("myform")');
    addElem('label','','','angleRadians','Radians','','','','doc("myform")');
    }
    
    function buildTable(id,txt,numrows){
    try{var el=doc(id);document.body.removeChild(el);}catch(e){}
    var tab=document.createElement("table");
    tab.id=id;tab.style.width='75%';tab.border='1';tab.align='center';
    var hdr=addRow(tab);addCell(hdr,'th',txt);addCell(hdr,'th','sin(x)');addCell(hdr,'th','cos(x)');addCell(hdr,'th','tan(x)');
    for(var i=0;i<numrows;i++){
    var n=eval(i+1),rr=addRow(tab);addCell(rr,'td',n);addCell(rr,'td',n);addCell(rr,'td',n);addCell(rr,'td',n);
    }
    document.body.appendChild(tab);
    }
    
    window.onload=buildForm;
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  6. #6
    Join Date
    Oct 2013
    Location
    Los Angeles, CA.
    Posts
    5
    Wow! I am going to have to do some studying before I understand that code.

    I am going to try to do this myself and just refer to your code. Thanks.

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    you're welcome )) have fun )
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles