Form Validation Issues

Question

kahaj 0 Junior Poster

17 Years Ago

I'm trying to validate some things on this form. (I've omitted some of the totally uneccesary code below. I'm first trying to tackle the "card" radio buttons. When I hit the submit button, it's just sitting on the whole thing. Can't figure out what I'm doing wrong here:

<html>
<head><title>Kahaj's Hardware and More</title>
<script type="text/javascript">
<!-- HIDE FROM IMCOMPATIBLE BROWSERS
window.defaultStatus = "Kahaj's Hardware and More";

function confirmSubmit() {
	var cardChoice = false;
	for (var i=0; i<2; ++i) {
		if (document.forms[0].card[i].checked == true) {
			cardChoice = true;
			break;
		}
	}
		if (cardChoice = false) {
			window.alert("Please select payment method.");
			return true;
		}
			else
				return false;
			}

function confirmReset() {
	var resetForm = window.confirm("Are you sure you want to clear all of the above contents?");
	if (resetForm == true)
		return true;
	return false;
}

// STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script></head>
<body>

<p><div align="center"><font size="6" face="Garramond">Kahaj's Hardware and More</font></div></p><br /><br />

<p><font size="4">Choose from the items below what you want to order.  Be sure to fill in your<br />
		  personal information.  Then, you'll be ready to submit your order.</font></p><br /><br />

<form action="http://localhost/cgi-bin/kahajsHW.cgi" method="post" onreset="return confirmReset();" onsubmit="return confirmSubmit();">

<!************************************BILLING INFO****************************************>

<p><div align="center" /><font size="4" face="Arial"> Billing Information:</font></div></p><br />

<table width="85%" border="0">
<tr>
<td width="24%">
&nbsp
</td>
<td width="38%" valign="top">
<font size="3">
<p>Payment method:<br />
<input type="radio" name="card" value="cCard" />Credit Card<br />
<input type="radio" name="card" value="dCard" />Debit Card</p><br />

<p>Card number:<br />
<input type="text" name="cardNumber" size="18" maxlength="16"></p><br />

<p>Expiration date: (mmyy)<br />
<input type="text" name="expDate" size="5" maxlength="4"></p><br />
</td>
<td width="38%" valign="top">
<p>Billing Address:<br />
  Street Address 1:  <input type="text" name="bAdd1" size="20"><br />
  Street Address 2:  <input type="text" name="bAdd2" size="20"><br />
  City: <input type="text" name="bCity" size="20"><br />
  State: <input type="text" name="bState" size="3" maxlength="2"><br />
  Zip Code: <input type="text" name="bZip" size="7" maxlength="5"></p><br />

<p>Name as it Appears on Card:<br />
  First Name: <input type="text" name="bFirstName" size="10"><br />
  Middle Initial (if applicable): <input type="text" name="bMI" size="2" maxlength="1"><br />
  Last Name: <input type="text" name="bLastName" size="15"></p><br /><br />
</td>
</tr>
</table><br /><br />

<hr width="85%"><br /><br />

<!**************************************SHIPPING INFO***********************************>

<p><div align="center" /><font size="4" face="Arial"> Shipping Information:</font></div></p><br />

<table width="85%" border="0">
<tr>
<td width="24%">
&nbsp
</td>
<td width="38%" valign="top">
<p>Person Being Shipped To:<br />
  First Name: <input type="text" name="sFirstName" size="10"><br />
  Last Name: <input type="text" name="sLastName" size="15"></p><br />
</td>
<td width="38%" valign="top">
<p>Shipping Address:<br />
  Street Address 1:  <input type="text" name="sAdd1" size="20"><br />
  Street Address 2:  <input type="text" name="sAdd2" size="20"><br />
  City: <input type="text" name="sCity" size="20"><br />
  State: <input type="text" name="sState" size="3" maxlength="2"><br />
  Zip Code: <input type="text" name="sZip" size="7" maxlength="5"></p><br />
</td>
</tr>
</table>

<p><input type="reset" value="Clear Form" /> <input type="submit" value="Submit Order" /></p>

</form>
</font>

</body>
</html>

javascript

3 Contributors
5 Replies
131 Views
2 Days Discussion Span
Latest Post 17 Years Ago Latest Post by ~s.o.s~

~s.o.s~ 2,560 Failure as a human

17 Years Ago

> <!*************SHIPPING INFO*********************> Your commenting is off. It should be:  > if (cardChoice = false) You are assigning a value of false to cardChoice and then testing it, hence this condition would never be true irrespective of the value of cardChoice before. Maybe if(!cardChoice) is what you wanted to do.

> // STOP HIDING FROM INCOMPATIBLE BROWSERS -->
Not needed. Almost all modern browsers support javascript nowadays. If you still want to play it safe, use a <noscript> tag instead.

You are not using stylesheets which is a bad idea in itself. Separation of presentation, data and logic is crucial for todays' web apps. Also consider linking to an external script file.

Always use a validator to check the validity of the web pages you author. I would save both yours as well as the time of the person helping you out once it is known that the web page is a valid one. Consider keeping a DOCTYPE at the top of your page and validating against it using the online validator.

MidiMagic 579 Nearly a Senior Poster

17 Years Ago

If you want the code to wait until a box is checked, you have to use a loop.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

kahaj 0 Junior Poster · Answer 1 · 2007-11-20T05:31:09+00:00

I don't know what's going on with this. I must be totally missing something. It's giving the alert box whether you've clicked a radio button or not.

<html>
<head><title>Case Project 5-3 and 5-4</title>
<script type="text/javascript">
window.defaultStatus = "Kahaj's Hardware and More";

function confirmSubmit() {
	var cardChoice = document.getElementById("card");
		if (!cardChoice.checked) {
			window.alert("Please select payment method.");
			return false;
		}
			else {
				return true;
			}
}

function confirmReset() {
	var resetForm = window.confirm("Are you sure you want to clear all of the above contents?");
	if (resetForm == true)
		return true;
	return false;
}


</script></head>
<body>

<form action="http://localhost/cgi-bin/kahajsHW.cgi" method="post" onreset="return confirmReset();" onsubmit="return confirmSubmit();">

<!--************************************BILLING INFO****************************************-->

<p><div align="center" /><font size="4" face="Arial"> Billing Information:</font></div></p><br />

<table width="85%" border="0">
<tr>
<td width="24%">
&nbsp
</td>
<td width="38%" valign="top">
<font size="3">
<p>Payment method:<br />
<input type="radio" name="card" value="cCard" />Credit Card<br />
<input type="radio" name="card" value="dCard" />Debit Card</p><br />

<p>Card number:<br />
<input type="text" name="cardNumber" size="18" maxlength="16"></p><br />

<p>Expiration date: (mmyy)<br />
<input type="text" name="expDate" size="5" maxlength="4"></p><br />
</td>
<td width="38%" valign="top">
<p>Billing Address:<br />
  Street Address 1:  <input type="text" name="bAdd1" size="20"><br />
  Street Address 2:  <input type="text" name="bAdd2" size="20"><br />
  City: <input type="text" name="bCity" size="20"><br />
  State: <input type="text" name="bState" size="3" maxlength="2"><br />
  Zip Code: <input type="text" name="bZip" size="7" maxlength="5"></p><br />

<p>Name as it Appears on Card:<br />
  First Name: <input type="text" name="bFirstName" size="10"><br />
  Middle Initial (if applicable): <input type="text" name="bMI" size="2" maxlength="1"><br />
  Last Name: <input type="text" name="bLastName" size="15"></p><br /><br />
</td>
</tr>
</table>

<p><input type="reset" value="Clear Form" /> <input type="submit" name="submit" value="Submit Order" /></p>

</form>
</font>

</body>
</html>

kahaj 0 Junior Poster · Answer 2 · 2007-11-20T11:44:55+00:00

In comparing the code which I previously posted with the following code, I can't see what is different between the two. The one below is working fine fore me, while the previous one isn't.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<!--accept.html-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Agreement Page</title>
<script type="text/javascript">

function confirmSubmit() {
        var acc = document.getElementById("accept");
    if (!acc.checked) {
        alert("You must agree with the above items in order to utilize the statistics form.");
        return false;
    } else {
        return true;
    }
}

</script></head>
<body bgcolor="#CCCCCC">

<p>Do you accept the terms as outlined above?<br />
<form action="nflStats.html" method="post" onsubmit="return confirmSubmit();">
<input type="checkbox" name="accept" value="Accepted" />I Accept<br /><br />
<input type="submit" name="proceed" value="Proceed">
</form></p>
</body>
</html>

~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster · Answer 3 · 2007-11-20T21:12:08+00:00

Both the snippets you posted are fundamentally broken in the sense they supply a non-existent 'id' to the function getElementById() which returns an element based on id supplied to it.

Just because the second snippet works doesn't mean it is not broken. IE and Opera display a strange behavior in that they are capable of fetching the element using the getElementById() function even when it is supplied a name. This behavior is not to be relied on.

To fix your code, just assign an id to your element and everything should turn out to be fine.