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 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    [2 Problems] Adding form values & Validation of forms.

    Hey CF, I'm currently working on a website called 'eXtreme Gaming' I've almost completed it, apart from two things.

    - Adding two values on my checkout page for the Grandtotal (I've tried everything, but I'm too much of a noob and have probably missed something small).

    - Validation of forms (I don't know where to start here, I've looked on w3schools for tuts etc but I'm having difficulty incorporating it on my site)

    I'm going to put the code for my checkOut page only, if you are able to help me many thanks in advance.

    [quote]
    Code:
    <HTML>
    
    <HEAD>
    
    <script language="JavaScript" src="laptopsCookie.js">
    </script>
    
    <script language="JavaScript" src="desktopsCookie.js">
    </script>
    
    <script language="JavaScript"><!--
    function calculateTotalPurchaseLaptop(formRef)
    {
    	var laptopTotal=0;
    	for (var i=0; i<LaptopListPurchase.length/2;i++)
    	{
    	 var subTotal = formRef.elements['quantity'+i].value * formRef.elements['price'+i].value;
    	 formRef.elements['subTotal'+i].value = subTotal.toFixed(2);
    	// document.orderForm2.grandTotal.value = document.orderForm.laptopTotal.value + document.orderForm2.desktopTotal.value
    	 
    	 laptopTotal += subTotal;
    	}
    	
    	formRef.laptopTotal.value = laptopTotal.toFixed(2); 
    }
    //--></script>
    
    <script language="JavaScript"><!--
    function calculateTotalPurchaseDesktop(formRef)
    {
    	var desktopTotal=0;
    	for (var i=0; i<DesktopListPurchase.length/2;i++)
    	{
    	 var subTotal = formRef.elements['quantity'+i].value * formRef.elements['price'+i].value;
    	 formRef.elements['subTotal'+i].value = subTotal.toFixed(2);
    	
    	 
    	 desktopTotal += subTotal;
    	}
    	
    	formRef.desktopTotal.value = desktopTotal.toFixed(2); 
    }
    //--></script>
    
    <script language="Javascript"><!--
    
    function checkform()
    {
    	if (document.payment.Name.value == "")
    	{
    		alert('Please enter a name');
    		return false;
    	}
    	//else if(isNaN(document.payment.CreditCard.value) || document.payment.CreditCard.length !== 10)
    	//{
    	//	alert('Invalid Credit Card Number');
    	//	return false;
    	//}
    	else if (document.payment.Adress.value == "")
    	{
    		alert('Please enter your adress.');
    		return false;
    	}
    	else if (document.payment.State.selectedIndex == 0)
    	{
    		alert('Please select a state');
    		return false;
    	}
    
    	return true;
    }
    
    
    </script>
    </HEAD>
    
    <BODY>
    
    <TITLE>Check Out</TITLE>
    
    <script>
    var html = "";
    
    	html += '<TABLE align="center"><tr><td><img src = "images/checkOutTitle.png" align="center" style="border:none" /></td></tr></TABLE>';
    	html += '<TABLE align = "center" border="2" cellpadding="2" cellspacing="2" width="80%">'
    	html += '<form id = "orderForm" name = "orderForm" method = POST action="javascript:void(0)">';
    	html += '<tr>';
    	html += '<th>Product</th><th>Quantity</th><th>Price</th><th>Sub Total</th>';
    	html += '</tr>';
    
        for (var i=0; i<LaptopListPurchase.length;i=i+2)
    	{	
    				
          html += '<tr><td>' + LaptopListPurchase[i] + '</td>';
    	  html += '<td><select NAME="quantity' + i/2 + '"  onChange="calculateTotalPurchaseLaptop(this.form)">';
    	  html += '<OPTION VALUE="0">0</OPTION><OPTION VALUE="1">1</OPTION><OPTION VALUE="2">2</OPTION>';
    	  html += '<OPTION VALUE="3">3</OPTION><OPTION VALUE="4">4</OPTION><OPTION VALUE="5">5</OPTION>';
    	  html += '</select></td>';
    	  html += '<td>$<input type="text" name="price' + i/2 + '" size=5 value="' + LaptopListPurchase[i+1] + '" readonly></td>';
    	  html += '<td>$<input type="text" name="subTotal' + i/2 + '" size=5 value="0.00" readonly></td>';
    	  html += '</tr>';
    	}
    	html += '<tr>';
    	html += '<td></td>';
    	html += '<td></td>';
    	html += '<td></td>';
    	html += '<td>$<input type=TEXT name="laptopTotal" value="" readonly size=7></td></tr>';
    	html += '</form>';
    	html += '</table>';
    	
    	document.write(html);
    
    	// Update the quantities
    	//
    	var quantityLaptop;
    	for (var i=0; i<LaptopList.length/2;i++)
    	{
    		// Get the quantity of each type of Laptop
    		//
    		quantityLaptop = getCookie("Laptop" + i);
    		document.orderForm.elements("quantity"+i).value = quantityLaptop;
    	}
    	
    	// Update the totals
    	//
    	calculateTotalPurchaseLaptop(document.orderForm)
    	
    
    var html = "";
    
    	html += '<TABLE align = "center" border="2" cellpadding="2" cellspacing="2" width="80%">'
    	html += '<form id = "orderForm2" name = "orderForm2" method = POST action="javascript:void(0)">';
    	html += '<tr>';
    	html += '<th>Product</th><th>Quantity</th><th>Price</th><th>Sub Total</th>';
    	html += '</tr>';
    
        for (var i=0; i<DesktopListPurchase.length;i=i+2)
    	{	
    				
          html += '<tr><td>' + DesktopListPurchase[i] + '</td>';
    	  html += '<td><select NAME="quantity' + i/2 + '"  onChange="calculateTotalPurchaseDesktop(this.form)">';
    	  html += '<OPTION VALUE="0">0</OPTION><OPTION VALUE="1">1</OPTION><OPTION VALUE="2">2</OPTION>';
    	  html += '<OPTION VALUE="3">3</OPTION><OPTION VALUE="4">4</OPTION><OPTION VALUE="5">5</OPTION>';
    	  html += '</select></td>';
    	  html += '<td>$<input type="text" name="price' + i/2 + '" size=5 value="' + DesktopListPurchase[i+1] + '" readonly></td>';
    	  html += '<td>$<input type="text" name="subTotal' + i/2 + '" size=5 value="0.00" readonly></td>';
    	  html += '</tr>';
    	}
    	html += '<tr>';
    	html += '<td></td>';
    	html += '<td></td>';
    	html += '<td></td>';
    	html += '<td>$<input type=TEXT name="desktopTotal" value="0.00" readonly size=7></td></tr>';
    	html += '<td></td>';
    	html += '<td></td>';
    	html += '<td align = "center"><b>Grand Total</b></td>';
    	html += '<td>$<input type=TEXT name="grandTotal" value="0.00" readonly size=7></td></tr>';
    	html += '</form>';
    	html += '</table>';
    	
    	document.write(html);
    
    	// Update the quantities
    	//
    	var quantityDesktop;
    	for (var i=0; i<DesktopList.length/2;i++)
    	{
    		// Get the quantity of each type of Desktop
    		//
    		quantityDesktop = getCookie("Desktop" + i);
    		document.orderForm2.elements("quantity"+i).value = quantityDesktop;
    	}
    	
    	// Update the totals
    	//
    	calculateTotalPurchaseDesktop(document.orderForm2)
    </script>
    
    
    <table  align = 'center'>
    <tr>
    <td><h1>Pay for your Purchase Below</h1></td>
    </tr>
    </table>
    
    <table border="1" align = 'center' >
    <form name="payment" method="post">
    
    <tr>
    	<td>
    		Name on Credit Card: <input type="text" name="Name" /><br />
    		Credit Card number: <input type="text" name="CreditCard" /><br />
    		Street Adress: <input type="text" name="Adress" /><br />
    		Town: <input type="text" name="Town" /><br />
    		State/Territory: <select NAME="State"><OPTION VALUE="Null">--</OPTION><OPTION VALUE="Australian Capital Territory">ACT</OPTION><OPTION VALUE="South Australia">SA</OPTION><OPTION VALUE="Northen Territory">NT</OPTION><OPTION VALUE="Queensland">QLD</OPTION><OPTION VALUE="Victoria">Vic</OPTION><OPTION VALUE="Western Australia">WA</OPTION><OPTION VALUE="Tasmania">Tas</OPTION></select>
    	</td>
    	<td>
    		<INPUT TYPE="RADIO"  NAME="Master Card" VALUE="Master Card">Master Card<BR>
    		<INPUT TYPE="RADIO"  NAME="Visa" VALUE="Visa">Visa<BR>
    		<INPUT TYPE="RADIO"  NAME="AMEX" VALUE="American Express">American Express<BR>
    	</td>
    </tr>
    <tr>
    <td></td>
    <td><input type="submit" value="Submit" onclick="return checkform()"></td>
    </tr>
    
    </table>
    
    </BODY>
    
    </HTML>[
    /quote]
    Last edited by Case Sensitive; 07-06-2010 at 08:55 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    - Adding two values on my checkout page for the Grandtotal - which two values?

    When posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar which will insert the tags. You can (and should) edit your previous post.

    <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead. The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code. I have to say that your code would benefit from a total makeover.

    Name on Credit Card: <input type="text" name="email" /><br /> Plain silly!


    There's going to be a goal in a minute, at one end or the other. - Football Commentator, BBC News

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    - Adding two values on my checkout page for the Grandtotal - which two values?

    When posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar which will insert the tags. You can (and should) edit your previous post.

    <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead. The <!-- and //--> comment (hiding) tags have not been necessary since IE3 (i.e. since September 1997). If you see these in some published script it is a warning that you are looking at ancient and perhaps unreliable code. I have to say that your code would benefit from a total makeover.

    Name on Credit Card: <input type="text" name="email" /><br /> Plain silly!


    There's going to be a goal in a minute, at one end or the other. - Football Commentator, BBC News
    Sorry, this is just what I've been taught and the books we were given are incredibly old

    As for the email thing, I was testing some code and forgot to change it after. I'm modifying it right now, thanks for the tip.

  • #4
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, this is just what I've been taught and the books we were given are incredibly old

    As for the email thing, I was testing some code and forgot to change it after. I'm modifying it right now, thanks for the tip.

    Oh and as for the grandtotal, I want the .value for laptopTotal and desktopTotal to be calculated in that calculation function.

    Thanks, I'd much rather the form validation get fixed up tho because I'm currently trying to work on the grandTotal one myself.

  • #5
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still having trouble, anyone?

  • #6
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Bump, as you can see I have the name form validation working. Still need to get the radio checkbox one and the creditcard working (Credit card validation needs to check that it's a string of 10 numbers, no more no less.)

    Thanks again.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Credit card numbers have 16 digits. But obviously not any sequence of 16 digits makes a valid card number.


    Code:
    <form name = "myForm">
    <p> Enter credit card number <input type = "text" name = "CCNumber" maxlength = "16" onblur = "luhnCheck(this)"></p>
    </form>
    
    <script type = "text/javascript">
    
    function luhnCheck(cardNum)  {
    
    var failflag = 0;
    cardNum = cardNum.value;
    cardNum = cardNum.replace(/[^\d]/g, "");  // strip non-digits
    if (cardNum.length !=16) {failflag = 1}
    var firstDigit = cardNum.substr(0,1);
    if (firstDigit < 3 || firstDigit > 6) {failflag = 1}
    
    var ccArray = cardNum.split("");
    ccArray = ccArray.reverse();
    
    var digitString = "";
    var digitSum = 0;
    for (var counter = 0; counter < ccArray.length; counter++ ) {
    var current_digit = parseInt( ccArray[counter] );
    if (counter %2 != 0) {
    ccArray	[counter] *= 2;
    }
    digitString += ccArray[counter];
    }
    
    for (counter = 0; counter < digitString.length; counter ++) {
    current_digit = parseInt(digitString.charAt(counter));
    digitSum += current_digit;
    }
    if (digitSum % 10 != 0 ) {failflag = 1}
    
    if (failflag == 0) {
    alert ("The card number is valid \(passes Luhn algorithm\)  ");
    return true;
    }
    else {
    alert ("The card number is INVALID - please re-enter it ");
    document.myForm.CCNumber.value = "";
    setTimeout("document.myForm.CCNumber.focus()",10);
    return false;
    }
    
    }
    
    </script>
    Validation of the form if (document.payment.Name.value == "") is barely worthy of the name, and virtually useless, as even a single space, an x or a ? will return false, that is pass the validation. Numeric values such as zip codes and phone numbers should be validated as such. This topic has been covered many times before in this forum.

    Finally it is unwise to use the word "name" or Name" for the name of an HTML element.
    Last edited by Philip M; 07-06-2010 at 10:51 AM.

  • #8
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Credit card numbers have 16 digits. But obviously not any sequence of 16 digits makes a valid card number.


    Code:
    <form name = "myForm">
    <p> Enter credit card number <input type = "text" name = "CCNumber" maxlength = "16" onblur = "luhnCheck(this)"></p>
    </form>
    
    <script type = "text/javascript">
    
    function luhnCheck(cardNum)  {
    
    var failflag = 0;
    cardNum = cardNum.value;
    cardNum = cardNum.replace(/[^\d]/g, "");  // strip non-digits
    if (cardNum.length !=16) {failflag = 1}
    var firstDigit = cardNum.substr(0,1);
    if (firstDigit < 3 || firstDigit > 6) {failflag = 1}
    
    var ccArray = cardNum.split("");
    ccArray = ccArray.reverse();
    
    var digitString = "";
    var digitSum = 0;
    for (var counter = 0; counter < ccArray.length; counter++ ) {
    var current_digit = parseInt( ccArray[counter] );
    if (counter %2 != 0) {
    ccArray	[counter] *= 2;
    }
    digitString += ccArray[counter];
    }
    
    for (counter = 0; counter < digitString.length; counter ++) {
    current_digit = parseInt(digitString.charAt(counter));
    digitSum += current_digit;
    }
    if (digitSum % 10 != 0 ) {failflag = 1}
    
    if (failflag == 0) {
    alert ("The card number is valid \(passes Luhn algorithm\)  ");
    return true;
    }
    else {
    alert ("The card number is INVALID - please re-enter it ");
    document.myForm.CCNumber.value = "";
    setTimeout("document.myForm.CCNumber.focus()",10);
    return false;
    }
    
    }
    
    </script>
    Validation of the form if (document.payment.Name.value == "") is barely worthy of the name, and virtually useless, as even a single space, an x or a ? will return false, that is pass the validation. Numeric values such as zip codes and phone numbers should be validated as such. This topic has been covered many times before in this forum.

    Finally it is unwise to use the word "name" or Name" for the name of an HTML element.
    We just need to be able to demonstrate different types of form validation, it doesn't have to be an actual credit card. I just chose the 'imaginary' credit card with 10 digits which is what I'm trying to validate. Sorry I didn't tell you that before. I've got the other validations working on my own accord but is NaN() isn't working because I tried it. Any ideas on hwo to solve the grandTotal or the Creditcard dillema?

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by Case Sensitive View Post
    is NaN() isn't working because I tried it.
    The fault, dear Brutus, lies not in the stars ......

    isNan() not is NaN().

    if (!/\d{10}/.test(creditCardNumber)) { // number is invalid

    Sorry, we are not able to do any more of your homework for you. Form validation has been covered a zillion times in this forum.
    Last edited by Philip M; 07-06-2010 at 05:24 PM.

  • #10
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    The fault, dear Brutus, lies not in the stars ......

    isNan() not is NaN().

    if (!/\d{10}/.test(creditCardNumber)) { // number is invalid

    Sorry, we are not able to do any more of your homework for you. Form validation has been covered a zillion times in this forum.
    If you don't want to help me you can jusy say it, you don't sound welcoming at all.

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by Case Sensitive View Post
    If you don't want to help me you can jusy say it, you don't sound welcoming at all.
    I have said it.

  • #12
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Does anyone know any good tutorials that I could use so that I become proficient in the use of form validation as I need apply it to many parts of my site. Prefer if the tutorial covered the same method Phillip M so kindly gave to me. Thanks.

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,732
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    One more time, the subject of form validation has ben covered a zillion times in this forum. Use the forum search facility. Or use Google.

    There is a delicate balance between asking for help with a specific Javascript problem, and getting others to do your homework for you. You seem to be veering towards the latter.
    Last edited by Philip M; 07-06-2010 at 05:58 PM.

  • #14
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah thanks, I just realized it's called regular expressions. I'll be working on it now, 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
    •