/    Sign up×
Community /Pin to ProfileBookmark

Forms–Active / Dynamic / Shifting?

Copy linkTweet thisAlerts:
Aug 03.2005

Does anyone know how to create forms that change based on form inputs? For example, certain parts of the form are hidden until a certain box is checked and then the previously hidden part of the form expands so that the user can fill it out. Does anyone know how to do this or what these types of forms these are called? I am basically trying to finish a checkout page where I would like a series of inputs for the user’s “billing address” to appear if the user unchecks the box marked “Billing address same as shipping address.”

Thanks for your help, Bill

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@Jonny_LangAug 03.2005 — EDITED, to correct an error.

[CODE]<HTML>
<Head>
<Script Language=JavaScript>

function xferData(isForm,isState){

if (isState)
{
isForm.shipAddress.value = isForm.billAddress.value;
isForm.shipCity.value = isForm.billCity.value
isForm.shipState.selectedIndex = isForm.billState.selectedIndex;
isForm.shipZip.selectedIndex = isForm.billZip.selectedIndex;
isForm.shipBox.checked = isForm.billBox.checked;
document.getElementById('sameInfo').style.display = 'inline';
isForm.shipAddress.disabled = false;
isForm.shipCity.disabled = false;
isForm.shipState.disabled = false;
isForm.shipZip.disabled = false;
isForm.shipBox.disabled = false;
}
else {
isForm.shipAddress.value = "";
isForm.shipCity.value = "";
isForm.shipState.selectedIndex = 0;
isForm.shipZip.selectedIndex = 0;
isForm.shipBox.checked = false;
document.getElementById('sameInfo').style.display = 'none';
isForm.shipAddress.disabled = true;
isForm.shipCity.disabled = true;
isForm.shipState.disabled = true;
isForm.shipZip.disabled = true;
isForm.shipBox.disabled = true;
}
}

</Script>
</Head>
<Body>
<Form name='Form1'>
Bill To:<br>
Address: <input type=text size=15 name='billAddress' ><br>
City: <input type=text size=15 name='billCity'><br>
State:
<Select name='billState'>
<option selected value=''> Make a Selection</option>
<option value='California'> California </option>
<option value='Texa'> Texas </option>
</Select>
<br>
Zip: <Select name='billZip'>
<option selected value='0'>Make a Selection</option>
<option value='12345'> 12345 </option>
<option value='14523'> 14523 </option>
</Select><br>
<br>
Some box: <input type=checkbox name='billBox'>
<br>
<br>
Shipping Address Same As Billing Address? <input type=checkbox onclick="xferData(this.form,this.checked)">
<br>
<br>
<Div id='sameInfo' style='display:none'>
Ship To:<br>
Address: <input type=text size=15 name='shipAddress' disabled><br>
City: <input type=text size=15 name='shipCity' disabled><br>
State:
<Select name='shipState' disabled>
<option selected value=''>Make a Selection</option>
<option value='California'> California </option>
<option value='Texa'> Texas </option>
</Select><br>
Zip: <Select name='shipZip' disabled>
<option selected value='0'>Make a Selection</option>
<option value='12345'> 12345 </option>
<option value='14523'> 14523 </option>
</Select>
<br>
Some box: <input type=checkbox name='shipBox' disabled>
</Div>
</Form>
</Body>
</HTML>[/CODE]
Copy linkTweet thisAlerts:
@billpilgrim2000authorAug 03.2005 — Thanks a lot. It works great!
Copy linkTweet thisAlerts:
@Jonny_LangAug 03.2005 — You're welcome.
Copy linkTweet thisAlerts:
@MstrBobAug 04.2005 — It is best if you have the form elements enabled in the HTML. Then, call a quick check onload to disable certain elements until needed. This has the benefit that users with Javascript enabled will still be able to use the form fully.
×

Success!

Help @billpilgrim2000 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...