PHP - How to add fields on changing value in Dropdown in same page?

Question

I was working on php script & Html.. some thing like in this website http://swatteam.mania-craft.fr/training/

Here, you can see in the label,

Members that participated (select the number, then the names) + Evaluation

There is a dropdown button. If I select 1, it shows few fields. If I select 4 or 5, it shows 4 or 5 more fields. I'm stuck making that. Can you help me? I mean, how to add those fields when I change the number in dropdown?

Also, how should I add more lines in the textbox after I change the value to 5 (Members that participated (select the number, then the names) + Evaluation Label) when I click

Generate the Code Button?

Like, I filled up the following lines, http://i.stack.imgur.com/RNOO9.png

and I get the code as: http://i.stack.imgur.com/XneZs.png How to do it?

I know how to customize the bbc tags, but, how to add them to another page named submit.php Do I need to use $_POST or $_SESSION? Or, I need to use java script to add those lines to textarea?

Answer 1

1. The following is the working simple example of adding text inputs according to selected option value (assuming it's an integer number): http://jsfiddle.net/45vsf519/2/ You didn't mention if you want it in vanilla JS so be it in jQuery for its simplicity.

HTML

<select id="example" name="example">
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div id="inputs">
</div>

jQuery

$(document).ready(function () {
    // Initiate default
    var example = $('#example');
    var inputs = $('#inputs');
    var optNum = parseInt(example.val());
    for (var i = 1; i <= optNum; ++i) {
        inputs.append('<input name="member' + i + '" type="text" /><br />');
    }
    // Adding text fields on select change
    example.change(function () {
        inputs.empty();
        var optNum = parseInt($(this).val());
        for (var i = 1; i <= optNum; ++i) {
            inputs.append('<input name="member' + i + '" type="text" /><br />');
        }
    });
});

2. If you were checking with "Net" tab in Firebug or network tool in other browser, you would see that clicking on "Generate the code" leads to submitting a POST request to server. The HTML with its textarea filled by content is a response from the server.

So you may generate this textarea server-side by submitting an HTTP request to some valid URI. This implies that the web server should resolve the URI to some server-side code (PHP or whatever it may be) for processing POST (or GET) parameters and generating HTML that the web server should send in its response to the browser.

Or, if you don't want to process this action server-side (and, for example, log it in a database), you may generate this HTML with Javascript only. This implies that you have significantly more client-side Javascript logic, that may be relatively complex if you're not familiar with Single Page Application (SPA) techniques.

IMHO, it's up to you to choose whether make it with requesting a server or pure client-side.