PDA

Click to See Complete Forum and Search --> : form repetition with holding previous entered data

Domos
11-26-2003, 03:58 AM
Hey all,

I hope u experts can give me a hand on this.
i know what i want has is possible with dhtml / javascript but since i'm not that experienced in them i came here and ask for advice.

I'll try to explain the purpose of the form i need.

The form has x number of fields, each with their own mask and each with validation.
The data given in by the user should be immediatly checked when he jumps to the next field (this jump can be with Tab or automatic when the field is determined by a number of characters that can be filled in)

If the validation returns false an error message should pop-up (preferably with an error-sound)
If the validation is ok the user can fill in the next form field.

At the bottom of the form there are three buttons: Previous, Next and Generate

When the user hits next the data off all fields should be stored in one hidden field and the form i shown again with empty fields.
The User can give in multiple form-data so every time he clicks next the data has to be added to that specific hidden field.
let's say the user gave in these values the first time: field1=aa field2=bb field3=54
then when hitting the next button the value aabb54 is stored in the hidden field
Now he fills in the form again (field1= zz field2 = gg field3=78) and clicks next again
Then the value of the hidden field should be updated with those values (that way the value of the hidden field would then be aabb54zzgg78)

When the user hits the previous button (once, or several times) the data of the previous form is shown in the form
So (continuing the example) if the user would hit the previous button once he would see the form filled in with zz, gg and 78. If he would hit it twice he would see the form with aa, bb and 54 filled in.
At this moment the user can change the filled in data and when hitting next again the edited data is stored in the hidden field (and the form is shown again >filled in or not...)

Now for the third button:
When the user clicks generate the value of the hidden field is shown.

Well i hope this makes sence and u can give me some help on this.
thx in advance

Domos
Gollum
11-26-2003, 04:45 AM
Have a play with this...

<html>
<HEAD>

<script language="javascript">
<!--

function validateChar()
{
if ( this.value.length < this.maxLength )
{
alert("must have " + this.maxLength + " letters in this field");
this.focus();
return false;
}

// lc letters only
if ( this.value.search(/[^a-z]/) != -1 )
{
alert("only lower case letters in this field");
this.focus();
return false;
}

return true;
}

function validateNum()
{
if ( this.value.length < this.maxLength )
{
alert("must have " + this.maxLength + " digits in this field");
this.focus();
return false;
}

// digits letters only
if ( this.value.search(/[^0-9]/) != -1 )
{
alert("only digits in this field");
this.focus();
return false;
}

return true;
}

var bDone = false;

function getValue(o)
{
o.value = document.f.result.value.substring(document.f.result.value.length - o.maxLength);
document.f.result.value = document.f.result.value.substring(0,document.f.result.value.length - o.maxLength);
}

function back()
{
if ( bDone ) return;

getValue(document.f.field1);
getValue(document.f.field2);
getValue(document.f.field3);
}

function next()
{
if ( bDone ) return;

if (
!document.f.field1.onblur() ||
!document.f.field2.onblur() ||
!document.f.field3.onblur() ) return;

document.f.result.value += document.f.field1.value + document.f.field2.value + document.f.field3.value;
document.f.field1.value = '';
document.f.field2.value = '';
document.f.field3.value = '';
}

function done()
{
bDone = true;
document.getElementById('spResult').style.display = '';
}
-->
</script>

</HEAD>
<body>
<form name=f>
<table>
<tr>
<td>Field 1:</td>
<td><input name=field1 type=text maxlength=2 onblur="this.onblur=validateChar; this.onblur();"></td>
</tr>
<tr>
<td>Field 2:</td>
<td><input name=field2 type=text maxlength=2 onblur="this.onblur=validateChar; this.onblur();"></td>
</tr>
<tr>
<td>Field 3:</td>
<td><input name=field3 type=text maxlength=2 onblur="this.onblur=validateNum; this.onblur();"></td>
</tr>
</table>
<button onclick="back();">Back</button>
<button onclick="next();">Next</button>
<button onclick="done();">Done</button>
<span id=spResult style="display:none;"><input type=text name=result></span>
</form>
</body>

</html>
Domos
12-01-2003, 11:39 AM
Thx Gollum that has set me off bigtime :)
Now, if u don't mind i have some question i can't resolve...

Here'z the script i have atm:


<html>
<HEAD>

<script language="javascript">
<!--

function autotab(original,destination){
if (original.getAttribute&&original.value.length==original.getAttribute("maxlength"))
destination.focus()
}


function validateNum()
{


// digits letters only
if ( event.srcElement.value.search(/[^0-9]/) != -1 )
{
alert("only digits in this field");
this.focus();
return false;
}

return true;
}
}

var bDone = false;

function getValue(o)
{
o.value = document.inputform.result.value.substring(document.inputform.result.value.length - o.maxLength);
document.inputform.result.value = document.inputform.result.value.substring(0,document.inputform.result.value.length - o.maxLength);
}

function back()
{
if ( bDone ) return;
<!-- fill in the values in reverse order-->
getValue(document.inputform.field3);
getValue(document.inputform.field2);
getValue(document.inputform.field1);
}

function next()
{
if ( bDone ) return;


if (
!document.inputform.field1.onchange() ||
!document.inputform.field2.onchange() ||
!document.inputform.field3.onchange() ) return;


document.inputform.result.value += document.inputform.field1.value + document.inputform.field2.value + document.inputform.field3.value;
document.inputform.field1.value = '';
document.inputform.field2.value = '';
document.inputform.field3.value = '';
}

function done()
{
bDone = true;
document.getElementById('spResult').style.display = '';
}
-->
</script>

</HEAD>
<body>

<form name=inputform>
<table>
<tr>
<td>Field 1:</td>
<td><input name=field1 type=text maxlength=1 onChange="javascript:validateNum();" onKeyUp="autotab(this, document.inputform.field2)"></td>
</tr>
<tr>
<td>Field 2:</td>
<td><input name=field2 type=text maxlength=1 onChange="javascript:validateNum();" onKeyUp="autotab(this, document.inputform.field3)"></td>
</tr>
<tr>
<td>Field 3:</td>
<td><input name=field3 type=text maxlength=1 onChange="javascript:validateNum();" onKeyUp="autotab(this, document.inputform.nextbutton)"></td>
</tr>
</table>
<input name="previousbutton" type="button" value="Previous" onClick="back();">
<input name="nextbutton" type="button" value="Next" onClick="next();">
<input name="donebutton" type="button" value="Done" onClick="done();">
<span id=spResult style="display:none;"><input type=text name=result></span>
</form>
</body>

</html>


Now this gives me some problems:

When i filled in all the field correctly and hit the next button, it gives me the 'only digits in this field' alert. I dunno what causes that.

Second, when i click previous, all data inputed is supplied correctly, but let's say, when i click next again after 2 times previous it show all fields empty, if possible they should be filled in with the data (if there is any data that is)

Hope u can help me on this matters

Thx again!
Domos
12-02-2003, 03:12 PM
*bump