PHP - How Do I generate new text-fields based upon a select option field value?

0
votes

How do I make a drop down box that when the value is selected it will create that many more text fields on the same form.

I have a select option field that asks "how many categories do you need? 1-6" If the user selects 3 it will on the same form create 3 new text fields asking the user to input the name of each category. If it is 6 categories then it will generate 6 text fields.

Once the submit button is clicked the data goes to the insert page and the database is updated. My problem is generating the new text fields based up on the select option value.

<select name="num_cat" onchange="document.textbox.value=this.value">
<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>
<option value="6">6</option>
</select>

<input type="text" name="textbox" id="textbox">

<?php
If $_POST[num_cat] == 1{
echo ;
}else 
?>

and that is where i get lost. In the database I have fields for Category1, Category2, etc... and these fields would be filled in by the values of the text fields generated.

If anyone has any suggestions or examples I would be very greatful. Thank You.

~G~

4
phpselecttextfieldoptiondynamically-generated

4 Answers

2
votes

Its seems like you really just need to use a loop to output the number of fields that you require.

For example:

You would have a form which would ask the user the amount of fields they need

form.php

<form action="category_form.php" method="get">
    Number of fields required:  
    <select id="num_cat" name="num_cat">
        <option value="0">0</option>
        <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>
        <option value="6">6</option>
    </select>
    <input type="submit" name="submit" value="Submit"/>
</form>

category_form.php

if(isset($_GET['submit']) && isset($_GET['num_cat'])){

    $num_of_fields = $_GET['num_cat']; //WARNING: Requires validation/sanitisation

    echo '<form method="post" action="action.php">';
    for($i=1; $i<=$num_of_fields; $i++){
        echo '<input type="text" name="category-'.$i.'" />';
    }
    echo '<input type="submit" name="submit" value="Submit"/>';
    echo '</form>';
}

HOWEVER, this would be far easier if you used JQuery to dynamically update the amount of fields as this would remove the need to refresh the page. You can do this by using the code below.

index.html

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
    <script type="text/javascript">
        //when the webpage has loaded do this
        $(document).ready(function() {  
            //if the value within the dropdown box has changed then run this code            
            $('#num_cat').change(function(){
                //get the number of fields required from the dropdown box
                var num = $('#num_cat').val();                  

                var i = 0; //integer variable for 'for' loop
                var html = ''; //string variable for html code for fields 
                //loop through to add the number of fields specified
                for (i=1;i<=num;i++) {
                    //concatinate number of fields to a variable
                    html += 'Category ' + i + ': <input type="text" name="category-' + i + '"/><br/>'; 
                }

                //insert this html code into the div with id catList
                $('#catList').html(html);
            });
        }); 
    </script>
</head>
<body>
    <form method="post" action="action.php">
        Number of fields required:      
        <select id="num_cat" name="num_cat">
            <option value="0">- SELECT -</option>
            <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>
            <option value="6">6</option>
        </select>

        <div id="catList"></div>
        <input type="submit" name="submit" value="Submit"/>
    </form>
</body>
</html>

This will then update on the fly instead of having to reload a PHP page every time to generate the fields.

Obviously you will need to add CSS code but im not doing that for you ;).

P.S. Instead of using .keyup you may want to use .change instead...

1
votes

Look into using jQuery to inject code, generated in a loop, back into your form.

1
votes

Try something like this:

<?php
if(isset($_POST[num_cat])) {
    $cats = intval($_POST[num_cat]);

    for(i=1;i>=$cats;i++) {
        echo '<input type="text" name="cat-'.i.'" />';
    }
?>

This will take the select box value and echo out a text box for x number of categories. You can wrap this in a form and then you'll be able to submit it and write the data to your database.

0
votes

Sounds like you need to think about your schema to make sure it is scalable for your purposes.

One way to do it is this way (kind of like how you have it now):

Table: messages id messagetext category1 category2 category3 category 4

This is more convenient when you have humongous data sets as it eliminates doing multiple joins. The problem is what happens when you want to have a fifth category?

Another option would be this way:

Table: messages id message text

Table: categories id categoryname

Table: messages_categories id messageID categoryID

this way you can have as many categories as you want, and you don't have to specify a category for every message.

So if you'd rather stick with your existing option, you might try calling a javascript function to add fields.

<select name="num_cat" onchange="addField(this.value)">...

function addField(num) {
  for (i=0; i<num; i++) {
    var newinput = document.createElement('text');
    /* If you use bracket notation like this (only on the name parameter), it will treat it like an array*/
    newinput.name = 'Cat[]';
  }
}

<?php

//This will now be an array you can loop over
$_POST['Cat']; 

?>