Javascript onchange function does not work with PHP

Question

I wrote some code, which generates a form using PHP. I want to use javascript (line 57) to make more changes - by choosing something from dropdown menu (127 line):

If I select value "range", I want to generate two more inputs in the form, just next to the row.

This is how I want it to look like

// Javascript
$(function() {
    $("#select1").on("change",function() {
        var value = this.value;
        document.getElementById('a').innerHTML = value;
    });
});   

// HTML
<select onchange="select(this.value)" id="select1" name="type$i" size="1">
    <option value="max">Maximum the best</option>
    <option value="min">Minimum the best</option>
    <option value="range">Range</option>
</select>

Answer 1

This could be an approach if I have understood well. Hope it helps!

 $(function() { $("#select1").on("change",function() { var value = $(this).val(); if (value == "range") { $("#select2, #select3").show(); } else { $("#select2 , #select3").hide(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="select1" name="type1" size="1"> <option value="max">Maximum the best</option> <option value="min">Minimum the best</option> <option value="range">Range</option> </select> <select id="select2" name="type2" size="1" style="display:none;"> <option value="max">Maximum the best</option> <option value="min">Minimum the best</option> <option value="range">Range</option> </select> <select id="select3" name="type3" size="1" style="display:none;"> <option value="max">Maximum the best</option> <option value="min">Minimum the best</option> <option value="range">Range</option> </select> 

Answer 2

A simple example like this may help you. Without the full HTML we cannot offer better examples.

 function select(value) { if (value == "range") { $('<input>').attr({ type: 'text', id: 'foo1', name: 'bar1' }).appendTo('form'); $('<input>').attr({ type: 'text', id: 'foo2', name: 'bar2' }).appendTo('form'); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <select onchange="select(this.value)" id="select1" name="type$i" size="1"> <option value="max">Maximum the best</option> <option value="min">Minimum the best</option> <option value="range">Range</option> </select> </form>