...

View Full Version : help



Darci
08-13-2005, 05:03 AM
I only understand how to set up the form, however... our professor hasn't taught us much on javascript and wanted us to look it up ourselve, however I haven't found google very helpful in searching the codes I need...
can anyone help out?

iota
08-13-2005, 07:12 AM
SEE our forum rules:
http://codingforums.com/showthread.php?t=2090

Home assignments are not allowed to post in this CF Forum , if any moderators see this post then it'll be closed.

Our moderators sometimes tends to be furious. :D

iota
08-13-2005, 07:27 AM
ah but your deadline is Aug 15, right?

iota
08-13-2005, 09:16 AM
Here's part of Code you'll need to develop further;
I'd willingly like to write for the whole code.
For the time being,however, I'm being busy with my job.

There are other JavaScript masters in this master will help you surely for the whole part of your assignment. Please await it.
Hope you feel content.

Bye! ;)





<SCRIPT LANGUAGE="JavaScript">

/* wrote patially for Darci's assignment
by icebergz
http://dear.to/icebergz
*/

<!-- Begin
function checkFields() {
missinginfo = "";
if (document.form.fname.value == "") {
missinginfo += "\n - First Name";

}

if (document.form.lname.value == "") {
missinginfo += "\n - Last Name";

}

if ((document.form.email.value == "") ||
(document.form.from.value.indexOf('@') == -1) ||
(document.form.from.value.indexOf('.') == -1)) {
missinginfo += "\n - Email address";
}

if (document.form.city.value == "") {
missinginfo += "\n - City";

}

if(document.form.state.value == "") {
missinginfo += "\n - State";
}

if(document.form.zip.value == "") {
missinginfo += "\n - Zip Code";
}

if(document.form.phone.value == "") {
missinginfo += "\n - Phone Number";
}


if(document.form.cardnum.value == "") {
missinginfo += "\n - Card Number";
}

if(document.form.ExpMon.value == "") {
missinginfo += "\n - Phone Number";
}

if(document.form.ExpYear.value == "") {
missinginfo += "\n - Phone Number";
}




if (missinginfo != "") {
missinginfo ="_____________________________\n" +
"You failed to correctly fill in your:\n" +
missinginfo + "\n_____________________________" +
"\nPlease re-enter and submit again!";
alert(missinginfo);
document.form.missinginfo.focus();


return false;
}
else return true;
}
// End -->
</script>

<body>
<center><br><br>
<style>

table {
font-family: Arial;
font-size: 12px;
}

form {
margin: 0;
}

img {
margin: 0;
}


</style>
<form name=form onSubmit="return checkFields();">

<table>


<tr><td valign="middle" align="right"><b>Your Name: </b><br>&nbsp;</td>
<td><table cellspacing=0 cellpadding=0 border=0>
<tbody>
<tr>
<td><input maxLength=50 size=20 type="text" name="fname" value=""><br><small>First:</small></td>
<td width="10"></td>
<td><input maxLength=50 size=20 name="lname" value=""><br><small>Last:</small></td></tr>
</tbody>
</table></td></tr>

<tr><td align="right"><b>Your Email: </b></td>
<td><input type=text name="email" value="" size=20 maxlength=50>

</td></tr>



<tr><td valign=top align="right"><b>City: </b></td>
<td>
<input type=text name="city" value="" size=20 maxlength=100></td></tr>
<br>
<tr><td align="right"><b>State / Province: </b></td>
<td><select onChange="changeList(3, this.options[this.options.selectedIndex].value, 'join', 'mcity', 0);" name="state" size=1>
<option value="">Select A State</option>
<option value="5121" >Australian Capital T..</option>
<option value="5084" >New South Wales</option>
<option value="5085" >Northern Territory</option>
<option value="5089" >Queensland</option>
<option value="5082" >South Australia</option>
<option value="5105" >Tasmania</option>
<option value="5087" >Victoria</option>
<option value="5083" >Western Australia</option>
<option value="999999">None</option>
</select>
</td></tr>
<tr>
<td align="center"><b>Zip Code:</b></td>
<td>
<input type=text name="zip" value="" size=10 maxlengh=10></td></tr>
<tr>
<td align="center"><b>Phone No. :</b></td>
<td>
<input type=text name="phone" value="" size=10 maxlengh=10></td></tr>

<tr><td align="center"><b> Card Number : </b></td>
<td>
<input name="cardnum" size="16" maxlength="19"><br>
</td>
</tr>
<tr>
<td align="center"> <b>Expiration Date: Month</b>
</td>
<td>
<select name="ExpMon">
<option value="1" selected>1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
</select>
&nbsp;&nbsp;<b>Year</b> <input name="ExpYear" size="2" maxlength="2"><b>(Range: 1997~2020)</b><br>
</td>
<tr> <td align="center"><b>Comments :</b></td>
<td>
<textarea rows=6 cols=40 name="comments"></textarea>
</td></tr>
</table>
<br>

<div align="center">
<input type=submit name="submit" value="Submit Form!"></td>
</div>

</form>

dumpfi
08-13-2005, 03:22 PM
Try this:

assignForm.html
<html>
<head>
<title>Assignment 4</title>
<script type="text/javascript">
function isNotSpace(value) {
return (value.match(/^\s+$/) == null);
}
function isNotEmpty(value) {
return (value != '');
}
function isZip(value) {
return value.match(/^\d{5}$/);
}
function isPhone(value) {
return value.match(/^\d{3}-\d{3}-\d{4}$/);
}
function isCCN(value) {
return value.match(/^\d{4} \d{4} \d{4} \d{4}$/);
}
function isNode(node) {
return (node != null && typeof node == 'object' && typeof node.tagName != 'undefined');
}
Array.prototype.inArray = function(value) {
var x;
for(x in this) {
if(typeof [][x] != 'undefined') continue;
if(this[x] == value) return true;
}
return false;
}
var formatMsg = '*: D must be a digit';
var fieldNames = {
'firstName':'First Name',
'lastName':'Last Name',
'address':'Address',
'city':'City',
'state':'State',
'zip':'Zip Code',
'phone':'Phone No.',
'ccn':'Credit Card No.',
'expDate':'Expiration Date'
}
var fields = {
'each':[
[isNotSpace, isNotEmpty],
['\t - the {fieldName} must not be blank.', '\t - the {fieldName} must not be empty.']
],
'firstName':[[], []],
'lastName':[[], []],
'address':[[], []],
'city':[[], []],
'state':[[], []],
'zip':[
[isZip],
['\t - the {fieldName} must have the format:\n\t\tDDDDD*'],
[formatMsg]
],
'phone':[
[isPhone],
['\t - the {fieldName} must have the format:\n\t\tDDD-DDD-DDDD*'],
[formatMsg]
],
'ccn':[
[isCCN],
['\t - the {fieldName} must have the format:\n\t\tDDDD DDDD DDDD DDDD*'],
[formatMsg]
],
'expDate':[[], []]
}
function validate(f) {
var vars = { 'send':true, 'eMsg':'', 'append':[] }, x, focused = false;
for(x in fields) {
if(!isNode(f[x])) continue;
if(_validate(fields.each, x, f[x].value, vars)) _validate(fields[x], x, f[x].value, vars);
else if(!focused) {
f[x].focus();
focused = true;
}
}
if(vars['eMsg']) window.alert('Errors occured during validation:\n' + convertTab(vars['eMsg'] + vars['append'].join('\n')));
return vars['send'];
}
function _validate(field, fieldName, value, vars) {
for(var i = 0; i < field[0].length; ++i) {
if(!field[0][i](value)) {
vars['send'] = false;
vars['eMsg'] += field[1][i].replace(/\{fieldName\}/, fieldNames[fieldName]) + '\n';
if(typeof field[2] != 'undefined' && !vars['append'].inArray(field[2][i])) vars['append'].push(field[2][i]);
return false;
}
}
return true;
}
function convertTab(value) {
return value.replace(/\t/g, '\240\240\240\240\240\240\240\240');
}
</script>
<style type="text/css">
label, input, textarea, select {
margin:0.25em 0em;
}
label {
display:block;
width:10em;
float:left;
clear:left;
}
input, textarea, select {
float:left;
width:9.9em;
}
form {
width:20em;
}
#submit, .note {
clear:both;
}
#submit {
margin:0.5em 1em;
float:right;
width:auto;
}
</style>
</head>
<body>
<div class="formContainer">
<form action="displayForm.html" method="get" onSubmit="return validate(this)">
<fieldset>
<legend>Personal Information</legend>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName">
<label for="address">Address:</label>
<input type="text" id="address" name="address">
<label for="city">City:</label>
<input type="text" id="city" name="city">
<label for="state">State:</label>
<select name="state">
<option>State 1</option>
<option>State 2</option>
<option>State 3</option>
<option>State 4</option>
<option>State 5</option>
<option>State 6</option>
</select>
<label for="zip">Zip Code:</label>
<input type="text" id="zip" name="zip">
<label for="phone">Phone No.:</label>
<input type="text" id="phone" name="phone">
<label for="ccn">Credit Card No.:</label>
<input type="text" id="ccn" name="ccn">
<label for="expDate">Expiration Date:</label>
<select name="expDate">
<option>Date 1</option>
<option>Date 2</option>
<option>Date 3</option>
<option>Date 4</option>
<option>Date 5</option>
<option>Date 6</option>
</select>
<label for="comments">Comments: *</label>
<textarea id="comments" name="comments"></textarea>
<input type="submit" id="submit" name="submit" value="Submit">
<div class="note">*: optional</div>
</fieldset>
</form>
</div>
</body>
</html>displayForm.html
<html>
<head>
<script type="text/javascript">
/*****************************************************************

GetVars javascript class by Peter Bailey - Copyright (c) 2003
Contact: me@peterbailey.net
Website: http://www.peterbailey.net/site/dev/jsclasses/

Main Features:
- Retrieves query-string data as an object
- Allows global and per-variable default values
- Allows data to be made global
- Supports frames

Compatibility:
- Tested on IE6 and Mozilla 1.1
- DOM compliant browsers only

Note: This document was created with a tab-spacing of four (4)

******************************************************************/
function GetVars( def, winRef )
{
var win = ( typeof winRef != 'undefined' ) ? winRef : self;
this._def_ = def;
var query, queries = win.location.search.substring(1).split( /[&;]/ );
for ( var i=0; ( query = queries[i] ); i++ )
{
query = query.split( /\=/ );
query[1] = ( typeof query[1] == 'undefined' ) ? this._def_ : unescape( query[1].replace( /\+/g, " " ) );
if ( this.exists( query[0] ) )
{
if ( typeof this[query[0]] == 'string' )
{
this[query[0]] = [this[query[0]],query[1]];
} else {
this[query[0]].push( query[1] );
}
} else {
this[query[0]] = ( typeof query[1] == 'undefined' ) ? def : query[1];
}
}
}

GetVars.prototype.assign = function( key, def )
{
var deflt = ( typeof def == 'undefined' ) ? this._def_ : def;
return ( !this.exists( key ) || this[key] == this._def_ ) ? deflt : this[key];
}

GetVars.prototype.exists = function( key )
{
return ( typeof this[key] != 'undefined' );
}

GetVars.prototype.makeGlobal = function( action, prefix )
{
prefix = ( typeof prefix == 'undefined' ) ? '' : prefix;
for ( var i in this )
{
if ( typeof i != 'function' && i != '_def_' )
{
var gv = prefix + i;
if ( window[gv] ) // Global already exists
{
switch( action )
{
case 0 : // Overwrite
window[gv] = this[i];
break;
case 1 : // Skip
break;
case 2 : // Prompt
if ( confirm( "The global variable '" + gv + "' aleady exists\nclick 'Ok' to overwrite, 'Cancel' to skip" ) )
window[gv] = this[i];
break;
}
}
// Global doesn't already exists, assign as is
else window[gv] = this[i];
}
}
}
/* End of GetVars javascript class */
var fieldNames = {
'firstName':'First Name',
'lastName':'Last Name',
'address':'Address',
'city':'City',
'state':'State',
'zip':'Zip Code',
'phone':'Phone No.',
'ccn':'Credit Card No.',
'expDate':'Expiration Date',
'comments':'Comments'
}
window.onload = function() {
var ul = document.getElementById('passedVals'), x, li, spans, _GET = new GetVars(null, window.self);
for(x in _GET) {
if(!fieldNames.exists(x)) continue;
li = document.getElementById('copyMeLI').cloneNode(true);
li.id = null;
spans = li.getElementsByTagName('span');
spans[0].appendChild(document.createTextNode(fieldNames[x]));
spans[1].appendChild(document.createTextNode(_GET[x]));
ul.appendChild(li);
}
}
Object.prototype.exists = function(value) {
var x;
for(x in this) {
if(typeof {}[x] != 'undefined') {
continue;
}
if(x == value) return true;
}
return false;
}
</script>
<style type="text/css">
#copyMeLI {
display:none;
}
li {
list-style-type:none;
}
.listTop {
font-size:120%;
font-style:italic;
padding:1em;
}
.name {
display:block;
width:10em;
clear:left;
float:left;
}
.value {
font-weight:700;
}
</style>
</head>
<body>
<ul id="passedVals">
<li id="copyMeLI">
<span class="name"></span>
<span class="value"></span>
</li>
<li class="listTop">You have entered the following information:</li>
</ul>
<a href="assignForm.html">Back to the form</a>
</body>
</html>dumpfi

Philip M
08-14-2005, 08:56 AM
darci's unworldly professor will, of course, fail to realise that the assignment he offers is not, how shall I say, entirely his own work. Alpha+!

iota
08-14-2005, 02:34 PM
Thanks, dumpfi for nice help.


Hey but I can't find the Submit button : :D

So I change its id postion: :)



position:absolute;left:180px;



In addition, no matter how I filled the form correctly, the two errors still exist : "The state and expiration date must not be empty".
So, I fixed it. Please see the truely correct code here : :thumbsup:



assignForm.html




<html>
<head>
<title>Assignment 4</title>
<script type="text/javascript">
function isNotSpace(value) {
return (value.match(/^\s+$/) == null);
}
function isNotEmpty(value) {
return (value != '');
}
function isZip(value) {
return value.match(/^\d{5}$/);
}
function isPhone(value) {
return value.match(/^\d{3}-\d{3}-\d{4}$/);
}
function isCCN(value) {
return value.match(/^\d{4} \d{4} \d{4} \d{4}$/);
}
function isNode(node) {
return (node != null && typeof node == 'object' && typeof node.tagName != 'undefined');
}
Array.prototype.inArray = function(value) {
var x;
for(x in this) {
if(typeof [][x] != 'undefined') continue;
if(this[x] == value) return true;
}
return false;
}
var formatMsg = '*: D must be a digit';
var fieldNames = {
'firstName':'First Name',
'lastName':'Last Name',
'address':'Address',
'city':'City',
'state':'State',
'zip':'Zip Code',
'phone':'Phone No.',
'ccn':'Credit Card No.',
'expDate':'Expiration Date'
}
var fields = {
'each':[
[isNotSpace, isNotEmpty],
['\t - the {fieldName} must not be blank.', '\t - the {fieldName} must not be empty.']
],
'firstName':[[], []],
'lastName':[[], []],
'address':[[], []],
'city':[[], []],
'state':[[], []],
'zip':[
[isZip],
['\t - the {fieldName} must have the format:\n\t\tDDDDD*'],
[formatMsg]
],
'phone':[
[isPhone],
['\t - the {fieldName} must have the format:\n\t\tDDD-DDD-DDDD*'],
[formatMsg]
],
'ccn':[
[isCCN],
['\t - the {fieldName} must have the format:\n\t\tDDDD DDDD DDDD DDDD*'],
[formatMsg]
],
'expDate':[[], []]
}
function validate(f) {
var vars = { 'send':true, 'eMsg':'', 'append':[] }, x, focused = false;
for(x in fields) {
if(!isNode(f[x])) continue;
if(_validate(fields.each, x, f[x].value, vars)) _validate(fields[x], x, f[x].value, vars);
else if(!focused) {
f[x].focus();
focused = true;
}
}
if(vars['eMsg']) window.alert('Errors occured during validation:\n' + convertTab(vars['eMsg'] +

vars['append'].join('\n')));
return vars['send'];
}
function _validate(field, fieldName, value, vars) {
for(var i = 0; i < field[0].length; ++i) {
if(!field[0][i](value)) {
vars['send'] = false;
vars['eMsg'] += field[1][i].replace(/\{fieldName\}/, fieldNames[fieldName]) + '\n';
if(typeof field[2] != 'undefined' && !vars['append'].inArray(field[2][i]))

vars['append'].push(field[2][i]);
return false;
}
}
return true;
}
function convertTab(value) {
return value.replace(/\t/g, '\240\240\240\240\240\240\240\240');
}
</script>
<style type="text/css">
label, input, textarea, select {
margin:0.25em 0em;
}
label {
display:block;
width:10em;
float:left;
clear:left;
}
input, textarea, select {
float:left;
width:9.9em;
}
form {
width:20em;
}
#submit, .note {
clear:both;
}
#submit {
margin:0.5em 1em;
position:absolute;left:180px;
width:auto;
}
</style>
</head>
<body>
<div class="formContainer">
<form action="displayForm.html" method="get" onSubmit="return validate(this)">
<fieldset>
<legend>Personal Information</legend>
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName">
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName">
<label for="address">Address:</label>
<input type="text" id="address" name="address">
<label for="city">City:</label>
<input type="text" id="city" name="city">
<label for="state">State:</label>
<select name="state">
<option value="">Select State</option>
<option value="state1">State 1</option>
<option value="state2">State 2</option>
<option value="state3">State 3</option>
<option value="state4">State 4</option>
<option value="state5">State 5</option>
</select>
<label for="zip">Zip Code:</label>
<input type="text" id="zip" name="zip">
<label for="phone">Phone No.:</label>
<input type="text" id="phone" name="phone">
<label for="ccn">Credit Card No.:</label>
<input type="text" id="ccn" name="ccn">
<label for="expDate">Expiration Date:</label>
<select name="expDate">
<option value="">Select Date</option>
<option value="Date1">Date 1</option>
<option value="Date2">Date 2</option>
<option value="Date3">Date 3</option>
<option value="Date4">Date 4</option>
<option value="Date5">Date 5</option>
</select>
<label for="comments">Comments: *</label>
<textarea id="comments" name="comments"></textarea>
<input type="submit" id="submit" name="submit" value="Submit">
<br/>
<div class="note">*: optional</div>
</fieldset>
</form>
</div>
</body>
</html>

dumpfi
08-14-2005, 03:20 PM
Thanks, dumpfi for nice help.


Hey but I can't find the Submit button : :D I've only tested it in the most recent versions of FF and Opera and there it displays just fine. However, I must admit that I still haven't catched those float-things and don't know wether displaying the submit button is due to browser-quirks or because of good CSS. ;)


In addition, no matter how I filled the form correctly, the two errors still exist : "The state and expiration date must not be empty".FF and Opera default to sending the option text if no value-attribute is given, and because every option has text the checking for empty values is quite senseless in these cases. But I don't know if such a behavior is enjoined by some standards or browser-specific. I just relied upon for the sake of laziness.

At least IE does not crash for you like it does for me, when I try to view the page in. :D

dumpfi

Edit: Post No. 300. Yeah!

Darci
08-14-2005, 05:50 PM
wow... thank you iota and dumpfi!!! ;)
sorry for not being specific enough in my first post XD I was in a rush...
I made the form with the alert boxes beforehand but couldn't figure the rest and spent a couple hours with trial and error, so it should be within the forum rules... er, I assume...

the part I couldn't understand were
-Whitespace in a field not allowed
-All of the data is displayed on the page to which the form is submitted
-Cursor focus placed in first field that is invalid

especially... the "All of the data is displayed on the page to which the form is submitted" part that I had complete trouble with XD although I haven't got it to work yet... at least I have something to work with

as for my professor... he's cool about this, he doesn't consider this cheating under the condition that I understand the codes and know what I used... He'll be asking how we applied certain applications, so if I don't know what I put on my own assignment - then I'm in trouble. But thats not the case =)
the only time he won't approve of this, is if its a test...which it isn't...

I love you guys :p
...Thank You!!! :D :D :D

Darci
08-14-2005, 06:10 PM
ok nvm, I got it working ^_^
THANK YOU GUYS!!!! :rolleyes:

hmmm, couldn't of finished it without you XD once I make myself understand how exactly they work, I'm free for the day ^_^



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum