CODEWITHSUNDEEP
phpjqueryselectonchange
wawan Setiyawan
wawan Setiyawan

Reputation: 371

select with value in table and show onChange

I have select input with value from database, i will show other input value when select onChange.

function showModel(id) {
    if (id === "") {
        $("input[name=color]").val("");
    } else if ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
}
<select onchange='showModel(this.value)' name="model" class="form-control" required="">
  <option value="">- SELECT -</option>
  <?php
    $qry = $db->query("SELECT name_model, color FROM product ");
    while ($fet = $qry->fetch_assoc()) {
        ?>
  <option value="<?php echo $fet['name_model']; ?>"><?php echo $fet['name_model']; ?></option>
  <?php } ?>
</select>
<input type="text" value="" name="color" readonly="">

when i change select its show color data from table

Upvotes: 0

Views: 3430

Answers (5)

Rahul Patel
Rahul Patel

Reputation: 5246

Using javascript onchange function.

The filename.php is the name of the php file of your server. In php file all you have to do is get the model value by $_POST['model'] and do the DB operation and echo the color name in the response. 

function showModel(value){
  if (value === "") {
    $("input[name=color]").val("");
  } else{    
    $.ajax({
      url: 'filename.php',
      type: 'GET',
      data: 'model='+value,
      success: function(data) {
        //called when successful
        $("input[name=color]").val(data);
      },
      error: function(e) {
        //called when there is an error
        //console.log(e.message);
      }
    });
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange='showModel(this.value)' name="model" class="form-control" required="">
  <option value="">- SELECT -</option>
  <option value="1">Blue</option>
  <option value="2">Yellow</option>
  <option value="3">Red</option>
</select>
<input type="text" value="" name="color" readonly="">

Another way using jquery .on("change" event listener.

$("select[name='model']").on("change",function(){
  var selectedvalue = $(this).val();
  if (selectedvalue === "") {
    $("input[name=color]").val("");
  } else{
    $("input[name=color]").val(selectedvalue);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="model" class="form-control" required="">
  <option value="">- SELECT -</option>
  <option value="1">Blue</option>
  <option value="2">Yellow</option>
  <option value="3">Red</option>
</select>
<input type="text" value="" name="color" readonly="">

Upvotes: 0

SKJ
SKJ

Reputation: 2326

I dunno if i'm right but it work ! ;-)

$('select[name=model]').on('change', function() {
  var valModel = $(this).val();
  if (valModel != "- SELECT -") {
    $("input[name=color]").val(valModel);
  } else {
    $("input[name=color]").val("");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="model" class="form-control" required="">
    <option>- SELECT -</option>
    <option value="Model_1">Model_1</option> 
    <option value="Model_2">Model_2</option> 
    <option value="Model_3">Model_3</option> 
</select>
<input type="text" value="" name="color" readonly="">

Upvotes: 0

Marcos Alexandre Sedrez
Marcos Alexandre Sedrez

Reputation: 537

No IF. It's the same result:

function showModel(id){
  $("input[name=color]").val(id);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select onchange='showModel(this.value)' name="model" class="form-control" required="">
    <option value="">- SELECT -</option>
    <option value="123">123</option>
    <option value="321">321</option> 
</select>
<input type="text" value="" name="color" readonly="">

Upvotes: 0

Jameson the dog
Jameson the dog

Reputation: 1806

since showModel actually gets the value from the onchange, and the value can be empty ('') all you need is this:

function showModel(id){
      $("input[name=color]").val(id);
}

Upvotes: 1

Phiter
Phiter

Reputation: 14982

Instead of setting the option value to name_model, set it to color instead. Then it should work as expected.

<option value="<?php echo $fet['color']; ?>"><?php echo $fet['name_model']; ?></option>

Your script is missing the else part.

function showModel(id){
    if (id === "") {
        $("input[name=color]").val("");
    } else {
        $("input[name=color]").val(id);            
    }
}

Upvotes: 1

Related Questions