Link to home
Create AccountLog in
Avatar of jameskane
jameskane

asked on

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.

User generated image
#!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

ASKER CERTIFIED SOLUTION
Avatar of Robert Schutt
Robert Schutt
Flag of Netherlands image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of jameskane
jameskane

ASKER

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