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.
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.
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.
Here’s the entire contact.php page, which has the alertMessage function included.
<?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 />
Coral Springs Orchid Society<br />
P.O. Box 770065<br />
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&s508=1&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.
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
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?
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?
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.