[SOLUCIONADO] ¿Como crear input dinamico a partir de un select?

hayegesa · #1 (**permalink**) 17/10/2015, 13:03

hola compañeros, tengo un problema y espero me puedan ayudar, primero aclaro que no manejo Javascript, mis enfoques van dirigidos a php y SQL, ahora les comparto el codigo y aclaro cual es mi objetivo.

Mi objetivo es:
Cuando el usuario no encuentra dentro del select la opcion donde quiere guardar su tema, crea uno nuevo, pero no se como hacerlo con Javacript, si se hacerlo con PHP, pero el problema es que requiriria un actualizar el navegador y no es conveniente, bueno, deseo que cuando seleccione le option, Anadir nuevo, debajo me cree un campo input donde me escriba su nueva categoria, que el usuario crea conveniente, el problema es que llevo largos minutos y no logro hacerlo,

codigo java script:

Código:

<script type="text/javascript">
					function crearcampo() {
					var o = document.createElement("input");
					o.type = "text";
					o.name = "lalala";
					o.value = "";
					document.getElementById("aqui").;
					}
</script>

codigo html:

Código:

<select>
AQUI HAGO UN LLAMAMIENTO A MI DB Y TRAIGO LA LISTA DEL SELECT, QUE TODOS LOS DIAS SE ACTUALIZA, GRACIAS A LOS USUARIOS.
<option value="nuevotext" onclick="crearcampo()">Añadir nuevo</option>
</select>
<p></p>
<div id="aqui"></div>
<p></p>

larrysun2 · #2 (**permalink**) 18/10/2015, 06:47

Puedes usar AJAX y PHP

Código HTML:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<select id="Sel">
AQUI HAGO UN LLAMAMIENTO A MI DB Y TRAIGO LA LISTA DEL SELECT, QUE TODOS LOS DIAS SE ACTUALIZA, GRACIAS A LOS USUARIOS.
<option value="0">Seleccione una opcion</option>
<option value="nuevotext" onselect="crearcampo()">Añadir nuevo</option>
<option value="msg">Mensaje</option>
</select>
<p></p>
<div id="aqui"></div>
<p></p>
 
<div id="notice" style="display:none;width:200px;heigth:200px;color:red;font-size:40px">Agradecer No cuesta Nada</div>
</body>
</html>

codigo JS al final del documento:

Código Javascript:

Ver originaldocument.getElementById("Sel").onclick = function(){
Sel = this
newOption = function(){
if(Sel.value){
var Nombre = prompt("Por Favor, Escriba aqui el nombre de la opcion a agregar")
//metodo GET
ajaxG = new XMLHttpRequest()
ajaxG.onreadystatechange = function() {
//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
if (ajaxG.readyState == 4 && ajaxG.status == 200) {
aa =  ajaxG.responseText;
response2 = document.createElement("div")
response2.innerHTML = aa
newop2 = response2.querySelectorAll("option")[0].outerHTML
//abajo de esto es donde escribo el contenido del Select que generaste con PHP
Sel.innerHTML += newop2||''
 
}
}
//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
//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
ajaxG.open("POST","index.html?Name="+Nombre+"&IndicedelSelect="+Sel.childElementCount,true)
ajaxG.send(null);
//Fin
}
}
 
if(Sel.value == "nuevotext"){
newOption()
Sel.value = '0'
}
 
 
////////////////////////////////////////////////////////////
if(Sel.value == "msg"){
    console.log('Agradecer No cuesta Nada');
    document.getElementById("notice").style.display = 'block'
 
    Sel.value = '0'
}
///////////////////////////////////////////////////////////
}
//espero que puedas entender bien mi codigo y puedas mejorarlo
//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<option value="2">EJEMPLO</option>

hayegesa · #3 (**permalink**) 18/10/2015, 07:53

Hola compañero, dos cositas, gracias por el aporte, y dos, no me funciono :(, no me ejecuta, no se si lo estoy haciendo mal, inserte el script como normalmente lo hago, pero nada, ya probe que me sirva el navegador y ejecute otros script que tengo y corren :) osea que es el codigo que no funciona o que yo halla hecho algo mal.

Por otro lado, ¿Se puede hacer de PURO javascript? osea el simple como esta funcion:

Código HTML:

function crearcampo() {
					var o = document.createElement("input");
					o.type = "text";
					o.name = "lalala";
					o.value = "";
					document.getElementById("aqui").;
					}

en teoria esto deveria funcionar cuando lo llamo, pero nada, me funcionan otros menos este acaso hay un error, porque cuando lo llamo me deveria crear el input???.

LO UNICO QUE QUIERO ES QUE CUANDO SE SELECCIONE ANADIR NUEVO SE ME CREE UN CAMPO DEBEJO Y CUANDO CAMBIEN AÑADIR NUEVO POR OTRO SE QUITE, YA NO ES MAS :).

en algun punto de vida yo tuve que haber hecho eso, pero en estos momentos no recuerdo, yo se que esta en algunos de miss proyectos, pero es que empezar a mirar codigos de proyectos antiguos mata

Alexis88 · #4 (**permalink**) 18/10/2015, 09:36

A lo que tienes hecho, solo te falta añadir el método .appendChild(), el cual adhiere un elemento HTML al final del elemento especificado.

Código Javascript:

Ver originaldocument.getElementById("aqui").appendChild(o);

Y para quitar elementos, utiliza el método .removeChild().

Un saludo

hayegesa · #5 (**permalink**) 18/10/2015, 10:54

Hola gracias por responder, añadi lo que me enviaste, pero nada, no ejecuta, voy a pasar todo el codigo, para que miren si depronto hay un error, si me pueden colaborar, grazie.

Código PHP:

 
<!DOCTYPE html2> 
<html> 
<?php 
    session_start(); 
    $_SESSION['Logueado']="SI"; 
    ob_start(); 
    if (isset($_SESSION['Logueado']) && $_SESSION['Logueado'] == "SI")  
    { 
        $visible = "SI"; 
        $_SESSION['seccion']="PAGE-"; 
        include_once ('../../Configuracion/Ruta.php'); 
        include_once ($_SESSION['ruta'].'Configuracion/Constantes.php'); 
        echo ' 
        <head> 
        <script type="text/javascript" src="'.$_SESSION['ruta'].'Recursos/ckeditor/ckeditor.js"></script> 
        <link rel="stylesheet" href="'; echo $_SESSION['ruta'].CSSestandar; echo '" type="text/css" /> 
        <link rel="stylesheet" href="'.$_SESSION['ruta'].'Lenguajes/CSS/Aporte.css" type="text/css" /> 
        <meta content="text/html; charset=UTF-8" http-equiv="content-type" /> 
        <title>Aporte ~ '.Nombre.'</title> 
        <script type="text/javascript"> 
                    function crearcampo() { 
                    var o = document.createElement("input"); 
                    o.type = "text"; 
                    o.name = "lalala"; 
                    o.value = ""; 
                    document.getElementById("nuelemento").appendChild(o); 
                    } 
        </script> 
        </head> 
         
    <body onload="document.faporte.title.focus()"> 
        <div id="Opacidad"></div>'; 
        include_once ($_SESSION['ruta'].'Estandares/Logo.php'); 
        include_once ($_SESSION['ruta'].'Estandares/Menu.php'); 
        echo ' 
        <div id="Contenedor-Total"> 
            <div id="TituloP">Haz tu Aporte</div> 
            <div id="CuerpoP">'; 
                include_once ($_SESSION['ruta'].'Recursos/Publicidad/index.php'); 
                echo '<form action="" name="faporte" method="post"> 
                    <div class="texto">Titulo:</div><input type="text" name="title" placeholder="Ej: un tema o pregunta" class="Campos" /> 
                    <p></p> 
                    <div class="texto">Articulo:</div><div class="descri"><textarea name="editor"></textarea></div> 
                        <script type="text/javascript"> 
                            CKEDITOR.replace("editor"); 
                        </script> 
                    <p></p> 
                    <div class="texto">Clasificación:</div> 
                        <select name="Opcion" id="SelectBuscador" class="Campos"> 
                            <option value="art">Articulo</option> 
                            <option value="exp">Explicación</option> 
                            <option value="inv">Investigación</option> 
                            <option value="ref">Reflexión</option> 
                        </select> 
                    <p></p> 
                    <div class="texto">Tema central:</div> 
                        <select name="Opcion" id="SelectBuscador" class="Campos">'; 
                            include_once ($_SESSION['ruta'].'Configuracion/Conect.php'); 
                            $query = "SELECT * FROM Listaarticulo";  
                            $resultado=mysqli_query($con, $query) or die ("Error al ejecutar, Lamentamos las molestias."); 
                            while ($txDB = mysqli_fetch_array($resultado)) 
                            { 
                                echo '<option value="NOM'.$i.'">'.$txDB[1].'</option>'; 
                            } 
 
                    echo '<option value="nuevotext" onclick="crearcampo()">Añadir nuevo</option> 
                    </select> 
                    <p></p> 
                    <div id="nuelemento"></div> 
                    <p></p> 
                    <div class="texto">TAGs:</div><input type="text" name="mtitle" placeholder="Palabras claves de busqueda" class="Campos" /> 
                    <p></p> 
                    <input type="submit" name="boton" value="Postear" class="pos"> 
                    <p></p> 
                </form> 
            </div> 
        </div> 
    </body>'; 
    } 
?>

Alexis88 · #6 (**permalink**) 18/10/2015, 23:12

Fíjate en la consola del navegador (pulsa la tecla F12) si hay mensajes de error o advertencias.

Como comentario aparte, sería mejor si no mezclaras códigos de distintos lenguajes. Sería más ordenado y legible.

Un saludo

IsaBelM · #7 (**permalink**) 19/10/2015, 06:32

el error está en asignale al option el evento onclik(). asignale al select el evento onchange() y pasale el valor del option seleccionado

Cassers · #8 (**permalink**) 19/10/2015, 09:43

no estoy muy seguro de lo que quieres pero pues, supongo que en ultimas es agregar una opcion al select, es super facil XD.

Código Javascript:

Ver originalvar select = document.getElementById("myselect");
select.options[select.options.length] = new Option("Texto","Value");

hayegesa · #9 (**permalink**) 19/10/2015, 10:38

hola casser y los demas, miren lo que quiero es simple...
Cuando se seleccione en el <select> la </select<option vale="nuevo">añadir nuevo elemento</option> ME CREE UN INPUT TYPE TEXT EN UN DIV FUERA DEL SELECT,

Pero que se haga sin recargar la pagina.

Y cuando se quite la opcion <option vale="nuevo">añadir nuevo elemento</option> se quite el campo.

tambien estaba pensado como respondio uno con el onchange, pero el problema es que no se como hace un if de un option en un javascript, ya que no lo manejo.

estaba pensado en:
function Actselect() {
if (option=="vuebo"){
input.type="text"; EN EL DIV LO TENGO COMO HIDDEN (OCULTADO)
}
else {
input.type="hidden";
}
}

cuando cambie el select llame a la function, pero no se como hacerlo en javascript, si me colaboran con el codigo que acabe de mostrar hay tipo algoritmo, les agradeceria que alguien que maneja js me lo traduzca a a ese lenguaje, gracias.

Cassers · #10 (**permalink**) 19/10/2015, 11:15

vale entiendo, entonces te paso un html que hace eso

Código HTML:

Ver original<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="expires" content="-1" /> 
        <title>Problema</title>
    </head>
    <body>
        <select id="myselect" onchange="mostrar_control()">
            <option value="1">opción1</option>
            <option value="2">opción2</option>
            <option value="3">opción3</option>
            <option value="4">opción4</option>
            <option value="5">opción5</option>
            <option value="Nuevo">añadir nuevo elemento</option>
        </select>
        <input id="Texto" type="text" style="visibility: hidden">
    </body>
</html>
 
<script>
    function mostrar_control(){
        var select = document.getElementById("myselect");
        var inputText = document.getElementById("Texto");
        if(select.options[select.selectedIndex].value == "Nuevo"){
            inputText.style.visibility = "visible";
        }else{
            inputText.style.visibility = "hidden";
        }
    }
</script>

hayegesa · #11 (**permalink**) 19/10/2015, 11:22

gracias, tu codigo esta bueno, aunque del tuyo saque uno simplificado, gracias de verdad.