Solved

javascript onclick html5

Posted on 2011-03-22
2
1,238 Views
Last Modified: 2012-05-11
I am using forms as my navigation so i can get the amount of time spent on pages as they browse through the training materials.  I used this for test pages where there was one form on the page and it passed the time correctly.  Now i cannot seem to get the elapsedTime to pass, and i echo it out to see if it's going through and i get nothing so while the form is going to the passthru page it is not submitting the time.
<?php
session_start();
?>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
        <meta name="viewport" content="width=device-width; height=device-height; initial-scale=1;">
        
        <title>Digital Natives Testing Module</title>
        
        <link rel="stylesheet" type="text/css" href="styles.css" />
               
        <!--[if IE]>
        
        <style type="text/css">
        .clear {
          zoom: 1;
          display: block;
        }
        </style>

        
        <![endif]-->
        
    </head>
    
    <script>
	  var currentTime = new Date();
	  var startTime = currentTime.getTime();
	  
	  function getElapsedTime()
	  {
		  var endTime = new Date();
		  var elapsedTime = ((endTime.getTime() - startTime) / 1000);
		  form1.elapsedTime.value = elapsedTime;
	  }
	</script>
    
    <body>

    	<section id="page"> <!-- Defining the #page section with the section tag -->
    
            <div class="header"> <!-- Defining the header section of the page with the appropriate tag -->

                <h1>Test A</h1>
                <p>&nbsp;</p>
                <nav> <!-- The nav link semantically marks your main site navigation -->
              		<ul>
                        <li>
                          <table border="0" cellpadding="0" cellspacing="0"> 
                          <tr> 
                            <td> 
                           <form name="form1" id="training" method="post" action="doTrainingInsert.php">
                              <input type="hidden" name="elapsedTime" />
                              <button type="submit" name="submitAoverheat" onclick="getElapsedTime()">OVERHEAT</button>
                           </form> 
                            </td> 
                            <td> 
                           <form name="form1" id="training" method="post" action="doTrainingInsert.php">
                              <input type="hidden" name="elapsedTime" />
                              <button type="submit" name="submitAjammed" onclick="getElapsedTime()">JAMMED</button></form> 
                           </form> 
                            </td>
                            <td>
                          <form name="form1" id="training" method="post" action="doTrainingInsert.php">
                              <input type="hidden" name="elapsedTime" />
                              <button type="submit" name="submitAcontinue" onclick="getElapsedTime()">CONTINUE</button></form> 
                           </form> 
                            </td>
                            <td>
                          <form name="form1" id="training" method="post" action="doTrainingInsert.php">
                              <input type="hidden" name="elapsedTime" />
                              <button type="submit" name="submitAstop" onclick="getElapsedTime()">STOP</button></form> 
                           </form> 
                            </td>
                            <td>
                          <form name="form1" id="training" method="post" action="doTrainingInsert.php">
                              <input type="hidden" name="elapsedTime" />
                              <button type="submit" name="submitAfinished" onclick="getElapsedTime()">FINISHED</button></form> 
                           </form> 
                            </td> 
                          </tr>
                        </table>
                        </li>

                    </ul>
                </nav>
            
            </div>
            
            <section id="articles"> <!-- A new section with the articles -->

				<!-- Article 1 start -->

                <div class="line"></div>  <!-- Dividing line -->
                
                <div class="article" id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
                    <h2>overheat</h2>
                    
                    <div class="line"></div>
                    
                    <div class="articleBody clear">
                    
                    <div class="figure"> <!-- The figure tag marks data (usually an image) that is part of the article -->
	                    	<img src="img/a_overheat.png" alt="overheat" />
                    </div>
                    
                      <p>If the machine is producing too rapidly, it may result in overheating. When the machine displays a square, this indicates that it is overheating and needs to be slowed down.</p>
                      
                      
                      
                  </div>
                </div>
                
				<!-- Article 1 end -->


            </section>

        <footer> <!-- Marking the footer section -->

          <div class="line"></div>
        
        </footer>
            
		</section> <!-- Closing the #page section -->
        
    </body>
</html>

Open in new window

0
Comment
Question by:newmie22
2 Comments
 
LVL 30

Accepted Solution

by:
third earned 500 total points
ID: 35195858
you only need one form and one hidden field. the attached code assigns the calculated value to the hidden field and submits the form afterwards.
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
        <meta name="viewport" content="width=device-width; height=device-height; initial-scale=1;">
        
        <title>Digital Natives Testing Module</title>
        
        <link rel="stylesheet" type="text/css" href="styles.css" />
               
        <!--[if IE]>
        
        <style type="text/css">
        .clear {
          zoom: 1;
          display: block;
        }
        </style>

        
        <![endif]-->
        
    </head>
    
    <script>
	  var currentTime = new Date();
	  var startTime = currentTime.getTime();
	  
	  function getElapsedTime()
	  {
		  var endTime = new Date();
		  var elapsedTime = ((endTime.getTime() - startTime) / 1000);
		  document.getElementById('elapsedTime').value = elapsedTime;
		  document.forms['form1'].submit();
	  }
	</script>
    
    <body>
		<form name="form1" id="training" method="post" action="doTrainingInsert.php">
		   <input type="hidden" name="elapsedTime" id="elapsedTime" />
    	<section id="page"> <!-- Defining the #page section with the section tag -->
    
            <div class="header"> <!-- Defining the header section of the page with the appropriate tag -->

                <h1>Test A</h1>
                <p>&nbsp;</p>
                <nav> <!-- The nav link semantically marks your main site navigation -->
              		<ul>
                        <li>						 
                          <table border="0" cellpadding="0" cellspacing="0"> 
                          <tr> 
                            <td>                                                          
                              <button name="submitAoverheat" onclick="getElapsedTime()">OVERHEAT</button>
                            </td> 
                            <td> 
                              <button name="submitAjammed" onclick="getElapsedTime()">JAMMED</button>
                            </td>
                            <td>
                              <button name="submitAcontinue" onclick="getElapsedTime()">CONTINUE</button>
                            </td>
                            <td>
                              <button name="submitAstop" onclick="getElapsedTime()">STOP</button>
                            </td>
                            <td>
                              <button name="submitAfinished" onclick="getElapsedTime()">FINISHED</button>
                            </td> 
                          </tr>
                        </table>
                        </li>

                    </ul>
                </nav>
            
            </div>
            
            <section id="articles"> <!-- A new section with the articles -->

				<!-- Article 1 start -->

                <div class="line"></div>  <!-- Dividing line -->
                
                <div class="article" id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
                    <h2>overheat</h2>
                    
                    <div class="line"></div>
                    
                    <div class="articleBody clear">
                    
                    <div class="figure"> <!-- The figure tag marks data (usually an image) that is part of the article -->
	                    	<img src="img/a_overheat.png" alt="overheat" />
                    </div>
                    
                      <p>If the machine is producing too rapidly, it may result in overheating. When the machine displays a square, this indicates that it is overheating and needs to be slowed down.</p>
                      
                      
                      
                  </div>
                </div>
                
				<!-- Article 1 end -->


            </section>

        <footer> <!-- Marking the footer section -->

          <div class="line"></div>
        
        </footer>
            
		</section> <!-- Closing the #page section -->
        </form>
    </body>
</html>

Open in new window

0
 

Author Closing Comment

by:newmie22
ID: 35196145
thanks!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone 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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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…

821 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