Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

javascript onclick html5

Posted on 2011-03-22
2
Medium Priority
?
1,263 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Tech or Treat!

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

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…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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 how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Suggested Courses

636 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