Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 20
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    External js file

    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!

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    External files can usually only be referred from HTML using a <script> tag and not from inside Javascript.
    Code:
    <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.
    Code:
    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');

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    What is the point? Simply load your external .js file, and call the functions contained in it onsubmit in the usual way.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #4
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    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.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by Darkranger85 View Post
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,458
    Thanks
    0
    Thanked 632 Times in 622 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    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. :-)

  • #8
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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>

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    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?
    Last edited by Philip M; 03-25-2012 at 12:26 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

    Code:
    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.';	                
    	}
    }

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by Darkranger85 View Post
    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?

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #12
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    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.
    Last edited by Philip M; 03-25-2012 at 04:59 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #14
    New Coder
    Join Date
    Mar 2012
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #15
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by Darkranger85 View Post
    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.

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

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    Darkranger85 (03-26-2012)


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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