...

View Full Version : External js file



Darkranger85
03-17-2012, 05:17 PM
Hey all,

I'm fairly new to JavaScript. I learned PHP and now I'm creating a user registration and login system for an application I'm making and I decided I wanted to give JS a try.

I'm trying to make a form validation function that will be called when I press the submit button on the form but I want to use an external js file to store all my custom functions.

I have the OnClick event in the button with the call to my function inside of that. But where and how on the page to I reference my external file so that the button can call the function?

Thanks guys! :)

devnull69
03-17-2012, 07:43 PM
External files can usually only be referred from HTML using a <script> tag and not from inside Javascript.


<script type="text/javascript" src="path/to/myscript.js"></script>


Nevertheless it is some kind of workaround to inject a <script> tag into the DOM which will simulate some kind of include command in Javascript.


function include(jspath, where) {
if(!where) where='head';
var newScript = document.createElement('script');
newScript.type = "text/javascript";
newScript.src = jspath;
document.getElementsByTagName(where)[0].appendChild(newScript);
}

include('myscript.js');

Philip M
03-17-2012, 08:19 PM
What is the point? Simply load your external .js file, and call the functions contained in it onsubmit in the usual way.

Darkranger85
03-17-2012, 09:37 PM
What is the point? Simply load your external .js file, and call the functions contained in it onsubmit in the usual way.

Please define "the usual way."

I have tried script tags with src properties in the head and body of the page as well as trying them inside the onclick event itself.

I'm very new to JS so I don't know the "usual" anything lol.

Philip M
03-17-2012, 09:52 PM
Please define "the usual way."

I have tried script tags with src properties in the head and body of the page as well as trying them inside the onclick event itself.

I'm very new to JS so I don't know the "usual" anything lol.

Just load your .js file by placing in the <head> section

<script type="text/javascript" src="path/to/myscript.js"></script>

Your script (which must not contain any HTML tags) will contain one or more functions. Assuming that one of your functions is named validate(), call (invoke, execute) it with

<form id = "myform" action = "" onsubmit = "return validate()">

The validate() script ought to return true (OK) or false (error). If the returned value is true, then the form will submit. If the returned value is false, form submission is aborted.

felgall
03-17-2012, 09:54 PM
The first thing to do is to actually learn JavaScript. It is as complex a language as PHP and significantly different in lots of ways so it shouldn't take quite as long to learn since you already know some programming principles and there is some overlap in how they work.

Once you know JavaScript properly the only thing you need to add to a web page to add JavaScript to the page is a script tag just before the </body> tag. Such things as putting event handlers into the HTML itself makes the script harder to maintain, increases the chances of clashes between scripts and is completely unnecessary unless you need to cater for Netscape 4 and earlier browsers that only understood a far more primitive version of JavaScript.

There are a couple of minor situations where the script tag needs to go in the head of the page but 99.999% of the time the page will load faster and the script will run sooner with the tag attached last.

See the JavaScript link in my sig for hundreds of actual examples of working JavaScript that show how to write JavaScript properly for modern browsers. All but a couple of the most recently added features shown there will even work in IE5.

Darkranger85
03-17-2012, 11:30 PM
Just load your .js file by placing in the <head> section

<script type="text/javascript" src="path/to/myscript.js"></script>

Your script (which must not contain any HTML tags) will contain one or more functions. Assuming that one of your functions is named validate(), call (invoke, execute) it with

<form id = "myform" action = "" onsubmit = "return validate()">

The validate() script ought to return true (OK) or false (error). If the returned value is true, then the form will submit. If the returned value is false, form submission is aborted.

I already tried this way and it wouldn't run for me. I'm sure I'm missing something but I can't figure out what. I'll post my code when I get home from work.

And thank you guys for your replies. :-)

Darkranger85
03-25-2012, 03:33 AM
I apologize for taking so long to get back to this, had a lot of stuff going on. But here is my code as it stands now and I does not work for me.



<html>
<head>
<link href='styles.css' rel='stylesheet' type='text/css' media='screen' />
<title>Test Site </title>

</head>
<body>
<script type="text/javascript" src="C:\wamp\www\testsite\scripts.js"></script>
<form action='' method='' name="register">

<div class='box1'>
<div class='margin'>
<div align='center';>Registration Information<hr /></div>

<input type='text' name='username' maxlength='30' />: Username<br /><br />

<input type='password' name='password' maxlength='30' />: Password<br />
<input type='password' name='password2' maxlength='30' />: Confirm<br /><br />

<input type='text' name='email' maxlength='50' />: Email<br />
<input type='text' name='email2' maxlength='50' />: Confirm<br /><br />

<div align='center'><input type='submit' value='Register' name="submit" onClick="RegValidate()" /></div>
</div>
</div>
</form>

<form action='login.php' method='POST' name="login">
<div class='box2'>
<div class='margin'>
<div align='center'>Login<hr /></div>

<input type='username' name='user' maxlength='30' />: Username<br />
<input type='password' name='pass' maxlength='30' />: Password<br />
<a href='forgotpass.php'>Trouble logging in?</a><br /><br />
<div align='center'><input type='submit' value='Login' /></div>
</div>
</div>
</form>
</body>
</html>

Philip M
03-25-2012, 12:23 PM
You do not post any Javascript except <script type="text/javascript" src="C:\wamp\www\testsite\scripts.js"></script>. We are not clairvoyant. How do you expect anyone to test the script for you?

Darkranger85
03-25-2012, 02:33 PM
Sorry, I figured that my error was somewhere in that page considering my function worked properly when I had the functions in the head tag but stopped working when I put them in the external file, so I figured I was simply referencing the file incorrectly.

here is the javascript from the external file. I know that the validation function is far from complete, I was just trying to get it working so that I can call it from the other page before moving on lol.



function empty(obj) {
if (typeof obj == 'undefined' || obj === null || obj === '') return true;
if (typeof obj == 'number' && isNaN(obj)) return true;
if (obj instanceof Date && isNaN(Number(obj))) return true;
return false;
}


function RegValidate(){
var error = new Array();
//Setup error array and validation variables//
var _user = document.forms['register'].username.value;
var _pass = document.forms['register'].password.value;
var _pass2 = document.forms['register'].password2.value;
var _email = document.forms['register'].email.value;
var _email2 = document.forms['register'].email2.value;

if(empty(_user)){
error[0] = 'Username field is required.';
alert('Username required.');
}
if(empty(_pass)){
error[1] = 'Password field is required.';
}
if(empty(_pass2)){
error[2] = 'Password confirmation is required.';
}
if(_pass.length < 8){

}
if(empty(_email)){
error[3] = 'Email field is required.';
}
if(empty(_email2)){
error[4] = 'Email confirmation required.';
}
//Check to see if Passwords and emails match//
if(_pass != _pass2){
error[5] = 'Passwords dont match.';
}
if(_email != _email2){
error[6] = 'Emails dont match.';
}
}

Philip M
03-25-2012, 03:27 PM
Sorry, I figured that my error was somewhere in that page considering my function worked properly when I had the functions in the head tag but stopped working when I put them in the external file, so I figured I was simply referencing the file incorrectly.



If it works when it was in the <head> tag but not as an external file then the only possibility is that "C:\wamp\www\testsite\scripts.js"> is not a valid directory. Why not place it in the same directory as the HTML file?

Darkranger85
03-25-2012, 04:07 PM
It is in the same directory, but I thought that I had to write out it's entire path because thats how I've always seen the examples written.

Philip M
03-25-2012, 04:56 PM
No. Just <script type="text/javascript" src = "scripts.js"></script>

C:\ refers to your local drive. That is no use when you upload the HTML to the server.

Darkranger85
03-25-2012, 06:35 PM
Alright, I tried that and I made a simple function that does nothing but post an alert box saying it works and put that in the external file.

When I try to call it using the button absolutely nothing happens. No errors, no alert box, nothing lol.

Philip M
03-25-2012, 10:23 PM
Alright, I tried that and I made a simple function that does nothing but post an alert box saying it works and put that in the external file.

When I try to call it using the button absolutely nothing happens. No errors, no alert box, nothing lol.

Well, there is something badly wrong. What it is I have no idea. I suppose that Javascript is enabled in your browser? Of course, if a script contains syntax errors it will not do anything.


<script type = "text/javascript">
function showAlert() {
alert (Hello World"); // syntax error
}
</script>

Darkranger85
03-26-2012, 02:54 AM
Yes, javascript is on.

I made a new function to test and see if I had the external file referenced correct, just a simple alert box set to go when the button was pressed, and it worked.

So, I figured there had to be a syntax error in my function somewhere so I started commenting things and putting the alert box in different places to track it down and I just couldn't get it to work. So then I figured "what the heck" its wasnt that long of a function why not just start from scratch and try it nice and slow.

So I make a new function and test it with an alert and it works fine. I then create an array and test the function again. . . It doesn't work. Then I delete the array so I'm left with nothing but the original alert box and it still doesn't work. . . .

I just don't understand. It's like its consciously messing with my mind lol.

Philip M
03-26-2012, 08:16 AM
This is getting a bit tedious. I am not clairvoyant and cannot detect your errors unless you show the code with the array which you say does not work.

Darkranger85
03-26-2012, 05:55 PM
Again I apologize, I honestly don't mean to be a pain in the *** and I know I can be. I'm sorry.



<body>
<form action='' method='' name="register">

<div class='box1'>
<div class='margin'>
<div align='center';>Registration Information<hr /></div>

<input type='text' name='username' maxlength='30' />: Username<br /><br />

<input type='password' name='password' maxlength='30' />: Password<br />
<input type='password' name='password2' maxlength='30' />: Confirm<br /><br />

<input type='text' name='email' maxlength='50' />: Email<br />
<input type='text' name='email2' maxlength='50' />: Confirm<br /><br />

<div align='center'><input type='submit' value='Register' name="submit" onclick="Validate()" /></div>
</div>
</div>
</form>
<script src="php.js"></script>


And the function I made:



function Validate(){
alert('hi');
}

Darkranger85
03-26-2012, 06:32 PM
I'm sorry, I again and again apologize for being me lol.

I was able to track down the problem. There was a rogue "}" in my external file that was way down and I didn't see it. It was messing with all my code.

Philip M
03-26-2012, 06:41 PM
The fault, dear Brutus, lies not in the stars ...... :rolleyes:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum