Executing javascript.

Discussion in 'Web Design and Development' started by Cabbit, Nov 22, 2009.

  1. Cabbit macrumors 68020

    Cabbit

    Joined:
    Jan 30, 2006
    Location:
    Scotland
    #1
    I am trying to have the below javascript popup a message box automatically once all the fields return valid. The aim is that i will change this to a image swap in the future. (i have a button with a x in it i want it to change to a √ once the form passes basic validation).
    Is this possible with javascript? I am very new to meddling with javascript.


    login.tpl.htm
    HTML:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Nanashi - Software Engineering</title>
    <link rel="stylesheet" type="text/css" href="/style/css/base.css" media="screen" />
    <link rel="stylesheet" type="text/css" href="/style/css/login.css" media="screen" />
    <script src="../javascript/login/login.js" type="text/javascript"> </script>
    </head>
    <body onLoad="submitButton(this)">
    <div class="wrapper">
    	<div id="header">
    	<h1>Group 10 Project Intranet</h1>
    	 	<div id="menu">
    	  		<ul id="nav">
    	   			<li class="activelink"><a href="/">Login</a></li>
    	  		</ul>
    	 	</div>
    	</div>
    	<div id="content">
    		<div id="full">
    			
    			<div id="wrapper">
    			<form name="form" id="form" class="form" action="/login" onsubmit="return validate(this)" method="post">
    				<p>
    					<h2>Login</h2>
    					<p>
    						<label for="name">Username</label><br />
    						<input class="title" id="name" name="user" size="30" type="text" />
    					</p>
    					<p>
    						<label for="password">Password</label><br />
    						<input type="password" class="title" id="password" name="password" size="30" />
    					</p>
    					<p>
    	   		 			<input type="submit" value="Submit" class="submit" />
    	   		 		</p>
       		 		</p>
    			</form>
    			</div>
    		</div>
    	</div>
      	<div class="push">
      		
      	</div>
    </div>
    <div id="footer">
        <p>© Copyright 2009 Nanashi. All rights reserved.<br /><a href="http://nanashi.co.uk">Nanashi Web Development</a></p>
    </div>
    </body>
    </html>
    
    login.js
    Code:
    function submitButton(form)
    {
    	var name = form.name.value;
      var password = form.password.value;
      var valPassLength = password.length;
      var valUserLength = name.length;
      var nameRegex = /^[a-zA-Z0-9]+(([\'\,\.\- ][a-zA-Z0-9 ])?[a-zA-Z0-9]*)*$/;
      var passwordRegex = /^[a-zA-Z0-9]+(([\'\,\.\- ][a-zA-Z0-9 ])?[a-zA-Z0-9]*)*$/;
      if(name == "") {
        inlineMsg('name','You must enter your username.',2);
        return false;
      }
      if(!name.match(nameRegex)) {
        return false;
      }
      if (valUserLength < 7)
      {
        return false;
      }
      if(password == "") {
        return false;
      }
      if(!password.match(passwordRegex)) {
        return false;
      }
      if (valPassLength < 10)
      {
        return false;
      }
      return true;
      alert("true");
    }
    
     
  2. colocolo macrumors 6502

    Joined:
    Jan 17, 2002
    Location:
    Santiago, Chile
    #2
    I will try to answer what I think you were actually asking :)

    1. In order to call a function everytime you change the value of an input field, put the onchange propoerty inside the input. as in <input type=text onchange="function(this.form)">
    2. You can change the value dynamically of any object in javascript. So, if the submit button has value x, you can put in your validation function submitButton.value="√". You can basically access most properties of a javascript object in this way. Of course, take it with a grain of salt, and test it 100 times in Explorer that has it own ways of working. But for this simple submit button value, it wil work like a charm.
    3. As a side note, the program will probably not work if the onsubmit property of the form calls the validate function, but the function in login.js is called differently :)

    Does this answer your questions, or did I just ramble around the issue without getting to the point?

    EDIT: I just noticed the onload call in the body tag. It accomplishes nothing, as the user will have done nothing on the page yet. It will call the function only when the page finishes loading, and then never again. That is the function you are looking to use in the form tag, and delete it from the body.
     

Share This Page