By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,613 Members | 1,890 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,613 IT Pros & Developers. It's quick & easy.

JavaScript not working if <form> is used

P: 21
In this code i have placed a javascript for calculating numbers, total and %age. But when i am using form the javascript calling is not working,

is there any solution......

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Staff</title>
  6. <?php include'header2.php' ?>
  7. <?php 
  8.     session_start();
  9.         $connection = mysql_connect('localhost', 'root', '123');
  10.         $con        = mysql_select_db('new_db',$connection);
  11.  
  12.             if (isset($_POST['submit']))
  13.             {    
  14.             $insert = "INSERT INTO result SET name = '".$_POST['name']."',
  15.                                                   math = '".$_POST['math']."',
  16.                                                   english = '".$_POST['eng']."',
  17.                                                   hindi= '".$_POST['hindi']."',
  18.                                                   science = '".$_POST['science']."',
  19.                                                   art = '".$_POST['art']."',
  20.                                                   total = '".$_POST['total']."',
  21.                                                   percentage = '".$_POST['pecentage']."',
  22.                                                   passfail= '".$_POST['passfail']."'";
  23.  
  24.             $query = mysql_query($insert) or die (mysql_error());
  25.             header('location:result.php');
  26.             }
  27. ?>
  28.  
  29. </head>
  30. <script>
  31.     function total()
  32.             {
  33.                          var math =    parseInt(document.getElementById('math').value);
  34.                         var eng  =  parseInt(document.getElementById('eng').value);
  35.                         var hindi = parseInt(document.getElementById('hindi').value);
  36.                         var science = parseInt(document.getElementById('science').value);
  37.  
  38.                         var result = (math + eng + hindi + science);
  39.                         var percentage = (math + eng + hindi + science)/4;
  40.  
  41.                         document.getElementById('total').value=result;
  42.                         document.getElementById('percentage').value=percentage;
  43.  
  44.  
  45.  
  46.                          if (percentage<33)
  47.                              {
  48.  
  49.                                 document.getElementById('passfail').value="fail";
  50.                             }
  51.                         else if (percentage<50 || percentage<33)
  52.                             {
  53.                                 document.getElementById('passfail').value="Second Grade";
  54.                             }
  55.                         else if (percentage<80 || percentage<60)
  56.                             {
  57.                                 document.getElementById('passfail').value="First Grade";
  58.                             }
  59.                         else
  60.                             {
  61.                                 document.getElementById('passfail').value="Topper";
  62.                             }
  63.             }
  64. </script>
  65.  
  66. <style>
  67. .box
  68.         {
  69.             background-color:#871717;
  70.             width:300px;
  71.             margin-left:175px;
  72.             height:735px;
  73.         }
  74. .menubox
  75.         {
  76.             width:625px;
  77.             height:500px;
  78.             background-color:#FFF;
  79.             position:absolute;
  80.             top:150px;
  81.             left:550px;
  82.             opacity:.8;
  83.         }
  84. .result
  85.         {
  86.             font-family:Georgia, "Times New Roman", Times, serif;
  87.             font-size:16px;
  88.             font-style:italic;
  89.             font-weight:bold;
  90.             color:#FFF;
  91.             position:absolute;
  92.             top:250px;
  93.             left:250px;
  94.         }
  95. .sec
  96.         {
  97.             font-family:Verdana, Geneva, sans-serif;
  98.             font-size:12px;
  99.             color:#FFF;
  100.             position:absolute;
  101.             top:325px;
  102.             left:235px;
  103.             text-align:center;
  104.             width:175px;
  105.             font-style:italic;
  106.  
  107.         }
  108. .border1
  109.         {
  110.             border:1px solid #FFF;
  111.             position:absolute;
  112.             top:445px;
  113.             left:25px;
  114.             width:220px;
  115.         }
  116. fieldset
  117.         {
  118.             width:500px;
  119.             border-radius:5px;
  120.         }
  121. .res
  122.         {
  123.             position:absolute;
  124.             top:200px;
  125.             right:220px;
  126.  
  127.         }
  128. table
  129.         {
  130.             margin-left:80px;
  131.             margin-top:20px;
  132.             margin-bottom:20px;
  133.             text-align:center;
  134.             border-collapse:collapse;
  135.         }
  136.  
  137. input
  138.         {
  139.             width:150px;
  140.         }
  141.  
  142. </style>
  143. <body>
  144. <div class="box"></div>
  145. <div class="result">Students Results</div>
  146. <div class="menubox"></div>
  147. <div class="sec">Institue students results are displaying here.</div>
  148. <div class="border1"></div>
  149. <div class="res">
  150.     <fieldset >
  151.     <legend>Students Results</legend>
  152.  
  153.         <table>
  154.  
  155.                    <tr><td style="background-color:#69F; color:#FFF">Name<td style="background-color:#69F; color:#FFF; padding:5px 10px 5px 0"><input type="text" name="name" id="name" placeholder= "Student Name" /></td></td></tr>
  156.                 <tr><td style="background-color:#69F; color:#FFF">Math<td style="background-color:#69F; color:#FFF; padding:5px 10px 5px 0"><input type="text" name="math" id="math" placeholder= "Math Marks" /></td></td></tr>
  157.                 <tr><td style="background-color:#69F; color:#FFF">English<td style="background-color:#69F; color:#FFF; padding:5px 0 5px 0"><input type="text" name="eng" id="eng" placeholder= "English Marks" /></td></td></tr>
  158.                 <tr><td style="background-color:#69F; color:#FFF">Hindi<td style="background-color:#69F; color:#FFF; padding:5px 0 5px 0"><input type="text" name="hindi" id="hindi" placeholder= "Hindi Marks" /></td></td></tr>
  159.                 <tr><td style="background-color:#69F; color:#FFF">Science<td style="background-color:#69F; color:#FFF; padding:5px 0 5px 0"><input type="text" name="science" id="science" placeholder= "Science Marks" /></td></td></tr>
  160.                 <tr><td style="background-color:#69F; color:#FFF">Art<td style="background-color:#69F; color:#FFF; padding:5px 0 5px 0"><input type="text" name="art" id="art" placeholder= "Art Grades" /></td></td></tr>
  161.                 <tr><td style="background-color:#871717; color:#FFF">Total<td style="background-color:#871717; color:#FFF; padding:5px 0 5px 0"><input type="text" name="total" id="total" placeholder= "Average" onmouseover="return total()" /></td></td></tr>
  162.                 <tr><td style="background-color:#871717; color:#FFF">Percentage<td style="background-color:#871717; color:#FFF; padding:5px 0 5px 0"><input type="text" name="percentage" id="percentage" placeholder= "Percentage" onmouseover="return total()"  /></td></td></tr>
  163.                 <tr><td style="background-color:#871717; color:#FFF">Rank<td style="background-color:#871717; color:#FFF; padding:5px 0 5px 0"><input type="text" name="passfail" id="passfail" placeholder= "passfail"  onmouseover="return total()"/></td></td></tr>
  164.  
  165.  
  166.         </table>
  167.  
  168.       </fieldset>
  169.  
  170. </div>
  171. </body>
  172. </html>
  173.  
May 31 '13 #1
Share this Question
Share on Google+
1 Reply


Dormilich
Expert Mod 5K+
P: 8,639
itís working for me.
May 31 '13 #2

Post your reply

Sign in to post your reply or Sign up for a free account.