?
Solved

javascript onclick html5

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

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…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

801 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