Question posted in
You can find the official documentation here.

Change Text box value based on Data list selected value – PHP – Jquery ajax

I’ve created a table with two columns ‘id’ and ‘names’ and in my PHP(html) page added data list and text area to display it, data list options are filled with ‘id’ and i want the text area to show the ‘name’ of the ‘id’ i selected in the data list.

  userid | name   |
   ----------------
    1    | name 1 |
    2    | name 2 | 
    3    | name 3 |
    4    | name 4 |

This is my part of the code –

<input list="uid" class="custom-select" id="dlist" name="dlist">
        <datalist id="uid">
        <?php
        $sql = "SELECT * FROM userdata";
        $result = mysqli_query($link, $sql);
        if (mysqli_num_rows($result) > 0) 
        {
        // output data of each row
          while($row = mysqli_fetch_assoc($result)) 
          { 
          echo'<option value="'. $row["userid"].'">';
          }
        } 
        ?>
         </datalist>
        <textarea class="form-control" id="uname" rows="4" name="uname"></textarea>

I looked up to some of the answers, some of them said to use ajax, but i’ve not gotten a good example to refer and complete my code. If this was already solved, please comment answer links.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Well, i've made it work in a very different way, i.e data-value and with the help of this answer - https://stackoverflow.com/a/48076273/14890948

    <input list="uid" class="custom-select" id="dlist" name="dlist">
        <datalist id="uid">
        <?php
        $sql = "SELECT * FROM userdata";
        $result = mysqli_query($link, $sql);
        if (mysqli_num_rows($result) > 0) 
        {
        // output data of each row
          while($row = mysqli_fetch_assoc($result)) 
          { 
          echo'<option data-value="'. $row["name"].'"value="'. $row["userid"].'">';
          }
        } 
        ?>
         </datalist>
        <textarea class="form-control" id="uname" rows="4" name="uname"></textarea>


$("#dlist").on("change", function () {
    
   var value = $('#dlist').val();
      value = $('#uid [value="' + value + '"]').data('value');
      $('#uname').val(value);
      
    });

  2. 0

    Use Ajax. But if you insist on this solution. You have to use js
    example on jQuery

        <select id="s">
      <option value="1">one</option>
      <option value="2" selected>two</option>
    </select>
    <textarea class="form-control" id="uname" rows="4" name="uname"></textarea>

<script>
$('#s').on('change', function(){ $('#uname').val( $('#s').val() ) })
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search