/    Sign up×
Community /Pin to ProfileBookmark

Dynamically Populating HTML Forms

Copy linkTweet thisAlerts:
Jun 16.2003

I have a long form that I would like to shorten for users. For example, if they check the box “Military Service” using an on_click event, the HTML code would then populate the form at the point of the function, rather than having that code appear if it’s not needed. I’ve seen it done, but haven’t attempted it before.
Can someone point me in the right direction? I greatly appreciate it.

Mark F

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@nicoJun 16.2003 — maybe this helps:[URL=http://developer.apple.com/internet/javascript/dynamicforms.html]http://developer.apple.com/internet/javascript/dynamicforms.html[/URL]
Copy linkTweet thisAlerts:
@AdamGundryJun 16.2003 — I believe this is normally done by making an element containing the form controls you want to hide invisible, using the CSS "display: none", then making it visible when required. Make sure you set change the value of the CSS with Javascript, so users with JS disabled can still use the form.

Adam
Copy linkTweet thisAlerts:
@GollumJun 16.2003 — quite a broad question, but here are a few tips...

you will want to add an onclick handler to your checkbox...

<form name=myForm>

<input type=checkbox name=service value="military" onclick="FillFormMilitary();">Military Service

</form>

then you can write code to do whatever you like to the form...

<script language="Javascript">

function FillFormMilitary()

{

// change a text box...

document.myform.preferredWeapon.value = "M16";

// change a checkbox...

document.myForm.tourOfDuty.checked = true;

// change a combo...

document.myForm.rank.selectedIndex = 3;

}

</script>
×

Success!

Help @Force 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 6.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...