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>

That doesn't sound too complicated, just test if(this.value==="range") displayTheTwoInputs(), something like that — Jeremy Thille
– Jeremy Thille, Commented Dec 15, 2017 at 14:13

Albeis · Accepted Answer · 2017-12-15 14:30:48Z

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>

dom_ahdigital · Accepted Answer · 2017-12-15 14:22:53Z

0

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>

answered Dec 15, 2017 at 14:22

dom_ahdigital

1,67919 silver badges37 bronze badges

Collectives™ on Stack Overflow

Javascript onchange function does not work with PHP

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest