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

Case Sensitive

07-05-2010, 08:43 AM

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.

<HTML>

<HEAD>

<script language="JavaScript" src="laptopsCookie.js">
</script>

<script language="JavaScript" src="desktopsCookie.js">
</script>

<script language="JavaScript"></script>

<script language="JavaScript"></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>

Philip M

07-05-2010, 10:16 AM

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

Case Sensitive

07-05-2010, 11:03 AM

Case Sensitive

07-05-2010, 12:44 PM

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.

Case Sensitive

07-06-2010, 04:01 AM

Still having trouble, anyone?

Case Sensitive

07-06-2010, 08:56 AM

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.

Philip M

07-06-2010, 10:40 AM

Credit card numbers have 16 digits. But obviously not any sequence of 16 digits makes a valid card number.

<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.

Case Sensitive

07-06-2010, 05:07 PM

Philip M

07-06-2010, 05:21 PM

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.

Case Sensitive

07-06-2010, 05:41 PM

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.

Philip M

07-06-2010, 05:50 PM

If you don't want to help me you can jusy say it, you don't sound welcoming at all.

I have said it.

Case Sensitive

07-06-2010, 05:53 PM

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.

Philip M

07-06-2010, 05:56 PM

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.

Case Sensitive

07-06-2010, 06:11 PM

Ah thanks, I just realized it's called regular expressions. I'll be working on it now, thanks.