Solved

Dynamic List

Posted on 2006-11-02
7
208 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
  • 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 500 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
Easy Project Management (No User Manual Required)

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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 500 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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

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 is …
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

762 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now