Session + losing field values on page refresh

[citizenzen]

I'm creating a multi-page form using Sessions, PHP and a touch of javascript.

The first form is a pull-down that (using Javascript) dynamically sets a variable in the url which determines (using PHP) what field appears below it.

Below that short form is a second form with contact information.

I get the info to pass through all my pages correctly. At my confirmation page you can edit the section above and when you get to the page all the info is in place. Cool.

But, if you choose that dang pull-down menu and the page refreshes (as the URL changes) all my form fields go blank!

Here's a sketch of the page...

<session starts>

<form1>
• pull-down dynamically sets URL (self.location)
• variable form field based on selection above
</form>

<form2>
• contact info fields (go blank when pull-down changes URL)
</form>

Any thoughts on what I need to look into?

 

[SrWebDeveloper]

But, if you choose that dang pull-down menu and the page refreshes (as the URL changes) all my form fields go blank!

NEED CODE but to get to the heart of the matter:

Self.location is a redirect, not a form submit, so all your fields will go blank, of course. When it comes to dynamically changing form fields based on an onChange or other event, there are many ways, i.e. to name a few (and all this happens BEFORE the submit and WITHOUT any redirect):

• Put each dynamic form in a div, hide all but the "default" one using CSS (display: none) - the pulldown onChange calls a function which unhides/hides the div's to show the appropriate form to the user.
• Similar to above, but use Javascript DOM/HTML techniques to insert form objects (fields, form elements) dynamically where you want them - i.e. create the HTML "in place"
• Use Ajax to populate a div with form templates stored on the server or PHP to render such form elements.

These are just a few "common" examples of many methods, but the key point I'm making is the form is changed "in place" before any submit and no need for redirect.

We might be able to help you fix your code, but the method itself that you're using is what I question, based on your description thus far.

-jim

 

[citizenzen]

Thanks! I'll try to implement the show/hide function you talked about. I appreciate the helpful hint!

 

[citizenzen]

Okay... I found a nice little show/hide function, but it too has some problems.

Here's what I'm trying to do...

I need to get an account number, but there are a variety for formats.

• Account Type X: xxx-xxx-xxx
• Account Type Y: yy-yyy-yy
• Account Type Z: z-zzz

The easiest thing to do would be to create a single text input called "accountNumber", but I've been asked to create a sequence of text inputs specifically tailored to the type of account number required.

For instance, Type X would be three text inputs with a maxlength of 3 each. Type Z would be two text inputs, the first with a maxlength of one and the second with a maxlength of three.

I want the customer to select with a dropdown menu the Account Type (x,y, or z) and then depending on their selection have the appropriate form fields appear below.

Appending the URL works fine except for the data disappearing on page refresh. So long as the page doesn't refresh the data flows through my multipage form correctly.

The show/hide method doesn't erase my data on refresh, however, it doesn't give me the right results. If I first enter data for X and go back later to edit it and change it to Y the Session retains the values I first entered (X).

Any ideas where to look for a solution? I'm beginning to think that a single field that validates differently depending on the Account Type chosen might be the best way to go. But I'd like to find a way to please my boss first... if I can.

 

[SrWebDeveloper]

I'm beginning to think that a single field that validates differently depending on the Account Type chosen might be the best way to go

Is there any other way than that? You answered your own question - and it takes a little extra work to dynamically produce the validation script that corresponds to the dynamic form elements, sure, but that's the correct approach. I'd take it a step further and also server side validate dynamically after submit so no dependency on Javascript for purposes of validation.

Your original method of setting a URL argument based on the pulldown menu onChange event, then processing the script server side (which generates the proper forms and Javascript) - just make it submit instead of redirect so you can preserve form field values.

-jim

 

[citizenzen]

Is there any other way than that?

Well... other than the fact that the client wants to see input fields that correspond with the specific account number required.

I'm getting closer to a solution. Thanks for the tips!

 

[angelwatt]

How about one field, that can take on different formats? I have a masked input script that could work for you in this case. You'd give it an initial format for the default account type. Then, if they change the drop down box, you can adjust the format of the field.

Here's an example implementation including handling the changing of the format. You'll of course still want to validate the entry server-side since JavaScript can be disabled.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Test page</title>
<script type="text/javascript" src="masked_input_1.1.js"></script>
<script type="text/javascript">

var inputAcct;
var acctFormats = {
	x: '___-___-___',
	y: '__-___-__',
	z: '_-___'
};

function Init() {
	inputAcct = MaskedInput({
		elm: document.getElementById('account'),
		format: '___-___-___',
	});
	document.getElementById('acctType').onchange = function() {
		changeFormat(this.value);
	}
}
function changeFormat(a) {
	inputAcct.setFormat(acctFormats[a]);
}

function appendOnLoad(fx){
	try { // For browsers that know DOMContentLoaded (FF, Safari, Opera)
		document.addEventListener("DOMContentLoaded", fx, false);
	} 
	catch (e) { // IE
		window.attachEvent('onload', fx);
	}
}
appendOnLoad(Init);
</script>
</head>
<body>

<select name="acctType" id="acctType">
	<option value="x">Type X</option>
	<option value="y">Type Y</option>
	<option value="z">Type Z</option>
</select>
<input type="text" name="account" id="account" />

</body>
</html>

 

[SrWebDeveloper]

Well... other than the fact that the client wants to see input fields that correspond with the specific account number required.

I took your comment "a single field that validates differently depending on the Account Type" to mean a dynamic form field as well as dynamic corresponding validation (both client and server side). That's what I'm getting at in terms of overall design concept - and to keep your client happy. We agree on this and are saying essentially the same thing, from what I can tell.

Now, the next step, i.e. implementation, angelwatt posted some nice code which helps create a dynamic account number field to get you started via JS. Your pulldown menu will determine the value passed to that function, then write corresponding validation. Or, you may decide to hard code each part of the account number in small input text fields if you don't want to rely on Javascript and still want to control the number of digits, dashes, etc.

Crude, Over-Simplified Examples of what I mean by that option:

<div id="account_type_A">
Your SSN: <input type='text' size='3' maxlength='3' name='ssn1'> - 
<input type='text' size='2' maxlength='2' name='ssn2'> -
<input type='text' size='4' maxlength='4' name='ssn3'>
</div>

<div id="account_type_B">
Your TIN: <input type='text' size='12' maxlength='12' name='tin'>  
</div>

Your pull down determines which account type, A or B, and displays the proper form as I discussed in an earlier reply listing 3 methods to do so.

-jim