?
Solved

Dynamic List

Posted on 2006-11-02
7
Medium Priority
?
214 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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

Independent Software Vendors: 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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

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