Solved

javascript onclick html5

Posted on 2011-03-22
2
1,225 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

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…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to dynamically set the form action using jQuery.

895 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now