Floating SUBMIT button within a CGI page

I have a cgi page with a form and related submit button. The form will need scrolling, so I would like to have a 'floating' submit button. The form page is attached, with an image of how it now looks.  http://www.willmaster.com/library/manage-forms/floating-submit-button.php gives an approach which uses javascript.  

I have embedded the javascript code within the  form function (activityorderform(activities)) embedded in the cgi   page.  While Wing IDE does not flag any python code errors and the cgi page still runs - the submit button remains stuck at the botton of the page - there appears to be no communication between javascript and the other cgi code.

Tks for taking a look.

Image of form with submit button
#!C:\Python34\python.exe
import mysql.connector as conn

import cgi,cgitb
def htmlTop():
      print("""Content-type:text/html\n\n
             <!DOCTYPE html>
             <html lang="fr">
                 <head>
                  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                  <title> My Server-side template</title>
             </head>
             <body>""")





def htmlTail():
      print(""" its done</body>
             </html>""")
      
def connectDB():
      db=conn.connect(host='localhost' ,user='root' ,passwd='' ,db='office')
      cursor = db.cursor()
      return db, cursor   

def numberofrecords(db,cursor):
      sql = ("select * from activities")         
      cursor.execute(sql)
      result = cursor.fetchone()
      number_of_rows=result[0] + 1
      #print(number_of_rows, "number of rows")
      return number_of_rows

  
def selectactivities(db,cursor):
      sql = ("select * from activities")         
      cursor.execute(sql)
      activities = cursor.fetchall()
      return activities

def activityorderform(activities):
      print("""<form method="post" action="action_OrderFormTWO.cgi">""")
      print("<table border='1'>")
      print("<tr bgcolor=#FCFFDA>")
      print("<th>#</th>")
      print("<th>Activity</th>")
      print("<th>Jour</th>")
      print("<th>Horaire</th>")
      print("<th>Professeur</th>")
      print("<th>Trimesters</th>")
      
      print("</tr>")
      color = 1
      for each in activities:
            if color is 1:
                  print("<tr bgcolor=#BED3BE>")
            else:
                  print("<tr bgcolor=#D0F5CF>")
            print("<td>{0}</td>".format(each[0]))
            print("<td>{0}</td>".format(each[3]))
            print("<td>{0}</td>".format(each[1]))
      
             
            print("<td>{0}</td>".format(each[2]))
            print("<td>{0}</td>".format(each[4]))
            print("""<td><input type="checkbox" name="checkbox">T1</input>
                         <input type="checkbox" name="checkbox">T2</input>
                         <input type="checkbox" name="checkbox">T3</input>""")
            print("</td>")       
            print("")
            print("</tr>")
            if color is 1:
                  color = 0
            else:
                  color = 1

      print("</table>")
      print("""<input type="submit" name="mysubmitbutton" ID="floatingbutton" value="Click Me" />""")
      print("</form>")
      """"<script type="text/javascript"> 
                  ""<!--/* 
                        Float Submit Button To Right Edge Of Window
                        Version 1.0
                        April 11, 2010
      
                        Will Bontrager
                        http://www.willmaster.com/
                        Copyright 2010 Bontrager Connection, LLC
      
                        Generated with customizations on April 24, 2015 at
                        http://www.willmaster.com/library/manage-forms/floating-submit-button.php
      
                        Bontrager Connection, LLC grants you 
                        a royalty free license to use or modify 
                        this software provided this notice appears 
                        on all copies. This software is provided 
                        "AS IS," without a warranty of any kind.
                  */
      
                  //*****************************//
      
                  /** Five places to customize **/
      
                  // Place 1:
                  // The id value of the button.
      
                  var ButtonId = "floatingbutton";
      
      
                  // Place 2:
                  // The width of the button.
      
                  var ButtonWidth = 200;
      
      
                  // Place 3:
                  // Left/Right location of button (specify "left" or "right").
      
                  var ButtonLocation = "right";
      
      
                  // Place 4:
                  // How much space (in pixels) between button and window left/right edge.
      
                  var SpaceBetweenButtonAndEdge = 100;
      
      
                  // Place 5:
                  // How much space (in pixels) between button and window top edge.
      
                  var SpaceBetweenButtonAndTop = 200;
      
      
                  /** No other customization required. **/
      
                  //************************************//
      
                  TotalWidth = parseInt(ButtonWidth) + parseInt(SpaceBetweenButtonAndEdge);
                  ButtonLocation = ButtonLocation.toLowerCase();
                  ButtonLocation = ButtonLocation.substr(0,1);
                  var ButtonOnLeftEdge = (ButtonLocation=='l') ? true : false;
      
                  function AddButtonPlacementEvents(f)
                  {
                        var cache = window.onload;
                        if(typeof window.onload != 'function') { window.onload = f; }
                        else { window.onload = function() { if(cache) { cache(); } f(); }; }
                        cache = window.onresize;
                        if(typeof window.onresize != 'function') { window.onresize = f; }
                        else { window.onresize = function() { if(cache) { cache(); } f(); }; }
                  }
      
                  function WindowHasScrollbar() {
                  var ht = 0;
                  if(document.all) {
                        if(document.documentElement) { ht = document.documentElement.clientHeight; }
                        else { ht = document.body.clientHeight; }
                  } 
                  else { ht = window.innerHeight; }
                  if (document.body.offsetHeight > ht) { return true; }
                  else { return false; }
                  }
      
                  function GlueButton(ledge) {
                  var did = document.getElementById(ButtonId);
                  did.style.top = SpaceBetweenButtonAndTop + "px";
                  did.style.width = ButtonWidth + "px";
                  did.style.left = ledge + "px";
                  did.style.display = "block";
                  did.style.zIndex = "9999";
                  did.style.position = "fixed";
                  }
      
                  function PlaceTheButton() {
                  if(ButtonOnLeftEdge) {
                        GlueButton(SpaceBetweenButtonAndEdge);
                        return;
                        }
                  if(document.documentElement && document.documentElement.clientWidth) { GlueButton(document.documentElement.clientWidth-TotalWidth); }
                  else {
                        if(navigator.userAgent.indexOf('MSIE') > 0) { GlueButton(document.body.clientWidth-TotalWidth+19); }
                        else {
                              var scroll = WindowHasScrollbar() ? 0 : 15;
                              if(typeof window.innerWidth == 'number') { GlueButton(window.innerWidth-TotalWidth-15+scroll); }
                              else { GlueButton(document.body.clientWidth-TotalWidth+15); }
                        }
                  }
                  }
      
                  AddButtonPlacementEvents(PlaceTheButton);
                  //--></script>"""              
     
#main program
if __name__== "__main__":
      try:
            htmlTop()
            db,cursor=connectDB()
            activities=selectactivities(db,cursor)
            cursor.close()
            activityorderform(activities)
            db,cursor=connectDB()
            number_of_rows=numberofrecords(db,cursor)
            print(number_of_rows, "number of rows")
            #cursor.close()
            print("qsjdflskj")
            htmlTail()

      except:
            cgi.print_exception()

Open in new window

jameskaneAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Robert SchuttSoftware EngineerCommented:
The javascript is not being printed out as part of your output. Apart from that the load/resize code seems to contain a flaw but that probably doesn't concern you as you don't have prior functions assigned to them.

However, looking at the generated code you don't need javascript for this, it can be done by adding these lines to your header, for example just before the </head> tag on line 12:
                  <style type="text/css">
                      #floatingbutton {
                          top: 200px;
                          width: 200px;
                          right: 100px;
                          display: block;
                          z-index: 9999;
                          position: fixed;
                      }
                  </style>

Open in new window


EDIT: BTW, in numberofrecords you probably want to SELECT COUNT(*), also maybe this function is not necessary at all, couldn't you use len(activities)? (untested as I didn't use a database connection to test)
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jameskaneAuthor Commented:
Thanks very much - all that works !

Have now used the much more comprehensible  len(activities)

def numberofrecords(db,cursor):
      sql = ("select * from activities")        
      cursor.execute(sql)
      number_of_rows=len(activities)
      return number_of_rows

A lot more readable !!

james
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.