...

View Full Version : Change a form based on previous input



bfinke
05-07-2009, 01:20 AM
I was wondering if it's possible to make it so that once a user selects a certain option in a list, it makes the next input for that form change to either a textfield or a list without losing the values entered in the inputs above.

I know PHP is a server-side script, does that make this not possible?

Thanks.

adios
05-07-2009, 01:35 AM
I know PHP is a server-side script, does that make this not possible?
Huh? How does PHP enter into this?

Please give a better description so we may help you bfinke.

bfinke
05-07-2009, 02:18 AM
sorry, let me clarify. I didn't mean to include that note about PHP -I moved it from the php forum to this thread upon another's suggestion.

I have a form:


Your Name: TEXTFIELD
Your Lunch: LIST(hamburger, hotdog)


Now, I if the user selects 'hamburger', I want the following input to appear:


Describe How You Like It Cooked: TEXTFIELD

But, if the user selects 'hotdog', I want the following input to appear:


What Condiment: LIST(Ketchup, Mustard)

So basically I want to instantly create an input in a form based on a previous input's select WITHOUT losing the information entered in the previous inputs. In other words, keep the guys name and lunch selection but based on what he chooses as his lunch, change the third option to either a textfield or a list.

Is this possible? I'm pretyy good with PHP but no nothing about AJAX and just a little about java.

Hope that clarifies, thanks!

adios
05-07-2009, 09:43 AM
This is pretty rough but it might help.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>untitled</title>
<style type="text/css">
#container {
width: 360px;
margin: 60px;
text-align: right;
background: #ffffff;
border: 1px #000000 solid;
}
div.inpane, div.outpane {
background: #e0e0e0;
border: 1px #000000 dashed;
padding: 12px;
margin: 6px;
font: normal 11px verdana;
}
div.inpane {
position: relative;
display: block;
}
div.outpane {
position: relative;
display: none;
}
select {
width: 146px;
}
input.rad, input.box {
position: relative;
top: 3px;
}
</style>
<script type="text/javascript">

function Pane(control_id, pane_id, val)
{
this.div = document.getElementById(pane_id);
this.control = document.getElementById(control_id);
this.val = val;
var obj = this;
switch (this.control.type)
{
case 'select-one' :
this.handler = function()
{
if (obj.control.value == obj.val)
{
obj.div.className = 'inpane';
var ipts = obj.div.getElementsByTagName('input');
for (var i = 0, done = false; i < ipts.length; i++)
{
ipts[i].disabled = false;
if (!done && ipts[i].type.match('text'))
{
ipts[i].focus();
done = true;
}
}
var sels = obj.div.getElementsByTagName('select');
for (i = 0; i < sels.length; i++)
{
sels[i].disabled = false;
}
}
else
{
obj.div.className = 'outpane';
var ipts = obj.div.getElementsByTagName('input');
for (i = 0; i < ipts.length; i++)
{
ipts[i].disabled = true;
}
var sels = obj.div.getElementsByTagName('select');
for (i = 0; i < sels.length; i++)
{
sels[i].disabled = true;
}
}
}
addListener(this.control, 'change', this.handler);
break;
case 'radio' :
case 'checkbox' :
this.handler = function()
{
if (obj.control.checked && obj.control.value == obj.val)
{
obj.div.className = 'inpane';
var ipts = obj.div.getElementsByTagName('input');
for (var i = 0; i < ipts.length; i++)
{
ipts[i].disabled = false;
}
var sels = obj.div.getElementsByTagName('select');
for (i = 0; i < sels.length; i++)
{
sels[i].disabled = false;
}
}
else
{
obj.div.className = 'outpane';
var ipts = obj.div.getElementsByTagName('input');
for (i = 0; i < ipts.length; i++)
{
ipts[i].disabled = true;
}
var sels = obj.div.getElementsByTagName('select');
for (i = 0; i < sels.length; i++)
{
sels[i].disabled = true;
}
}
}
var rad, r = 0;
var grp = this.control.form.elements[this.control.name];
while (rad = grp[r++])
{
addListener(rad, 'click', this.handler);
}
}
}

function addListener(obj, evt, handler)
{
if (obj.addEventListener)
{
obj.addEventListener(evt, handler, false);
}
else if (obj.attachEvent)
{
obj.attachEvent('on' + evt, handler);
}
}

function init()
{
new Pane('lunch', 'cooked', 'hamburger');
new Pane('lunch', 'condiment', 'hotdog');
new Pane('whoa', 'size', 'whoa');
new Pane('head', 'foo', 'head');
}

addListener(window, 'load', init);

</script>
</head>
<body>
<form id="food" action="">
<div id="container">
<div id="name" class="inpane">
Your Name:&nbsp;<input type="text" name="name" size="20" />
</div>
<div class="inpane">
Your lunch:&nbsp;
<select id="lunch" name="lunch">
<option value="">lunch</option>
<option value=""></option>
<option value="hamburger">Hamburger</option>
<option value="hotdog">Hot Dog</option>
</select>
</div>
<div id="cooked" class="outpane">
Describe How You Like It Cooked:&nbsp;<input type="text" name="how_cooked" size="20" disabled="disabled" />
</div>
<div id="condiment" class="outpane">
What condiment?&nbsp;
<select name="condiment" disabled="disabled">
<option value="">condiment</option>
<option value=""></option>
<option value="ketchup">Ketchup</option>
<option value="mustard">Mustard</option>
</select>
</div>
<div id="feet" class="inpane">
My feet are
<input class="rad" name="feet" type="radio" value="big" />big
<input class="rad" name="feet" type="radio" value="realbig" />really big
<input class="rad" id="whoa" name="feet" type="radio" value="whoa" />whoa
</div>
<div id="size" class="outpane">
<select name="size" style="width:300px;" disabled="disabled">
<option value="">like ... how big?</option>
<option value=""></option>
<option value="size_12">Size 12</option>
<option value="size_16">Size 16</option>
<option value="illegal">Fuggedaboutit.</option>
</select>
</div>
<div id="cheese" class="inpane">
My favorite cheeses is
<input class="box" name="cheese" type="checkbox" value="swiss" />Swiss
<input class="box" name="cheese" type="checkbox" value="mozzarella" />mozzarella
<input class="box" id="head" name="cheese" type="checkbox" value="head" />head
</div>
<div id="foo" class="outpane">
<select name="taste" disabled="disabled">
<option value="">Yech.</option>
<option value=""></option>
<option value="ugly">Ugly.</option>
<option value="bad">Bad.</option>
<option value="illegal">Fuggedaboutit.</option>
</select>
</div>
<div id="cheese" class="inpane">
<input type="submit" value="DONE" />
</div>
</div>
</form>
</body>
</html>

The constructor (Pane) takes three arguments: the id of the control element which toggles display, the id of the pane (div) which is in or out, and the value of the form control which causes the pane to display - or not. I'll probably add a few lines when I get the chance to disable the undisplayed form elements, as they really shouldn't be part of the submission.

Event listeners (IE: attachers!) allow multiple assignments without overwriting.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum