Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Location
    Bronx, NY
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with forms inside tables

    I am so close to finishing this table, but I cannot get the buttons to work in the forms. I just need the buttons to work for each individual form.

    Code:
    <html>
    <head>
    <title>DHTML BOTH</title>
    
    <script type='text/javascript'>
    
    /* FUNCTIONS FOR FIRST TABLE
     */
     
    function calcArea()
    {
    	var tbox1 = document.table1.getElementById("value1");
    	var tbox2 = document.table1.getElementById("value2");
       	var tbox3 = document.table1.getElementById("answer");
       
    	tbox3.value=parseInt(tbox1.value)*(tbox2.value);
    }
    
    function calcPerimeter()
    {
    	var tbox1 = document.table1.getElementById("value1");
    	var tbox2 = document.table1.getElementById("value2");
       	var tbox3 = document.table1.getElementById("answer");
       
    	tbox3.value = parseInt(2*tbox1.value)+(2*tbox2.value);
    }
    
    function clearall()
    {
      var tbox1 = document.table1.getElementById("value1");
      var tbox2 = document.table1.getElementBYId("value2");
      var tbox3 = document.table1.getElementById("answer");
     
      tbox1.value="";
      tbox2.value="";
      tbox3.value="";
    }
    
    /* FUNCTIONS FOR SECOND TABLE
    */
    
    function calcArea2()
    {
    	var tbox1 = document.table2.getElementById("value1A");
    	var tbox2 = document.table2.getElementById("value2A");
       	var tbox3 = document.table2.getElementById("answerA");
       
    	tbox3.value=parseInt(tbox1A.value)*(tbox2A.value);
    }
    
    function calcPerimeter2()
    {
    	var tbox1 = document.table2.getElementById("value1A");
    	var tbox2 = document.table2.getElementById("value2A");
       	var tbox3 = document.table2.getElementById("answerA");
       
    	tbox3.value = parseInt(2*tbox1A.value)+(2*tbox2A.value);
    }
    
    function clearall2()
    {
      var tbox1 = document.table2.getElementById("value1A");
      var tbox2 = document.table2.getElementBYId("value2A");
      var tbox3 = document.table2.getElementById("answerA");
     
      tbox1.value="";
      tbox2.value="";
      tbox3.value="";
    }
    
    function dhtml()
    {
    	var str="<table style='border:solid blue 5px;'><tr><td>"
    	var sqstr="";
    	sqstr += "<form id = 'table1'>";
    	sqstr +="<table>";
    	sqstr +="<th colspan='2'>RECTANGLE PROBLEM1</th>";
    	sqstr +="<tr><td><label>Enter Length:	</label></td><td><input style='background-color:DEDEE6;border:4px solid black;' type='text' id='value1' /></td></tr>";
    	sqstr +="<tr><td><label>Enter Width:	</label></td><td><input style='background-color:DEDEE6;border:4px solid black;' type='text' id='value2' /></td></tr>";
    	sqstr +="<tr><td><label>Answer:     		</label></td><td><input style='background-color:DEDEE6;border:4px solid black;' readonly type='text' id='answer'/></td></tr>";
    	sqstr +="<tr><td colspan='2'>";
    	sqstr +="<input style='color:black;background-color:red; border:4px solid black;' 	type='button' value='Area' 			onClick='calcArea()' />";
    	sqstr +="<input style='color:black;background-color:red; border:4px solid black;' 	type='button' value='Perimeter' 	onClick='calcPerimeter()' />";
    	sqstr +="<input style='color:black;background-color:red; border:4px solid black;' 	type='button' value='Clear' 		onClick='clearall()' />";
    	sqstr +="</td></tr>";
    	sqstr +="</table>";
    	sqstr +="</form>";
    	sqstr +="</tr></td>";
    	
    	// SECOND FORM/TABLE.
    	var sqsrt = "<tr><td>";
    	sqstr +="";
    	sqstr += "<form id = 'table2'>";
    	sqstr +="<table>";
    	sqstr +="<th colspan='2'>RECTANGLE PROBLEM2</th>";
    	sqstr +="<tr><td><label>Enter Length:	</label></td><td><input style='background-color:DEDEE6;border:4px solid black;' type='text' id='value1A' /></td></tr>";
    	sqstr +="<tr><td><label>Enter Width:	</label></td><td><input style='background-color:DEDEE6;border:4px solid black;' type='text' id='value2A' /></td></tr>";
    	sqstr +="<tr><td><label>Area:     		</label></td><td><input style='background-color:DEDEE6;border:4px solid black;' readonly type='text' id='answer1A'/></td></tr>";
    	sqstr +="<tr><td><label>Perimeter:     	</label></td><td><input style='background-color:DEDEE6;border:4px solid black;' readonly type='text' id='answer2A'/></td></tr>";
    	sqstr +="<tr><td colspan='2'>";
    	sqstr +="<input style='color:black;background-color:red; border:4px solid black;' 	type='button' value='Area' 		onClick='calcArea2()' />";
    	sqstr +="<input style='color:black;background-color:red; border:4px solid black;' 	type='button' value='Perimeter' onClick='calcPerimeter2()' />";
    	sqstr +="<input style='color:black;background-color:red; border:4px solid black;' 	type='button' value='Both' 		onClick='calcArea2();calcPerimeter2()'/>";
    	sqstr +="<input style='color:black;background-color:red; border:4px solid black;' 	type='button' value='Clear' 	onClick='clearall2()' />";
    	sqstr +="</td></tr>";
    	sqstr +="</table>";
    	sqstr +="</form>";
    	sqstr +="</td></tr></table>";
    	var y=document.getElementById('cont');
    	y.innerHTML=sqstr;
    }
    
    </script>
    </head>
    <body onload="dhtml()">
    <div id="cont"></div> 
    </body>
    </html>
    I know in the JavaScript I have 'document.table1/2'. I was just experimenting with the code. Any help will be appreciated

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Can I ask a really dumb question?

    WHY are you using JavaScript to create the HTML?

    It's not like you are creating anything dynamically. The HTML is fixed, just coming from JS.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    And you could make this ENORMOUSLY easier if you used names for the input fields, instead of ids.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Anyway, several mistakes.

    (1) document.table1 does not exist.
    You would have needed to use document.getElementById("table1") to access the table.

    (2) You would have then written
    Code:
    	var tbox1 = document.getElementById("table1").getElementById("value1");
    but that won't work because a <table> doesn't have a method getElementById

    (3) So the quick and dirty answer is to just use
    Code:
    	var tbox1 = document.getElementById("value1");
    (4) In two places, you used getElementBYId with an upper case "Y". Oops.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Try this rewrite of your first form/table.

    Though I still don't understand why you would use JavaScript to create the HTML.

    Code:
    <html>
    <head>
    <title>DHTML BOTH</title>
    
    <script type='text/javascript'>
    
    /* FUNCTIONS FOR FIRST TABLE
     */
     
    function calcArea(frm)
    {
        frm.answer.value = frm.value1.value * frm.value2.value;
    }
    
    function calcPerimeter(frm)
    {
        frm.answer.value = 2*frm.value1.value + 2*frm.value2.value;
    }
    
    function clearall(frm)
    {
        frm.value1.value = frm.value2.value = frm.answer.value = "";
    }
    
    function dhtml()
    {
    	var str="<table style='border:solid blue 5px;'><tr><td>"
    	var sqstr="";
    	sqstr += "<form>";
    	sqstr +="<table>";
    	sqstr +="<th colspan='2'>RECTANGLE PROBLEM1</th>";
    	sqstr +="<tr><td><label>Enter Length:	</label></td><td><input style='background-color:DEDEE6;border:4px solid 
    
    black;' type='text' name='value1' /></td></tr>";
    	sqstr +="<tr><td><label>Enter Width:	</label></td><td><input style='background-color:DEDEE6;border:4px solid 
    
    black;' type='text' name='value2' /></td></tr>";
    	sqstr +="<tr><td><label>Answer:     		</label></td><td><input style='background-color:DEDEE6;border:4px 
    
    solid black;' readonly type='text' name='answer'/></td></tr>";
    	sqstr +="<tr><td colspan='2'>";
    	sqstr +="<input style='color:black;background-color:red; border:4px solid black;' 	type='button' value='Area' 
    
    			onClick='calcArea(this.form)' />";
    	sqstr +="<input style='color:black;background-color:red; border:4px solid black;' 	type='button' 
    
    value='Perimeter' 	onClick='calcPerimeter(this.form)' />";
    	sqstr +="<input style='color:black;background-color:red; border:4px solid black;' 	type='button' 
    
    value='Clear' 		onClick='clearall(this.form)' />";
    	sqstr +="</td></tr>";
    	sqstr +="</table>";
    	sqstr +="</form>";
    	sqstr +="</tr></td>";
    	
    	document.getElementById("cont").innerHTML=sqstr;
    }
    
    </script>
    </head>
    <body onload="dhtml()">
    <div id="cont"></div> 
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Here's the more modern way to do all that. Replacing a lot of obsolescent stuff.

    And at the same time using MEANINGFUL names instead of "value1" and "value2" which imply nothing about what they are.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>DHTML BOTH</title>
    <style type="text/css">
    .entry {
        background-color: #DEDEE6;
        border:4px solid black;
    }
    .btn {
        color: black; 
        background-color: red; 
        border:4px solid black;
    }
    </style>
    </head>
    <body>
    <form id="form1">
    <table>
    <tr>
    	<th colspan='2'>RECTANGLE PROBLEM1</th>
    </tr>
    <tr>
    	<td><label>Enter Length:</label></td>
            <td><input class="entry" name="long" /></td>
    </tr>
    <tr>
    	<td><label>Enter Width:</label></td>
            <td><input class="entry" name="wide" /></td>
    </tr>
    	<tr><td><label>Answer:</label></td>
            <td><input class="entry" readonly="readonly" name="answer"/></td>
    </tr>
    <tr>
    	<td colspan="2">
    		<input class="btn" name="area" type="button" value="Area"/>
    		<input class="btn" name="perimeter" type="button" value="Perimeter"/>
    		<input class="btn" name="clearall" type="button" value="Clear"/>
    	</td>
    </tr>
    </table>
    </form>
    
    <script type="text/javascript">
    var frm = document.getElementById("form1");
    frm.area.onclick = function() {
        frm.answer.value = frm.long.value * frm.wide.value;
    }
    frm.perimeter.onclick = function() {
        frm.answer.value = 2*frm.long.value + 2*frm.wide.value;
    }
    frm.clearall.onclick = function() {
        frm.long.value = frm.wide.value = frm.answer.value = "";
    }
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New to the CF scene
    Join Date
    Apr 2013
    Location
    Bronx, NY
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Damn lol sorry if I offended anyone (or everyone for that matter). The only reason I'm using JS to create HTML is because my professor wants us to learn DHTML. I'm all for separating the HTML and JS, but he insists on this way (go figure). Anyway, THANKS ALOT

  • #8
    New to the CF scene
    Join Date
    Apr 2013
    Location
    Bronx, NY
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't get the second form to work now. Is the first form getting in the way of the functionality of the second one?

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    ??? Offended? You certainly didn't offend me.

    Repost your revised code. I didn't see anything there where the first would interfere with the second.

    Commentary only: There's nothing wrong with learning DHTML, but doing it by just converting static HTML into static JavaScript isn't the best way to go about it.

    I *suspect* that what the professor really wanted you to do was to create two tables and forms in such a way that you used a function and/or loop, so that you didn't have to nearly (but not quite) clone the code for the second table.

    *THAT* would make some sort of sense.

    Even so, creating DHTML using innerHTML isn't the best way. Hopefully he will also be teaching you about using document.createElement() and the DOM methods.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    OOPS. I take it back. I see a major mistake in your table2 stuff.

    Your tbox3 in both the area and perimeter calculations is getElementById("answerA") but you don't have any such id in your page, at all.

    And you have other errors. You do
    Code:
       tbox3.value=parseInt(tbox1A.value)*(tbox2A.value);
    but you never define tbox1A or tbox2A, for example.

    So, yeah, all that code is hosed.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    WTH.

    Here:
    Code:
    <html>
    <head>
    <title>DHTML BOTH</title>
    
    <script type='text/javascript'>
    
    /* FUNCTIONS FOR FIRST TABLE
     */
     
    function calcArea()
    {
    	var tbox1 = document.getElementById("value1");
    	var tbox2 = document.getElementById("value2");
       	var tbox3 = document.getElementById("answer");
       
    	tbox3.value=parseInt(tbox1.value)*(tbox2.value);
    }
    
    function calcPerimeter()
    {
    	var tbox1 = document.getElementById("value1");
    	var tbox2 = document.getElementById("value2");
       	var tbox3 = document.getElementById("answer");
       
    	tbox3.value = parseInt(2*tbox1.value)+(2*tbox2.value);
    }
    
    function clearall()
    {
      var tbox1 = document.getElementById("value1");
      var tbox2 = document.getElementById("value2");
      var tbox3 = document.getElementById("answer");
     
      tbox1.value="";
      tbox2.value="";
      tbox3.value="";
    }
    
    /* FUNCTIONS FOR SECOND TABLE
    */
    
    function calcArea2()
    {
    	var tbox1 = document.getElementById("value1A");
    	var tbox2 = document.getElementById("value2A");
       	var tbox3 = document.getElementById("answer1A");
       
    	tbox3.value=parseInt(tbox1.value)*(tbox2.value);
    }
    
    function calcPerimeter2()
    {
    	var tbox1 = document.getElementById("value1A");
    	var tbox2 = document.getElementById("value2A");
       	var tbox3 = document.getElementById("answer2A");
       
    	tbox3.value = parseInt(2*tbox1.value)+(2*tbox2.value);
    }
    
    function clearall2()
    {
      var tbox1 = document.getElementById("value1A");
      var tbox2 = document.getElementById("value2A");
      var tbox3 = document.getElementById("answer1A");
      var tbox4 = document.getElementById("answer2A");
     
      tbox1.value="";
      tbox2.value="";
      tbox3.value="";
      tbox4.value="";
    }
    
    function dhtml()
    {
    	var str="<table style='border:solid blue 5px;'><tr><td>"
    	var sqstr="";
    	sqstr += "<form id = 'table1'>";
    	sqstr +="<table>";
    	sqstr +="<th colspan='2'>RECTANGLE PROBLEM1</th>";
    	sqstr +="<tr><td><label>Enter Length:	</label></td><td><input style='background-color:DEDEE6;border:4px solid 
    
    black;' type='text' id='value1' /></td></tr>";
    	sqstr +="<tr><td><label>Enter Width:	</label></td><td><input style='background-color:DEDEE6;border:4px solid 
    
    black;' type='text' id='value2' /></td></tr>";
    	sqstr +="<tr><td><label>Answer:     		</label></td><td><input style='background-color:DEDEE6;border:4px 
    
    solid black;' readonly type='text' id='answer'/></td></tr>";
    	sqstr +="<tr><td colspan='2'>";
    	sqstr +="<input style='color:black;background-color:red; border:4px solid black;' 	type='button' value='Area' 
    
    			onClick='calcArea()' />";
    	sqstr +="<input style='color:black;background-color:red; border:4px solid black;' 	type='button' 
    
    value='Perimeter' 	onClick='calcPerimeter()' />";
    	sqstr +="<input style='color:black;background-color:red; border:4px solid black;' 	type='button' 
    
    value='Clear' 		onClick='clearall()' />";
    	sqstr +="</td></tr>";
    	sqstr +="</table>";
    	sqstr +="</form>";
    	sqstr +="</tr></td>";
    	
    	// SECOND FORM/TABLE.
    	var sqsrt = "<tr><td>";
    	sqstr +="";
    	sqstr += "<form id = 'table2'>";
    	sqstr +="<table>";
    	sqstr +="<th colspan='2'>RECTANGLE PROBLEM2</th>";
    	sqstr +="<tr><td><label>Enter Length:	</label></td><td><input style='background-color:DEDEE6;border:4px solid 
    
    black;' type='text' id='value1A' /></td></tr>";
    	sqstr +="<tr><td><label>Enter Width:	</label></td><td><input style='background-color:DEDEE6;border:4px solid 
    
    black;' type='text' id='value2A' /></td></tr>";
    	sqstr +="<tr><td><label>Area:     		</label></td><td><input style='background-color:DEDEE6;border:4px 
    
    solid black;' readonly type='text' id='answer1A'/></td></tr>";
    	sqstr +="<tr><td><label>Perimeter:     	</label></td><td><input style='background-color:DEDEE6;border:4px solid 
    
    black;' readonly type='text' id='answer2A'/></td></tr>";
    	sqstr +="<tr><td colspan='2'>";
    	sqstr +="<input style='color:black;background-color:red; border:4px solid black;' 	type='button' value='Area' 
    
    		onClick='calcArea2()' />";
    	sqstr +="<input style='color:black;background-color:red; border:4px solid black;' 	type='button' 
    
    value='Perimeter' onClick='calcPerimeter2()' />";
    	sqstr +="<input style='color:black;background-color:red; border:4px solid black;' 	type='button' value='Both' 
    
    		onClick='calcArea2();calcPerimeter2()'/>";
    	sqstr +="<input style='color:black;background-color:red; border:4px solid black;' 	type='button' 
    
    value='Clear' 	onClick='clearall2()' />";
    	sqstr +="</td></tr>";
    	sqstr +="</table>";
    	sqstr +="</form>";
    	sqstr +="</td></tr></table>";
    	var y=document.getElementById('cont');
    	y.innerHTML=sqstr;
    }
    
    </script>
    </head>
    <body onload="dhtml()">
    <div id="cont"></div> 
    </body>
    </html>
    But again, using ID's for the form field names is a bad idea compared to using names.

    And in any case using meaningless names like "value1" and "value2" instead of names like "long" and "wide" make the code much less clear.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by smoovejayy View Post
    The only reason I'm using JS to create HTML is because my professor wants us to learn DHTML. I'm all for separating the HTML and JS, but he insists on this way (go figure). Anyway, THANKS ALOT
    Simply creating the code as HTML and then attaching it using innerHTML isn't really using JavaScript to create the table - it is using HTML to create the table and simply using JavaScript to add it to the page.

    If you are creating a table from JavaScript you should use document.createElement() to create the table and tbody tags and then use insertRow() and insertCell() to add the rows and cells to the table. See http://javascriptexample.net/domtable12.php for an example of how to create a table using JavaScript.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Of course, Felgall, this assumes that the instructor has the foggiest notion about what is good JavaScript practice. If the idiot instructor thinks that innerHTML is the way to go, then he probably has no choice but to use crappy coding.

    *sigh*
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    Of course, Felgall, this assumes that the instructor has the foggiest notion about what is good JavaScript practice. If the idiot instructor thinks that innerHTML is the way to go, then he probably has no choice but to use crappy coding.
    While producing the crappy code that the instructor expects during the course is the easiest way to pass the course such code will not be useful after completing the course. At that point the person really needs to know how to write the code properly - so if the course is one that must be done in order to get a particular qualification then the person taking the course really needs to learn the proper way as well as the crappy way. If the course isn't required for a qualification then the better option is to dump the useless course and just learn how to do it properly.

    By including examples of how the code should e written in the real world we let the person taking the course know how poor the course is and provide them with some information on what they will need to learn in order to use JavaScript properly. There also may be a slight possibility that the course is actually asking for the proper approach to be used and that the student has simply been misled by poor code that they have found elsewhere.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,869
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Not one word of argument from me. The have-to-do-it-this-way-to-pass-the-course comment was just a lament, not an argument.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

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