/    Sign up×
Community /Pin to ProfileBookmark

Dynamic Form: Add Fields Dynamically

Hello All!

I have a javascript task, and since I am not very good with
javascript, it seems I need help from the very start.
What I would ultimately like to do is create a form that,
depending on a chose select option, different text input fields
would appear.
Now, like I said, starting from the beginning, I have
problems. I can create the select field, but the onChange()
event is not working.
Here is what I have so far:

<html>
<head>
<script language=”javascript”>
function popForm()
{
alert(‘here’);
value=document.myForm.specialtype[document.myForm.specialtype.selectedIndex].value
document.write(‘here’);
if(value == “DiscountbyAmount”)
{
document.write(“DiscountbyAmount”);
alert(value);
}
}
</script>
</head>
<body>
<br><br>
<form method=”post” name=”myForm” onChange=”popForm();”>
<select name=”specialtype”>
<option value=0>Choose</option>
<option value=”DiscountbyAmount”>Discount by Amount</option>
<option value=”DiscountbyQty”>Discount by Qty</option>
<option value=”Discount”>Discount</option>
<option value=”FreeItem”>Free Item</option>
<option value=”ProdFree”>Free Item Depending on Item(s) Bought</option>
<option value=”JustAdvertise”>Just Advertise a Sale</option>
</select>
</form>
</body>
</html>

None of the dubugging alert();s or document.write();s are working. I have no idea what the problem is!! ?

Any ideas on how I can either fix what I have so far or meet my ultimate goal would be great. I have searched this forum on ways to create dynamic form fields, but none seems to give me enough info to figure it out. (remember, no real JS skills!!)

Thanks so much!
Christine ?

to post a comment
JavaScript

7 Comments(s)

Copy linkTweet thisAlerts:
@buntineJan 28.2004 — The onchange event attribute should be placed in the <select> element rather than the <form> element.
Copy linkTweet thisAlerts:
@cmviaauthorJan 28.2004 — Sometime you do things that just make you feel like a dumb***! :rolleyes:

Thanks for pointing out the obvious, that I obviously couldn't see!!!! ?

Anyone have ideas for the dynamic part?

Thanks!!!

Christine?
Copy linkTweet thisAlerts:
@buntineJan 28.2004 — Hmm.

You could make a bunch of text input fields called 'text_one', 'text_two' and so on, and set them to invisible using the CSS attribute 'visibility: hidden;'.

Then, you could make certain text fields visible depending on which option was selected.

Small example:
[code=php]
if (value == "DiscoundbyAmount") {
document.getElementsByName("text_one")[0].style.visibility = "visible";
document.getElementsByName("text_two")[0].style.visibility = "visible";
} else if (value == "DiscoundbyQty") {
document.getElementsByName("text_three")[0].style.visibility = "visible";
document.getElementsByName("text_four")[0].style.visibility = "visible";
}
[/code]
Copy linkTweet thisAlerts:
@cmviaauthorJan 28.2004 — This may be a stupid question, but how do you create an field, but have it be invisible?

Thanks!
Copy linkTweet thisAlerts:
@buntineJan 28.2004 — What do u mean by 'create an field'?

To make an object invisible you have to use some CSS (Cascading Style Sheets).

example:
[CODE]
<div style="visibility: hidden;">Hello</div>
[/CODE]


This <div> element will not be shown on the screen.
Copy linkTweet thisAlerts:
@cmviaauthorJan 28.2004 — Actually that seems to solve it. Again, with the lack of knowledge, the <div...hidden> statement was beyond my grasp.

This seems like it will help and work!

Thanks!

Christine?
Copy linkTweet thisAlerts:
@buntineJan 28.2004 — Thats ok. Glad to help.
×

Success!

Help @cmvia 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.18,
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,
)...