Bonanza84
02 Apr 2009, 11:03 AM
Hey guys
Just signed up in the hope someone can guide me through this...
I'm trying to get back into html after a brief fling a few years ago at uni so needless to say I'm no expert!
Basically the client has requested that the form on the Contact Page of their site has some required fields before it can be submitted.
Ok so I've been looking up various javascripts and I almost get there but not quite! It's beginning to get confusing as some code seems very complicated. I simply want four fields to be mandatory when filling out the form - so if one or more is not filled in, an alert appears saying 'Please fill out all required fields' (or something to that extent) before it will process. I understand that I need to include Javascript within the Head secion of the page and corresponding html and javascript within the contact form itself.
Required Fields are: Name, Address, Area Code and Phone.
So here is the html I have for my Contact Form:
<div id="main">
<p>Please feel free to contact us with any query. For service enquiries please see the <a href="services.html">Services</a> page.<br />
All fields marked with an asterisk (*) are required.</p>
<form action="process.php" method="post">
<table id="form">
<tr><td>Name:*</td><td><input type="text" name="Name" size="30" maxlength="30" /></td></tr>
<tr><td>Company:</td><td><input type="text" name="Company" size="30" maxlength="30" /></td></tr>
<tr><td>Address:*</td><td><textarea name="Address" cols="30" rows="4"></textarea></td></tr>
<tr><td>Email:</td><td><input type="text" name="EmailFrom" size="30" maxlength="30" /></td></tr>
<tr><td>Area Code:*</td><td><input type="text" name="AreaCode" size="30" maxlength="30" /></td></tr>
<tr><td>Phone:*</td><td><input type="text" name="Phone" size="30" maxlength="30" /></td></tr>
<tr><td>Your Message:</td><td><textarea name="Message" cols="30" rows="8"></textarea></td></tr>
<tr><td></td><td><input type="submit" name="submit" value="Send Enquiry" /> <input type="reset" value="Reset Form"></td></tr>
</table>
And here is a visual of the Contact Form:
http://i99.photobucket.com/albums/l286/bonanza84/Contact-Form.png
Just signed up in the hope someone can guide me through this...
I'm trying to get back into html after a brief fling a few years ago at uni so needless to say I'm no expert!
Basically the client has requested that the form on the Contact Page of their site has some required fields before it can be submitted.
Ok so I've been looking up various javascripts and I almost get there but not quite! It's beginning to get confusing as some code seems very complicated. I simply want four fields to be mandatory when filling out the form - so if one or more is not filled in, an alert appears saying 'Please fill out all required fields' (or something to that extent) before it will process. I understand that I need to include Javascript within the Head secion of the page and corresponding html and javascript within the contact form itself.
Required Fields are: Name, Address, Area Code and Phone.
So here is the html I have for my Contact Form:
<div id="main">
<p>Please feel free to contact us with any query. For service enquiries please see the <a href="services.html">Services</a> page.<br />
All fields marked with an asterisk (*) are required.</p>
<form action="process.php" method="post">
<table id="form">
<tr><td>Name:*</td><td><input type="text" name="Name" size="30" maxlength="30" /></td></tr>
<tr><td>Company:</td><td><input type="text" name="Company" size="30" maxlength="30" /></td></tr>
<tr><td>Address:*</td><td><textarea name="Address" cols="30" rows="4"></textarea></td></tr>
<tr><td>Email:</td><td><input type="text" name="EmailFrom" size="30" maxlength="30" /></td></tr>
<tr><td>Area Code:*</td><td><input type="text" name="AreaCode" size="30" maxlength="30" /></td></tr>
<tr><td>Phone:*</td><td><input type="text" name="Phone" size="30" maxlength="30" /></td></tr>
<tr><td>Your Message:</td><td><textarea name="Message" cols="30" rows="8"></textarea></td></tr>
<tr><td></td><td><input type="submit" name="submit" value="Send Enquiry" /> <input type="reset" value="Reset Form"></td></tr>
</table>
And here is a visual of the Contact Form:
http://i99.photobucket.com/albums/l286/bonanza84/Contact-Form.png