Tema: ¿Como crear input dinamico a partir de un select?
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 18/10/2015, 06:47
larrysun2
 
Fecha de Ingreso: agosto-2015
Ubicación: En Carúpano
Mensajes: 49
Antigüedad: 9 años, 4 meses
Puntos: 12
Respuesta: ¿Como crear input dinamico a partir de un select?
Puedes usar AJAX y PHP
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <body>
  8. <select id="Sel">
  9. AQUI HAGO UN LLAMAMIENTO A MI DB Y TRAIGO LA LISTA DEL SELECT, QUE TODOS LOS DIAS SE ACTUALIZA, GRACIAS A LOS USUARIOS.
  10. <option value="0">Seleccione una opcion</option>
  11. <option value="nuevotext" onselect="crearcampo()">Añadir nuevo</option>
  12. <option value="msg">Mensaje</option>
  13. </select>
  14. <p></p>
  15. <div id="aqui"></div>
  16. <p></p>
  17.  
  18. <div id="notice" style="display:none;width:200px;heigth:200px;color:red;font-size:40px">Agradecer No cuesta Nada</div>
  19. </body>
  20. </html>

codigo JS al final del documento:
Código Javascript: 
Ver original
  1. document.getElementById("Sel").onclick = function(){
  2. Sel = this
  3. newOption = function(){
  4. if(Sel.value){
  5. var Nombre = prompt("Por Favor, Escriba aqui el nombre de la opcion a agregar")
  6. //metodo GET
  7. ajaxG = new XMLHttpRequest()
  8. ajaxG.onreadystatechange = function() {
  9. //aqui especifico que si la solicitud AJAX fue exitosa, que escriba el option que generaras con php usando los datos enviados y de una vez los aregas a tu DB
  10. if (ajaxG.readyState == 4 && ajaxG.status == 200) {
  11. aa =  ajaxG.responseText;
  12. response2 = document.createElement("div")
  13. response2.innerHTML = aa
  14. newop2 = response2.querySelectorAll("option")[0].outerHTML
  15. //abajo de esto es donde escribo el contenido del Select que generaste con PHP
  16. Sel.innerHTML += newop2||''
  17.  
  18. }
  19. }
  20. //aqui envio los datos Nombre y el numero de Elementos que tiene como hijos el Select para que asi con ese dato crees el indice o el value del elemento
  21. //y en donde dice index.html ponle el documento PHP que creara el select y despues de ?, ya debes saberlo pero, ahi es donde pones las variables que seran enviadas al servidor index?Name=jj&IndiceSelect=2
  22. ajaxG.open("POST","index.html?Name="+Nombre+"&IndicedelSelect="+Sel.childElementCount,true)
  23. ajaxG.send(null);
  24. //Fin
  25. }
  26. }
  27.  
  28. if(Sel.value == "nuevotext"){
  29. newOption()
  30. Sel.value = '0'
  31. }
  32.  
  33.  
  34. ////////////////////////////////////////////////////////////
  35. if(Sel.value == "msg"){
  36.     console.log('Agradecer No cuesta Nada');
  37.     document.getElementById("notice").style.display = 'block'
  38.  
  39.     Sel.value = '0'
  40. }
  41. ///////////////////////////////////////////////////////////
  42. }
  43. //espero que puedas entender bien mi codigo y puedas mejorarlo
  44. //No Te tomara Mucho tiempo si te ayude, El decir las gracias

Y sobre el contenido del Otro Archivo
Este es un EJEMPLO:
Código HTML: 
Ver original
  1. <option value="2">EJEMPLO</option>