Web Analytics Made Easy -
StatCounter onSubmit question - CodingForum

Announcement

Collapse
No announcement yet.

onSubmit question

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • onSubmit question

    Can the onSubmit alert be programmed to display for a specific amount of time and not require the user to click "OK"?

    <form method="post" name="LogInForm" onSubmit='alert("Processing")'>

    Thanks, Ray
    Last edited by roadrunnerray; Aug 1, 2005, 01:59 PM.

  • #2
    An alert message cannot be programmatically closed. It requires user intervention. What you can do is have a hidden div shown onsubmit.

    Code:
    function showStatus(){
      document.getElementById("status").style.visibility="visible";
    }
    ...
    <form onsubmit="showStatus()">
    <div id="status" style="visibility: hidden;">Processing...</div>
    Glenn
    vBulletin Mods That Rock!

    Comment


    • #3
      Hi Glenn, many thanks for your thoughts, I checked the thread with my PC prior to leaving the house this am and the coding displayed fine. I use an Apple at work and the coding box is blank. I checked the FAQ and reviewed my personal settings but could not find out how to display this code.

      Any suggestions will be appreciated........ Ray

      Comment


      • #4
        You could do this...

        Hi,

        You could design a thumbnail, or animation and use the following script to open an atributeless window using the DOM with the image in for a specific length of time, then the systems wil close it.

        function will look like this.

        function processingImage () {

        imageposition = 0

        if (screen) {
        imageposition = screen.height-1000
        }

        imagewindow = window.open ("filepath.htm", "height=100,width=100, "+imageposition+",top=135");
        setTimeout("imagewindow.close()",2000) // closed the window after 2 secs
        return true;
        }

        // this function opens and positons the window (change values to reposition)
        on the screen, opens a child window with no attributes, then closes it after 3 seconds.

        TIP.. If you define your object such as your image in a html document with no <head><body><meta> tags, just a title tag, you are able to not only just use images, but web graphics, flash/fireworks animation, MPEG files, etc.
        This will also work with multiple browsers, although will positon differntly depending on resolution.

        If you want absolute centre you'll ahve to write the page to detect what res they are using, but for 2 secondds, dont this that this will mater much.

        Bye for now.

        Kai

        Comment


        • #5
          Hi Kai, many thanks, will give this a whirl and let you know how it works.

          I have just converted my Filemaker 6.0 database to 7.0. I used Filemakers CDML (Claris Dynamic Markup Language) to integrate the dynamic web pages. Filemaker has discontinued support for CDML and recommended using XSLT for their version 7.0 database. I have completed the database conversion and am now finding that pages taking 1-second to turn under the old CDML are now taking up to 10-seconds to turn. I want to implemant the new system now and work on improving the turn times after the fact.

          As an interim I need to present the user with this processing page while the database does its work. Thanks again, Ray

          Comment


          • #6
            Problem with syntax??

            Glenn, when I enter the data to search the database two things happen:

            1). The "Processing..." appears on the current page
            2). I do not get a match (which was working prior to introducing the new code)

            I would like to get a blank page with "Processing..." displayed if possible.

            Here is the link to my test page:

            http://128.123.83.183/fmi/xsl/Regist...SLT/log_on.xsl

            You can enter "testcase40" which previously received a match.

            Here is the applicable XSLT stylesheet code:

            <html>
            <head>
            <title>Log-In</title>
            <script language="JavaScript" type="text/javascript">
            function showStatus() {document.getElementById("status").style.visibility="visible"; }
            </script>
            </head>


            <form method="post" name="LogInForm" onSubmit="showStatus()">

            <div id="status" style="visibility: hidden;">Processing...</div>

            <xsl:attribute name="action">verify_data.xsl</xsl:attribute>
            <input type="hidden" name="-db" value="Web_TA_Participant_DB"/>
            <input type="hidden" name="-lay" value="Participant Form Part-2"/>
            <input type="hidden" name="-token.error" value="log_on_error.xsl"/>
            <input type="hidden" name="UserID" value="="/>

            <div align="left">
            <p>
            <font size="-1">User Name</font>
            <br/>
            <font size="+2">
            <input type="text" name="UserID" value="Enter User Name Here" size="30"/>
            </font>
            </p>
            <p>
            <font size="-2"
            face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">
            <u>Mac Users</u>
            please note: you must mouse click the Log-In button or tab into it after<br/>
            <xsl:text disable-output-escaping="yes">entering your User Name. Pressing &amp;quot;Enter/Return&amp;quot; while in the text box will not work!</xsl:text>
            </font>
            <br/>
            </p>
            <input type="submit" name="-find" value="Log-In"/>
            </div>

            </form>

            Many thanks, Ray
            Last edited by roadrunnerray; Aug 2, 2005, 01:33 PM.

            Comment


            • #7
              Hi Kai, being a neophite with regard to javascript I have 2 question regarding your suggestion.

              1). After the user clicks on the "submit form" button will this page appear while the request is being processed for the number of seconds specified?

              2). What activates the function after the "submit form" button is clicked?

              Many Thanks, Ray

              Comment


              • #8
                Solved one problem!

                I moved the <div> line to just above the:

                <input type="submit" name="-find" value="Log-In"/>

                and resolved the "find" problem.

                If someone could tell me how I can get the:

                <div id="status" style="visibility: hidden;"><font size="+2" color="#990033">*** Searching....For Your User Name ***</font></div>

                to display on a blank page it would be great.....Thanks, Ray

                Comment


                • #9
                  Isn't it user-friendlier to just use a div rather than a popup window? And you can make the div look like a window.
                  Code:
                  <head>
                  <style type="text/css">
                  #status {
                    visibility: hidden;
                  }
                  #statusTitle {
                    border:1px solid silver;
                    border-bottom:0px;
                    background-color:blue;
                    font-size:14pt;
                    color:white;
                    font-weight:bold;
                    padding-left:5px;
                    width:80%;
                  }
                  #statusMsg {
                    color:#990033; 
                    font-size:14pt; 
                    border:1px solid silver;
                    background-color:white;
                    text-align:center;
                    font-weight:bold;
                    width:80%;
                  }
                  </style>
                  </head>
                  <body>
                  <div id="status">
                    <div id="statusTitle">Please wait...</div>
                    <div id="statusMsg">*** Searching....For Your User Name ***</div>
                  </div>
                  </body>
                  Glenn
                  vBulletin Mods That Rock!

                  Comment


                  • #10
                    Hi Glenn, thanks again for your thoughtful assistance, yes, it would definitely be more user friendly to use the <div> feature. I have to become more knowledgeable in placing the <div> statement as I had problems yesterday when I placed it in the "Links" column on the left side of a page further into the web site.

                    The users have become accustomed to rapid web page turning over the last 2-years and I am afraid they will be clicking repeatedly if the page does not respond quickly. I will spend time today with both of your suggestions and let you know what I have been able to accomplish.

                    I am an *old* batch programmer (assembly, Cobol, Fortran etc.) from the early 1960's and am having a bit of a problem with combining HTML, XSLT and Javascript (along with the syntax) into a single page and coordinating it with my database. I understand the concepts but need practice.

                    Thanks again, Ray

                    Comment


                    • #11
                      You can absolutely position the div in any coordinates in the document.
                      The code below positions the div at the center of the window.
                      Code:
                      <html>
                      <head>
                      <style type="text/css">
                      #status {
                        display: none;
                        position:absolute;
                      }
                      #statusTitle {
                        border:1px solid silver;
                        border-bottom:0px;
                        background-color:blue;
                        font-size:14pt;
                        color:white;
                        font-weight:bold;
                        padding-left:5px;
                        width:80%;
                      }
                      #statusMsg {
                        color:#990033; 
                        font-size:14pt; 
                        border:1px solid silver;
                        background-color:white;
                        text-align:center;
                        font-weight:bold;
                        width:80%;
                      }
                      </style>
                      <script type="text/javascript">
                      function showStatus(){
                         var st =  document.getElementById("status");
                         var doc = document[getDoc()];
                         st.style.left = doc.scrollLeft + doc.clientWidth/2 - st.offsetWidth/2;
                         st.style.top = doc.scrollTop + doc.clientHeight/2 - st.offsetHeight/2;
                         st.display = "block";
                      }
                      
                      function getDoc(){
                      	return (document.compatMode && (document.compatMode == "CSS1Compat")) ? "documentElement" : "body";
                      }
                      </head>
                      <body>
                      <form onsubmit="showStatus()">
                      
                      ...content here...
                      
                      <div id="status">
                        <div id="statusTitle">Please wait...</div>
                        <div id="statusMsg">*** Searching....For Your User Name ***</div>
                      </div>
                      </body>
                      </html>
                      Glenn
                      vBulletin Mods That Rock!

                      Comment


                      • #12
                        Hi Glenn, thanks again for your assistance, I will try this positioning technique today........Ray

                        Comment


                        • #13
                          Having a problem with the syntax of this function:

                          function getDoc() {
                          return (document.compatMode && (document.compatMode == "CSS1Compat")) ? "documentElement" : "body";
                          }

                          The error returned is "The entity name must immediately follow the & in the entity reference.*(XML-0067)

                          Thanks, Ray

                          Comment


                          • #14
                            Glenn, I have a URL that I want to use to activate the function you gave me:

                            function showStatus() { document.getElementById("status").style.visibility="visible"; }

                            Can you tell me how to do this. Here is the URL:

                            <a>
                            <xsl:attribute name="href"
                            >event_added.xsl?-db=Web_TA_Pre_Reg_DB&amp;-lay=Registration Evaluation Form-2&amp;-token.participantid=<xsl:value-of
                            select="$request-query/fmq:query/fmqarameter[@name= '-token.participantid']"/>
                            &amp;-token.fullname=<xsl:value-of
                            select="$request-query/fmq:query/fmqarameter[@name= '-token.fullname']"/>
                            &amp;-token.status=<xsl:value-of
                            select="$request-query/fmq:query/fmqarameter[@name= '-token.status']"/>
                            &amp;-token.participantidq=<xsl:value-of
                            select="$request-query/fmq:query/fmqarameter[@name= '-token.participantidq']"/>
                            &amp;-token.eventid=<xsl:value-of
                            select="$record/fmrs:field[@name ='EventID']/fmrs:data[1]"/>
                            &amp;-recid=<xsl:value-of
                            select="$record/@record-id"/>
                            &amp;EventID=<xsl:value-ofselect="$record/fmrs:field[@name ='EventID']/fmrs:data[1]"/>&amp;ParticipantID=<xsl:value-of select="$request-query/fmq:query/fmqarameter[@name = '-token.participantid']"/>
                            &amp;Confirmed=N
                            &amp;-new</xsl:attribute>
                            <img src="/images/plusa.jpg" alt="Add" align="top"></img>
                            </a>

                            Many Thanks, Ray
                            Last edited by roadrunnerray; Aug 4, 2005, 06:10 PM.

                            Comment


                            • #15
                              Originally posted by roadrunnerray
                              Having a problem with the syntax of this function:

                              function getDoc() {
                              return (document.compatMode && (document.compatMode == "CSS1Compat")) ? "documentElement" : "body";
                              }

                              The error returned is "The entity name must immediately follow the & in the entity reference.*(XML-0067)

                              Thanks, Ray
                              You should enclose the script in CDATA section.
                              Code:
                              <script type="text/javascript"> 
                              // <![CDATA[ 
                              
                              ... script here
                              
                              // ]]> 
                              </script>

                              And for CSS:
                              Code:
                              <style type="text/css"> 
                              /* <![CDATA[ */ 
                              
                              ...CSS here
                              
                              /* ]]> */ 
                              </style>
                              More info about CDATA in script/CSS here.
                              Glenn
                              vBulletin Mods That Rock!

                              Comment

                              Working...
                              X