Show select dependent on input

Question

Show select dependent on input

Navigation

#1 by (1 votes)

-1

I have a form where I want that when typing an item number in an input, the description belonging to that item appears in a select.

The item and the description are from a table in MySQL.

I've been researching and I only see solutions in reverse.

This is the code I have so far:

<script>
window.onload = function(){
    document.getElementById('ITEM').onchange = function(){
        var c = document.getElementById('ITEM').value;
        document.getElementById('DESCRIPCION').innerHTML = c;
        }
    }
</script>

<form>
<tr>
    <td width="100" align="right"><font face="arial" size="-1"><b>ITEM</b></font></td>
    <td><input type="number" name="ITEM" id="ITEM" style="width:100px;" autocomplete="off" value="<?php echo $fila['ITEM']; ?>"/></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td rowspan="3"><textarea name="DESCRIPCION" id="DESCRIPCION" cols="45" rows="3" style="width:350px;" readonly="readonly"><?php echo $fila['DESCRIPCION']; ?></textarea></td>
  </tr>
  <tr>
     <td width="100" align="right"><font face="arial" size="-1"><b>DESCRIPCION</b></font></td>
  </tr>


<form>

mysql javascript html php

asked by Anderviver 25.05.2017 в 16:34

source

1 answer

What does ByTagName return in the following cases? I can not use the 'fs' module, in windows

score 1 · Accepted Answer

I suggest that the description show it in a textarea, the select is used so that the user can choose between several options.

This script will help you understand, JQuery is used to create a change event on the input, the event gets the description according to the number entered and loads it into the textarea.

Of course it's a basic example, you have to implement validations.

Greetings,

var data = [{
  numero: 1,
  descripcion: "uno"
}];

$("#txtNumero").change(function () {
	var value = this.value;
    var descripcion = data.filter(function (record) {
		return (record.numero == value);
	});
    
    $("#tarDescripcion").val(descripcion[0].descripcion);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<input id="txtNumero" name="txtNumero">
<textarea id="tarDescripcion"></textarea>