As was foretold, we've added advertisements to the forums! If you have questions, or if you encounter any bugs, please visit this thread: https://forums.penny-arcade.com/discussion/240191/forum-advertisement-faq-and-reports-thread/
Options

Javascript + HTML Forms = Help!!!

Locust76Locust76 Registered User regular
edited April 2008 in Help / Advice Forum
I'm taking a class right now in Javascript and I'm having difficulties. What I'm trying to do is create a form that validates, submits and confirms.

I've gotten the validation code to work satisfactorily, but I cannot, for the life of me, get the user-inputted forum values to show up on a confirmation page of sorts.

It should be as such:

Form:
User inputs data and presses submit

onSubmit:
Script checks validity of information given
If this information is valid, present an acknowledgement page WITH the information as given by the user
<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd">

<html>

<head>

<title>Mailing list subscription</title>

<center><h1>Registration Form</h1>
<script language="JavaScript">
/* The Phone number must have the format (xxx) xxx-xxxx */
function testPhone(form) {
	Check = form.Phone;
	if ( Check.value == "" || Check.value.indexOf ('(', 0) == -1 || Check.value.indexOf (')', 4) == -1 || Check.value.indexOf (' ', 5) == -1)
	{
		alert("Please enter your telephone number in the following format: \n(123) 123-4567.")
		return (false);
	}
	else
	{
		alert("Phone Number " + Check.value + " entered successfully.")
		return (true);
	}
}
function testEmail(form) {
	Check = form.Email;
 	if ( Check.value == "" || Check.value.indexOf ('@', 1) == -1 ||Check.value.indexOf ('.', 3) == -1 )
	{
		alert(Check.value + " is not a valid Email address.")
		return (false);
	}
	else
	{
		alert("Email Address " + Check.value + " entered successfully.")
		return (true);
	}
}

/* This function will be called first when the "Submit" was clicked */
function Validation(Form)
{
	today = new Date() //declare a date variable
	var Is_Year = today.getYear() //get the current year from the system clock
	var Is_Month = [today.getMonth() + 1] //get the current month from the system
	var Yr_expired = Form.CCExpiryYear.value //read in year that was selected by user
	var Mn_expired = Form.CCExpiryMonth.value //read in month that was selected by user
	var Is_Day = today.getDate() //get the current day from the system clock
	//test whether the card was expired or not
	if (((Yr_expired == Is_Year) && (Mn_expired >= Is_Month)) || (Yr_expired > Is_Year))
	{
	    alert("Thanks for your registration.\n Your card is still available for today, "
			+ Is_Month + "/" + Is_Day + "/" +Is_Year )
	    return
	}
	else
	{
	    alert("Your card was expired. Please use another card.")
	    return
	}
}

/*
   the function will be called second by "onSubmit" event set in the form tag.
   At first, all fields must be filled by user by being checked for the empty value, one field
   at a time. If a field was blank, the function will stop and return back to that field, after
   a corresponding alert message to let the user know.
   Second, two sample validations of the two fields, Phone and Email, were included.
*/
function FillAll(Form)
{
	if (Form.FirstName.value == "" || Form.FirstName.value == null)
	{
		alert("First name.")
		Form.FirstName.focus()
		return false
	}
	
	if (Form.LastName.value == "" || Form.LastName.value == null)
	{
		alert("Error! You forgot to enter last name.")
		Form.LastName.focus()
		return false
	}

	if (Form.MiddleInitial.value == ""  || Form.MiddleInitial.value == null)
	{
		alert("Error! Middle initial is required.")
		Form.MiddleInitial.focus();
		return false
	}

	if (Form.StreetAddress.value == ""  || Form.StreetAddress.value == null)
	{
		alert("Error! You forgot to enter address.")
		Form.StreetAddress.focus()
		return false
	}

	if (Form.City.value == "" || Form.City.value == null)
	{
		alert("Error! You forgot to enter City.")
		Form.City.focus()
		return false
	}

	if (Form.State.value == "" || Form.State.value == null)
	{
		alert("Error! You forgot to enter State.")
		Form.State.focus()
		return false
	}

	if (Form.ZIP.value == "" || Form.ZIP.value == null)
	{
		alert("Error! You forgot to enter ZIP.")
		Form.ZIP.focus()
		return false
	}

	if (!(testPhone(Form))) 
	{
		Form.Phone.focus()
		return false 
	}

	if (!(testEmail(Form))) {
		Form.Email.focus()
		return false }

	if (Form.CCNumber.value == "" || Form.CCNumber.value == null)
	{
		alert("Error! You forgot to enter card number.")
		Form.CCNumber.focus()
		return false
	}

	else
	{
		document.write("<h1>Form submitted successfully!</h1>");
		document.write("The information you entered is as follows:");
		
                        //This is where I think the acknowledgement page would go

		return true;
	}	

}
</script>

</head>

<body>


	<form onSubmit="return FillAll(this)">

	<table>

		<tr>
			<td>First name:</td>
				<td><input type="text" name="FirstName"></td>

			<td>Last name:</td>
				<td><input type="text" name="LastName"></td>

			<td>Middle initial:</td>
				<td><input type="text" size="1" maxlength="1" name="MiddleInitial"></td>
		</tr>

			<td><label for="HouseNumber">House number:</label></td>
				<td><input type="text" size="4" name="HouseNumber"></td>

			<td><label for="StreetAddress">Street:</label></td>
				<td><input type="text" name="StreetAddress"></td>

			<td><label for="AptNumber">Apt:</label></td>
				<td><input type="text" size="3" name="AptNumber"></td>
		</tr>

		<tr>
			<td><label for="City">City:</label></td>
				<td><input type="text" name="City"></td>

			<td><label for="State">State:</label></td>
				<td>
				<select name="State">
					<option value="AL">Alabama</option>
					<option value="AK">Alaska</option>
					<option value="AZ">Arizona</option>
					<option value="AR">Arkansas</option>
					<option value="CA">California</option>
					<option value="CO">Colorado</option>
					<option value="CT">Connecticut</option>
					<option value="DE">Delaware</option>
					<option value="FL">Florida</option>
					<option value="GA">Georgia</option>
					<option value="HI">Hawaii</option>
					<option value="ID">Idaho</option>
					<option value="IL">Illinois</option>
					<option value="IN">Indiana</option>
					<option value="IA">Iowa</option>
					<option value="KS">Kansas</option>
					<option value="KY">Kentucky</option>
					<option value="LA">Louisiana</option>
					<option value="ME">Maine</option>
					<option value="MD">Maryland</option>
					<option value="MA">Massachusetts</option>
					<option value="MI">Michigan</option>
					<option value="MN">Minnesota</option>
					<option value="MS">Mississippi</option>
					<option value="MO">Missouri</option>
					<option value="MT">Montana</option>
					<option value="NE">Nebraska</option>
					<option value="NV">Nevada</option>
					<option value="NH">New Hampshire</option>
					<option value="NJ">New Jersey</option>
					<option value="NM">New Mexico</option>
					<option value="NY">New York</option>
					<option value="NC">North Carolina</option>
					<option value="ND">North Dakota</option>
					<option value="OH">Ohio</option>
					<option value="OK">Oklahoma</option>
					<option value="OR">Oregon</option>
					<option value="PA">Pennsylvania</option>
					<option value="RI">Rhode Island</option>
					<option value="SC">South Carolina</option>
					<option value="SD">South Dakota</option>
					<option value="TN">Tennessee</option>
					<option value="TX">Texas</option>
					<option value="UT">Utah</option>
					<option value="VT">Vermont</option>
					<option value="VA">Virginia</option>
					<option value="WA">Washington</option>
					<option value="WV">West Virginia</option>
					<option value="WI">Wisconsin</option>
					<option value="WY">Wyoming</option>
					</select>
					</td>

			<td><label for="ZIP">ZIP:</label></td>
				<td><input type="text" size="5" maxlength="5" name="ZIP"></td>
		</tr>


		<tr>
			<td><label for="Email">Email:</label></td>
				<td><input type="text" name="Email"></td>
		</tr>

		<tr>
			<td><label for="Phone">Phone:</label></td>
				<td><input type="text" size="15" maxlength="15" name="Phone"></td>
		</tr>

		<tr>
			<td><label for="CCType">Credit card type:</label></td>
				<td>
				<select>
					<option value="AmEx">American Express</option>
					<option value="Discover">Discover</option>
					<option value="MasterCard">MasterCard</option>
					<option value="Visa">Visa</option>
				</select>
				</td>

			<td><label for="CCNumber">Card number:</label></td>
				<td><input type="text" size="16" maxlength="16" name="CCNumber"></td>
			<td><table>
				<tr>
					<td><label for="CCExpiryMonth">Expiration Month (MM):</label></td>
						<td><input type="text" size="2" maxlength="2" name="CCExpiryMonth"></td>
				</tr>
				<tr>
					<td><label for="CCExpiryYear">Expiration Year (YYYY):</label></td>
						<td><input type="text" size="4" maxlength="4" name="CCExpiryYear"></td>
				</tr>
			</table></td>
		</tr>



		</table>
		<input type="submit" value="Submit" onclick="Validation(this.form)"><input type="reset">

	</form>

</center>
</body>

</html>

It's not complete by any means and still very much rough around the edges, I just need help getting the acknowledgement page to display the crap given by the user.

Thanks in advance!

Locust76 on

Posts

  • Options
    AngelHedgieAngelHedgie Registered User regular
    edited April 2008
    Well, I think you have your model for how this should work messed up. Normally, what a form does is pass the information to another page or script which then uses that data. What your validation script should do is prevent that transition unless the data is valid. So what should happen is you should have a confirmation page (or a confirmation script) that takes the data passed to it from the form and generates the confirmation.

    AngelHedgie on
    XBL: Nox Aeternum / PSN: NoxAeternum / NN:NoxAeternum / Steam: noxaeternum
Sign In or Register to comment.