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.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help for passing values between HTML and .JS files

    I was given a task to create a form, which I have done

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Billing Form</title>
    <script type="text/javascript" src="jsAssignTwo.js">
    function formInfo()
    {
    }
    </script>
    <!--CSS for formatting the form-->
    <style type="text/css">
        .container {
            width: 200px;
            clear: both;
        }
        .container input {
            width: 100%;
            clear: both;
        }
    
        </style>
    </head>
      
    <!--div for formatting purpose-->  
    <div class="container">
    <body onLoad="setFocus()" bgcolor="grey">
    <form action="http://cswin2k5/echo/default.asp" method="post" name="billingForm">
    <h2 id = "welcome">Billing Information</h2>
    Title: </div>
    <input type="radio" name="Titles" id="titleOne" value="Title" /> Mr.
    <input type="radio" name="Titles" id="titleTwo" value="Title" /> Mrs.
    <input type="radio" name="Titles" id="titleThree" value="Title" /> Miss.
    <input type="radio" name="Titles" id="titleFour" value="Title" /> Ms.
    <div class="container">
    <p>First Name*:
    <input type="textbox" name="first" id="first" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
    <p>Last Name:
    <input type="textbox" name="last" id="last" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
    <p>Address:
    <input type="textbox" name="address" id="address" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
    <p>City*:
    <input type="textbox" name="city" id="city" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
    <p>Province:
    <input type="textbox" name="province" id="province" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
    <p>Postal Code*:
    <input type="textbox" name="postal" id="postal" onBlur="this.value=trim(this.value)" onChange="this.value=this.value.toUpperCase()"></p>
    <p>Country:
    <input type="textbox" name="country" id="country" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
    <p>Phone*:
    <input type="textbox" name="phone" id="phone" onBlur="this.value=trim(this.value)"></p>
    <p>Email*:
    <input type="textbox" name="email" id="email" onBlur="this.value=trim(this.value)" placeholder="useremail@domain.com"></p>
    <p>Credit Card Holder:
    <input type="textbox" name="holder" id="holder" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
    <p>Credit Card:</div>
    <input type="checkbox" name="visa" id="visa"> Visa
    <input type="checkbox" name="master" id="master"> MasterCard
    <input type="checkbox" name="american" id="american"> American Express</p>
    <div class="container">
    <p>Credit Card Number:
    <input type="textbox" name="credit" id="credit" onBlur="this.value=trim(this.value)"></p>
    <p>Expiration Date:
    </div>
    <select name="Exp month" id="expMonth">
    <option value="blank" selected></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    </select>
    				
    <select name="Exp year" id="expYear">
    <option value="blank" selected></option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    </select>
    
    <p><input type="button" value="Proccess Payment" onClick="formInfo();"/></p>
    </form>
    
    
    </body>
    
    </html>
    I then made a .js file and did all the validation, which seemed to work perfectly fine. However I was told that each functions of mine needed to be independent from my HTML code and should be able to pass the value to the function in .js and get a return value (with no getElementById in the .js file, but I could have in HTML).

    .js file
    Code:
    	// Global variables used for form
        var missing = false;													// Boolean error message check
        var error = "";															// Error message
    
    // Set focus on the first field 
    function setFocus(f)
    {
    	// Set focus on first name
    	var f = first.value.focus;
    }
    	
    function firstName(fN)
    {
    	// Validate the first name
    	if (document.billingForm.first.value == "")
    	{
    		missing = true;
    		error += "\nPlease provide your first name";
    		first.focus();
    		first.select();
        }
    }
    function cityValidate(cV)
    {
    	var cityLength = city.value.length;										// Checking length for city
    	
    	// Error check for City and has to be longer then 3 characters
    	if (document.billingForm.city.value == "" ||  cityLength < 3) 
    	{
    		missing = true;
    		error += "\nPlease provide your city must be greater then three characters";
    		city.focus();
    		city.select();
    	}
    }
    function postalCode(pC)
    {
    	var rePost = /^[A-Z][0-9][A-Z]\s[0-9][A-Z][0-9]$/;						// Postal code expression
    	
    	// Postal code validation and format
    	if (!rePost.test(document.billingForm.postal.value))
    	{
    		missing = true;
    		error += "\nPlease provide your postal code. Ex: N1E 1E9";
    		postal.focus();
    		postal.select();
    	}
    }
    function phoneNumber(pN)
    {
    	var rePhone = /^\(?(\d{3})\)?[\.\-\/\s]?(\d{3})[\.\-\/\s]?(\d{4})$/;  	// Phone number expression
    	
    	// Phone number validation and format
    	if (!rePhone.test(document.billingForm.phone.value))
    	{
    		missing = true;
    		error += "\nPlease provide your phone number Ex: 5192125598, 519 212 5598, or (519) 212 5598";
    		phone.focus();
    		phone.select();
    	}
    }
    function emailAddress(eA)
    {
    	//Email validation with expression
        if (email.value.search(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/) == -1) 
        {
            error += "\nInvalid email Ex: usersemail@domain.com";
    		email.focus();
    		email.select();
        }
    }
    function errorMessages(eM)
    {
    	// Show all message in one alert box
        if (missing)
        {
    	// calling all messages
            alert("You have enter the following data incorrectly: \n " + error);
        }
        else
        {
    		// if form filled out correct inform customer
            document.write("Thank you for submitting your information");
        }
    }
    // Capital on every letter function
    function capitalize(capital)
    {
        capital.value = capital.value.charAt(0).toUpperCase() + capital.value.slice(1);
    }
    // Trim all white spaces
    function trim(trimSpace)
    {
    	return trimSpace.trim();
    }
    I apologize a head of times if I'm not clear on this, so you can ask if you want to know anything else and any help will be greatful. I just need to be point the right direction for this.

  • #2
    New to the CF scene
    Join Date
    Feb 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Maybe this is a little better

    Code:
    <head>
    <title>Billing Form</title>
    <script type="text/javascript" src="jsAssignTwo.js"></script>
    <script type="text/javascript">
    
    function validateForm()
    {
        var rePost = /^[A-Z][0-9][A-Z]\s[0-9][A-Z][0-9]$/;                  
        var rePhone = /^\(?(\d{3})\)?[\.\-\/\s]?(\d{3})[\.\-\/\s]?(\d{4})$/;  
        var error = "";
        var missing = false;
        var cityLength = city.value.length; 
        var first = document.billingForm.first.value;                   
        var city = document.billingForm.city.value;
        var postal = document.billingForm.postal.value;
        var phone = document.billingForm.phone.value;
        var email = document.billingForm.email.value;
        var sF = document.getElementById("first").focus();
    
        if (first == "")
        {
            missing = true;
            error += "\nPlease provide your first name";
        }
        if (city == "" ||  cityLength < 3) 
        {
            missing = true;
            error += "\nPlease provide your city must be greater then three characters";
        }
        // Postal code validation and format
        if (!rePost.test(postal))
        {
            missing = true;
            error += "\nPlease provide your postal code. Ex: N1E 1E9";
        }
        if (!rePhone.test(phone))
        {
            missing = true;
            error += "\nPlease provide your phone number Ex: 5192125598, 519 212 5598, or (519) 212 5598";
        }
    
        if (email.search(/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/) == -1) 
        {
            missing = true;
            error += "\nInvalid email Ex: usersemail@domain.com";
        }
        // Show all message in one alert box
        if (missing)
        {
        // calling all messages
            alert("You have enter the following data incorrectly: \n " + error);
        }
        else
        {
            // if form filled out correct inform customer
            document.write("Thank you for submitting your information");
        }
    }
    // Set focus on the first field 
    
    </script>
    <!--CSS for formatting the form-->
    <style type="text/css">
        .container {
            width: 200px;
            clear: both;
        }
        .container input {
            width: 100%;
            clear: both;
        }
    
        </style>
    </head>
    
    <!--div for formatting purpose-->  
    <div class="container">
    <body onLoad="setFocus()" bgcolor="grey">
    <form action="http://cswin2k5/echo/default.asp" method="post" name="billingForm">
    <h2 id = "welcome">Billing Information</h2>
    Title: </div>
    <input type="radio" name="Titles" id="titleOne" value="Title" /> Mr.
    <input type="radio" name="Titles" id="titleTwo" value="Title" /> Mrs.
    <input type="radio" name="Titles" id="titleThree" value="Title" /> Miss.
    <input type="radio" name="Titles" id="titleFour" value="Title" /> Ms.
    <div class="container">
    <p>First Name*:
    <input type="textbox" name="first" id="first" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
    <p>Last Name*:
    <input type="textbox" name="last" id="last" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
    <p>Address:
    <input type="textbox" name="address" id="address" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
    <p>City:
    <input type="textbox" name="city" id="city" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
    <p>Province:
    <input type="textbox" name="province" id="province" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
    <p>Postal Code*:
    <input type="textbox" name="postal" id="postal" onBlur="this.value=trim(this.value)" onChange="this.value=this.value.toUpperCase()"></p>
    <p>Country:
    <input type="textbox" name="country" id="country" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
    <p>Phone:
    <input type="textbox" name="phone" id="phone" onBlur="this.value=trim(this.value)"></p>
    <p>Email:
    <input type="textbox" name="email" id="email" onBlur="this.value=trim(this.value)" placeholder="email@domain.com"></p>
    <p>Credit Card Holder*:
    <input type="textbox" name="holder" id="holder" onBlur="this.value=trim(this.value)" onkeyup='capitalize(this)'></p>
    <p>Credit Card*:</div>
    <input type="checkbox" name="visa" id="visa"> Visa
    <input type="checkbox" name="master" id="master"> MasterCard
    <input type="checkbox" name="american" id="american"> American Express</p>
    <div class="container">
    <p>Credit Card Number*:
    <input type="textbox" name="credit" id="credit" onBlur="this.value=trim(this.value)"></p>
    <p>Expiration Date*:
    </div>
    <select name="Exp month" id="expMonth">
    <option value="blank" selected></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    </select>
    
    <select name="Exp year" id="expYear">
    <option value="blank" selected></option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    </select>
    
    <p><input type="button" value="Proccess Payment" onClick="validateForm();"/></p>
    </form>
    
    
    </body>
    
    </html>
    However I was asked to use .js library to try to validate these form. Something like this

    Code:
    function setFocus(firstFocus)
    {
        first.focus();
    }
    function validate(fN, cY, pL, pE, eM)
    {
    }
    
    // Capital on every letter function
    function capitalize(capital)
    {
        capital.value = capital.value.charAt(0).toUpperCase() + capital.value.slice(1);
    }
    // Trim all white spaces
    function trim(trimSpace)
    {
        return trimSpace.trim();
    }
    As you can see anyone can take the capitalization and trim and use it on there form through my .js library. However I'm having trouble on were to begin with coding the validation in the js library and getting it into my HTML. If anyone can help on were to begin and I hope this is clear if not just ask me what I wasn't clear on. Thanks


  •  

    Posting Permissions

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