?
Solved

Dynamic List

Posted on 2006-11-02
7
Medium Priority
?
215 Views
Last Modified: 2007-12-19
I'm setting up a form that requires some user input. One piece of information I'm trying to collect is a dynamic list. The question is, "How many links do you want to display?". This is a <select> box that lets a user choose a value from 1-5. When that user selects a number, I want that many input fields to show up below. How can I accomplish this?

<label>How many links do you want to display?</label>
<select name="kb_num_links">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
</select>
0
Comment
Question by:DVation191
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
7 Comments
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17859673
DVation191,

You posted this in the PHP topic area so will the input fields appear on the next page and you want the server (i.e. PHP) to do this?  If the inputs should dynamically appear below this select list on the same page then you will need to use JavaScript or another client side script.  Before I post an example it would be nice to have this clarified.  Thanks!

Let me know if you have any questions or need more information.

b0lsc0tt
0
 
LVL 20

Author Comment

by:DVation191
ID: 17859765
Maybe it was a mistake posting this in the PHP forum, maybe it should have been in the javascript forum.

The form is being submitted to a mysql database using php. I want the input fields to appear below the select field on the same page so that when the form is submitted I can capture all the input fields and input them into the mysql database. The form is working right now, I just need to add this one question that has variable answers and I'm not sure of the best way to accomplish it.
0
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 2000 total points
ID: 17859925
I haven't tested this code so let me know if it doesn't work the first time.  Make a div in the area where you want to insert the input fields and give it an id of inputDiv.  For example ...

<div id="inputDiv"></div>

This is where we will insert the input fields using innerHTML and Javascript.  Now add an onselect event to the select element to call the function makeInput.  It will pass the value to that function.  Something like this ...

<select name="kb_num_links" onselect="makeInput(this.value); return false;">

Now add the function below to the head section of your page.  If you don't already have script in that section then surround it with the script tags below, otherwise you can omit those.

<script type="text/javascript">
<!--
function makeInput(num) {
    var str = "";
    for (var i=1; i<=num; i++) {
        str = "Link " + i + ":";
        str += '<input type="text" name="link' + i + '"><br>';
    }
    document.getElementById("inputDiv").innerHTML = str;
}
//-->
</script>

Let me know how this works.  If it doesn't check for Javascript errors or look at the HTML source (generated source).
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 20

Author Comment

by:DVation191
ID: 17859989
I had to change onselect to onchange, then it worked. However it only shows one input at a time. I was hoping that if you selected "3", that 3 input fields would appear.
0
 
LVL 54

Assisted Solution

by:b0lsc0tt
b0lsc0tt earned 2000 total points
ID: 17860006
My mistake.  DOH!  I am resetting str in the loop.  Use the line below instead of the first line in the loop.  I added the +.

        str += "Link " + i + ":";

Let me know how that works.
0
 
LVL 20

Author Comment

by:DVation191
ID: 17860634
Perfect! Thank you so much.
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 17860663
Your welcome!  I'm glad that I could help you.  Thank you for the grade, the points and the fun question.

bol
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this. Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it i…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question