?
Solved

javascript onclick html5

Posted on 2011-03-22
2
Medium Priority
?
1,264 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 2000 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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
This holiday season, we’re giving away the gift of knowledge—tech knowledge, that is. Keep reading to see what hacks, tips, and trends we have wrapped and waiting for you under the tree.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month17 days, 8 hours left to enroll

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