SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Aug 2013
    Location
    Coral Springs, FL
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript function limit

    Is there a limit to the number of javascript functions which can be included in a javascript source file, e.g.
    <script type="text/javascript" src = "myscript.js"></script>

    In the myscript.js file, I have multiple functions. The second one is called alertMessage() simply outputs a message and then returns a false:

    function alertMessage() {
    alert("made it here");
    return false; }

    The first javascript function in the js file is executed when every page is loaded, and works correctly.

    The alertMessage function is called by an onsubmit attribute in a form:
    <form id="myForm" name="myForm" method="post" action="confirm.php" onsubmit="return alertMessage()">

    When the alertMessage function is in the js file and the submit button is hit, nothing happens. When it is included in the page's xhtml (surrounded by script tags), it executes when the submit button in the form is hit.

    What is causing this? The code is on-line if needed.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Is there a limit to the number of javascript functions which can be included in a javascript source file, e.g.
    <script type="text/javascript" src = "myscript.js"></script>
    No, there is not limit as fas as the JavaScript code is concerned however the more files you load the more headers that get executed within a clients browsers, best practice says to keep to around only 2-3 files per page load if you can but sometimes this may not be possible.


    The alertMessage function is called by an onsubmit attribute in a form:
    <form id="myForm" name="myForm" method="post" action="confirm.php" onsubmit="return alertMessage()">

    When the alertMessage function is in the js file and the submit button is hit, nothing happens. When it is included in the page's xhtml (surrounded by script tags), it executes when the submit button in the form is hit.
    Could you please post more of your code as its hard to gauge the issue without been able to see your entire page structure.

  3. #3
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    When the submit button of your form is clicked, it triggers the onSubmit attribute in the form tag. When the returned value of the onSubmit is false, the form does not get submitted. When the returned value of onSubmit is true, then the form gets submitted.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  4. #4
    SitePoint Member
    Join Date
    Aug 2013
    Location
    Coral Springs, FL
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the entire contact.php page, which has the alertMessage function included.

    Code PHP:
    <?php error_reporting(E_ALL); ?>
    <?php include("includes/xml_instr.inc"); ?>
    <?php include("includes/doc_type.inc"); ?>
    <?php $filename="contact.php"; ?>
     
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    <head>
       <title>Coral Springs Orchid Society - Contact Us</title>
       <meta name="description" content="Coral Springs Orchid Society - Contact Us" />
     
       <?php include("includes/meta.inc"); ?>
     
       <link rel="stylesheet" href="csorchids.css" type="text/css" /> 
       <script type="text/javascript" src="myscript.js"></script>
     
       <script  type="text/javascript">
          function alertMessage() {
             alert("made it here");
             return false; }
       </script>
     
    </head>
     
    <body>
     
       <div>
          <a id="top"></a>
       </div>
     
       <div class="banner2">
          <img class="banner2_cell1" src="images/title.jpg" width="160" height="100" 
              alt="" title="" />
          <div class="banner2_cell2">
             <br />Contact Us
          </div>
       </div>
     
       <div class="center">
          <?php include("includes/nav.inc"); ?>
       </div>
     
       <?php include("includes/sidebar.inc"); ?>
     
       <div class="content">
          <p>Thank you for visiting our site. Please fill in this form
             so we can answer your questions and/or see your comments. If you'd
             like a response, enter your name and email address. </p> 
     
          <div id="contact_form">
             <form id="myForm" name="myForm" method="post" action="confirm.php" onsubmit="return alertMessage()">
                <div>
                   <br />
                   <fieldset>
                      <legend>Personal Data (optional)</legend>
                         <br />
                         <label>Name:
                            <input type="text" name="name" id="name" size="30" />
                         </label>
                         <br /><br />
                         <label>Email:
                            <input type="text" name="email" id="email" size="30" />
                         </label>
                         <br /><br />
                   </fieldset>
                   <br />
     
                   <fieldset>
                      <legend>Comments</legend>
                         <br />
                         Please give us your questions or comments: <br /><br />
                         <label>
                            <textarea name="comments" id="comments" cols="50" rows="4"></textarea>
                         </label>
                         <br /><br />
                   </fieldset> 
                   <br /> 
                   <fieldset>        
                      <input type="submit" value="Submit" />
                      <input type="reset" value="Reset" />
                   </fieldset>
                   <input type="hidden" name="to" value="nodropshots@gmail.com" />
                   <input type="hidden" name="from" value="coralspringsorchids.org/contact.php" />
                   <input type="hidden" name="subject" value="Coral Springs Orchid Society Form Submittal" />
                </div>
             </form>
     
          </div>
     
          <br/>
          <p>You can also reach us by regular mail at: <br /><br />
             &nbsp; &nbsp; Coral Springs Orchid Society<br />
             &nbsp; &nbsp; P.O. Box 770065<br />
             &nbsp; &nbsp; Coral Springs, FL 33077 </p>
     
       </div>
     
       <div class="reset"></div>
     
       <div class="center">
          <br /><br />
          <a class="nav" href="#top">Return to Top</a>
       </div>
     
       <?php include("includes/footer.inc.php"); ?>
     
       <?php include("includes/w3c.inc"); ?>
     
       <div>
          <br /><br />
          <a href="http://www.section508.info/check_this.cfm?URLtest=http://http://coralspringsorchids.org/contact.php&amp;s508=1&amp;CheckURL=0">
             <img title="Section 508 tested" alt="Website accessibility rating Section 508 approved by section508.info"
                src="images/section508-tested.gif" style="float:right" /> </a>
       </div>
     
    </body>
     
    </html>

    Here's the myscript.js file, which also has the alertMessage function. When the alertMessage function is taken out of the contact.php page, it does not execute. Note that in myscript.js, there are preliminary versions of the validateForm function, one of which is commented out. I could never get validateForm to execute with the onsubmit attribute, so I added alertMessage as a test.

    Code JavaScript:
    function showLastModified()
     
    {
       var out = document.getElementById('lastModified');
       var d = new Date();
     
       if (d.toLocaleDateString)
       {
          out.innerHTML = d.toLocaleDateString(document.lastModified);
       }
       else
       {
          out.innerHTML = document.lastModified;
       }
     
       window.onload = showLastModified; 
     
    } // end function showLastModified
     
    function alertMessage()
     
    {
       alert("made it here");
       return false;
    }
     
     
    //function validateForm(obj)
     
    //   This function checks the form fields to ensure that a Comment
    //   has been entered. Name and Email are optional and are not 
    //   checked.
     
    //{
    //   if ((obj.comments.value) != ""))
    //   {
    //      return true;
    //   }
    //   else
    //   {
    //      alert ("Comment must be entered.");
    //      return false;
    //   }
     
    function validateForm()
     
    {
    //var x=document.forms["myForm"]["comments"].value;
     
    alert("Got Here.");
    return false;
     
    if (x==null || x=="")
      {
         alert("Comment must be entered.");
         return false;
      }
      else
       {
          return true;
       }
    }
     
     
     
    } // end function validateForm
    Last edited by Mittineague; Aug 18, 2013 at 10:17. Reason: reformatting bbcode tags

  5. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,813
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by nodropshots View Post
    Code PHP:
          function alertMessage() {
             alert("made it here");
             return false; }
       </script>
    1. Why don't you have all the scripts attached just before the </body> tag which has been the best place to attach JavaScript since Netscape 4 died?
    2. Presumably you intend to get rid of the debugging alert call before the page goes live. The alert() call displays a checkbox in most browsers offering the opportunity to either turn off all further alert, confirm and prompt output or to turn off JavaScript completely for the page - so as to make debugging easier. These calls are no longer intended to be used for anything else as it is now trivially easy to update the page content itself to display any messages.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,402
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by felgall View Post
    2. Presumably you intend to get rid of the debugging alert call before the page goes live. The alert() call displays a checkbox in most browsers offering the opportunity to either turn off all further alert, confirm and prompt output or to turn off JavaScript completely for the page - so as to make debugging easier. These calls are no longer intended to be used for anything else as it is now trivially easy to update the page content itself to display any messages.
    Hey felgall, I've seen you mention before that you believe the JS built-in functions such as alert and prompt are only for debugging use only, and I'm curious to know why you think that is the case? As far as I know, out of the major browsers, only Opera gives you a checkbox right off the bat to disable JavaScript for the page (Chrome will allow you to prevent further alerts after the first one). The MDN documentation doesn't make any mention of these functions being for debugging only, do you have some other reference you could link to?

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,813
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by fretburner View Post
    As far as I know, out of the major browsers, only Opera gives you a checkbox right off the bat to disable JavaScript for the page (Chrome will allow you to prevent further alerts after the first one).?
    Apart from Opera and Internet Explorer, all of the major browsers ask if you want to disable all dialogs when the second one displays, not just Chrome.

    Just the fact that Opera presents that checkbox is sufficient to make them useless for any purpose other than debugging. Apart from that they became completely unnecessary when Netscape 4 died out as that waqs the last browser that didn't allow you to get rid of the ugly built in dialogs and simply display the message nicely within the page itself.

    For that matter the death of IE7 made their use unnecessary even for debugging since all browsers except Firefox now have a proper debugger built in and there are several available as plugins for Firefox.

    Basically if you use alert() to display messages you are asking at least some visitors if they want to disable JavaScript. If instead you use innerHTML or one of the many in page dialog boxes that can be generated from JavaScript then you have full control of how the message appears and are not asking if people want to disable javaScript.

    That one browser asks if you want to disable JavaScript and the others (except IE) assume that you may want to turn dialogs off if a second one is displayed is evidence that the browser authors see them as a debugging tool as those additions would not make sense if they were still intended to be used for the purpose they had with Netscape 4 and earlier.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    It's most likely a path issue, the myscript.js file is not where you say it is.

    Here's a proof of concept.

    HTML Code:
    <!doctype html>
    <html>
    <head>
       <title>Coral Springs Orchid Society - Contact Us</title>
       <meta name="description" content="Coral Springs Orchid Society - Contact Us" />
       <script type="text/javascript" src="myscript.js"></script>
       <script  type="text/javascript">
    	function alertMessageInside() {
    		alert("made it here: from inside");
    		return false; 
    	};
       </script>
    </head>
    <body>
    	<form id="myForm" name="myForm" method="post" action="confirm.php" onsubmit="return alertMessageInside()">
    		<input type="submit" value="Submit: from inside">
    	</form>
    	<form id="myForm" name="myForm" method="post" action="confirm.php" onsubmit="return alertMessageOutside()">
    		<input type="submit" value="Submit: from outside">
    	</form>
    </body>
    </html>
    and myscript.js

    Code:
    function alertMessageOutside() {
       alert("made it here: from outside");
       return false;
    };

  9. #9
    Non-Member
    Join Date
    Feb 2012
    Posts
    892
    Mentioned
    10 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by nodropshots View Post
    Here's the myscript.js file, which also has the alertMessage function.

    Code JavaScript:
    function showLastModified()
    ...
    [COLOR="#FF0000"]} // end function validateForm[/COLOR]
    The last line is orphaned. Remove it and it will work.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •