Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 221
  • Last Modified:

Dynamic List

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
DVation191
Asked:
DVation191
  • 4
  • 3
2 Solutions
 
b0lsc0ttIT ManagerCommented:
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
 
DVation191Author Commented:
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
 
b0lsc0ttIT ManagerCommented:
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
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
DVation191Author Commented:
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
 
b0lsc0ttIT ManagerCommented:
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
 
DVation191Author Commented:
Perfect! Thank you so much.
0
 
b0lsc0ttIT ManagerCommented:
Your welcome!  I'm glad that I could help you.  Thank you for the grade, the points and the fun question.

bol
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now