We help IT Professionals succeed at work.

How can a web form drop-down list spawn a text field?

nick2253
nick2253 asked
on
Medium Priority
398 Views
Last Modified: 2013-11-19
I am currently running a website that has an application form that gets submitted via email via PHP.  I would like to add to this form a drop down list that, depending on the choice in the list, will spawn new text fields.  For example, the drop down might list:

Your favorite food:
          Hot Dog
          Pizza
          Salad

If the user selects "Salad", it would spawn a text field like "Your favorite dressing", letting the user type in their favorite dressing.  If the user selects "Pizza" it would spawn three text fields like "Most favorite topping", "Second favorite topping", and "Most hated topping", where the user would type in the toppings as applicable.

I would like to be able to do this in JavaScript or in PHP.  I do not want to have to install another language on my server.  (Obviously HTML can be used.)

Also, I am pretty sure I can figure the submission for the fields out on my own (since I do it already for the other fields).  My question really is getting this "if-then" behavior implemented.

Thanks,
Nick
Comment
Watch Question

Most Valuable Expert 2011
Author of the Year 2014

Commented:
This is typically an AJAX application, however if you have fairly static fields, you might try it with just HTML and CSS.  Look into using jQuery - it will probably be the lightest weight solution.  Best, ~Ray
System Architect, CF programmer
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT

Commented:
This site has a good writeup on doing with Javascript and DHTML
http://www.daniweb.com/forums/thread142757.html#

What is basically does is when you put an onchange button, you can call a function like the one below to dynamically enter a row into the HTML.

You would have to do some prep-work to define the area you want it inserted

function generateRow() {
 
var d=document.getElementById("div");
d.innerHTML+="<p><input type='text' name='food'>";
 
}

in the code below, was copied from the above URL

The getElementById("div") tells HTML to look in the HTML code and put the text in there
<body>
<form id="form1" name="form1" method="post" action="">
<label>
<input name="food" type="text" id="food" />
</label>
<p>
<input name="food" type="text" id="food" />
</p>
<p>
<input name="food" type="text" id="food" />
</p>
<div id="div"></div>
<p><input type="button" value="Add" onclick="generateRow()"/></p>
<p>
<label>
<input type="submit" name="Submit" value="Submit" />
</label>

Open in new window

Author

Commented:
Thank so much for your prompt answer!  It was thorough, and was spaced well so it was easy enough for me to understand.  I have been able to adapt your solution to fit my exact problem perfectly.
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.