¿Cómo se usa Javascript para rellenar un campo de texto con datos basados en un cuadro de selección?

Conozco una buena cantidad de PHP, pero sé muy poco de Javascript.¿Cómo se usa Javascript para rellenar un campo de texto con datos basados en un cuadro de selección?

Básicamente, lo que quiero es:

Si un usuario selecciona el elemento x de un cuadro de selección formulario HTML, entonces el texto descriptivo para el artículo x poblará de auto una caja de texto de entrada formulario HTML debajo de ella.

¿Alguien tiene una muestra de trabajo que puedo usar o editar para poder hacer lo que necesito?

Fuente

2009-09-21 Citizen

Vamos a ser más clara. Ambos campos son parte de la misma forma. Antes de enviar el formulario, si el usuario selecciona un elemento del cuadro de selección, rellenará el campo de texto para ellos, utilizando el texto que está asociado con el elemento seleccionado. Por ejemplo, el usuario selecciona "azul" como su color favorito en el cuadro de selección. Al instante, el campo de texto de abajo se completa con la frase "Puede que le guste el color del cielo". Espero que esto tenga sentido. – Citizen

Ryan, ¿dónde se encuentra el texto "Te puede gustar el color del cielo"? –

Aquí es una copia de trabajo en la llanura JavaScript sin utilizar bibliotecas:

<script type="text/javascript"> 
    // Pre populated array of data 
    var myData = new Array(); 
    myData[1] = 'Some text'; 
    myData[2] = 'Some other text'; 
</script>  
<form id="example" name="example"> 
     <select id="selector" name="selector"> 
      <option value="" selected></option> 
      <option value=1>One</option> 
      <option value=2>Two</option> 
     </select> 
     <br /> 
     <input type="text" value="" id="populateme" name="populateme" /> 
    </form> 

    <script type="text/javascript"> 
     document.example.selector.onchange = updateText; 

     function updateText() { 
      var obj_sel = document.example.selector; 
      document.example.populateme.value = myData[obj_sel.value]; 
    } 
    </script>

Fuente

2009-09-21 22:33:50

¿De dónde saca el texto? El texto con el que necesita rellenar el cuadro de texto no está en el cuadro de selección. Consulte mi comentario anterior. – Citizen

Lamento haber enviado esto antes de su comentario agregado. su formulario/página aún no tiene el texto que desea actualizar el cuadro de texto, necesitará hacer algunas llamadas Ajax para obtener esa información. Tal vez deba publicar su formulario para ayudar a aclarar este problema, porque con su pregunta y comentario No puedo entender exactamente lo que estás buscando. –

Puedo poner el texto en la página antes de tiempo. Supongo que los pondré en orden. – Citizen

Basado en el ejemplo de la http://w3schools.com/js/tryit.asp?filename=tryjs_putmore

<html> 
<head> 
<script type="text/javascript"> 
function moveNumbers() 
{ 
var no=document.getElementById("no"); 
var option=no.options[no.selectedIndex].text; 
document.getElementById("result").value=option; 
} 
</script> 
</head> 

<body> 
<form> 
Select numbers:<br /> 
<select id="no" onchange="moveNumbers()"> 
    <option>0</option> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    <option>7</option> 
    <option>8</option> 
    <option>9</option> 
</select> 
<input type="text" id="result" size="20"> 
</form> 
</body>

Ver http://w3schools.com/htmldom/dom_obj_select.asp y http://w3schools.com/htmldom/dom_events.asp para obtener más información.

Fuente

2009-09-21 22:22:25 jrummell

Ninguno de los enlaces funciona :( – fedorqui

que sería útil que el cuadro de entrada tiene un id:

<input type="text" id="someinput" value="" />

entonces usted necesita un detector de eventos en el cuadro de selección.

<select id="someselect">...</select>

En javascript:

document.getElementById('someselect').onchanged = function() { 
var selem = document.getElementById('someselect'); 
document.getElementById('someinput').value = selem.options[selem.selectedIndex].value; 
}

Esta es una idea muy aproximada.

Fuente

2009-09-21 22:22:31

¿Cómo se usa Javascript para rellenar un campo de texto con datos basados ​​en un cuadro de selección?

Respuesta

Cuestiones relacionadas

¿Cómo se usa Javascript para rellenar un campo de texto con datos basados en un cuadro de selección?