0

Me gustaría saber como poder añadir campos como inputs o selects dinámicamente al hacer click en un botón.

                        <div class="inputs">
                            <div class="form-row" >
                                <div class="form-group col-md-3">
                                    <select data-width="130%" 
                                       id="producto" name="producto" data- 
                                       parsley-trigger="change" 
                                        class="selectpicker" data-live-search="true">
                                        <option value="" disabled selected>Buscar</option>
                                        <option>Mustard</option>
                                        <option>Ketchup</option>
                                        <option>Relish</option>
                                    </select>
                                </div>
                             <div class="form-group col-md-2">
                                    <input id="precio" type="text" 
                                     name="precio" data-parsley- 
                                     trigger="change"  autocomplete="off" 
                                     class="form-control" disabled>
                                </div>
                             </div>
                            </div>
                            <button class="btn btn-sm btn-outline-light" 
                             name="agregar" type="button">
                            <i class="fa fa-plus"></i>
                        </button>
                        <button class="btn btn-sm btn-outline-light">
                            <i class="far fa-trash-alt"></i>
                        </button>

Lo que trato de hacer es que al dar en el botón de '+' me agregue un input y un select, la cuestión es que no he podido hacerlo y no encuentro la forma de añadir un input y un select con los estilos.

1 respuesta 1

0

Especifica mejor tu pregunta porque esto es lo que entiendo: para hacerlo usa solo Javascript, HTML y CSS, no uses la extensión jQuery.

<head>
<style>
#text{
        display:none;border:2px solid #faaf88;
    }
</style>
</head>
<body>
<button type="button" onclick="f()">Formulario</button>
<textarea id="text"></textarea>
<script>
    function D(x){return document.getElementById(x);}

    var a=D("text"),c=0;
    function f() {
        if(c==0){
            a.style.display="block";
            c=1;
        }else{
            a.style.display="none";
            c=0;
        }

    }
</script>
</body>
4
  • Uso Android. Y me gustaría que en esta página agregaran soporte para la etiqueta <style>😁
    – DABL03
    Commented el 22 dic. 2020 a las 0:50
  • No te estreses, aquí en la comunidad te ayudamos, deja encuentro un enlace de ayuda y te lo comparto, se bienvenido
    – user128299
    Commented el 22 dic. 2020 a las 1:17
  • Mira ya encontré el link de ayuda para formatear en tus respuestas, chécalo te será de mucho apoyo, éxitos y sigue aportando respuestas 😉
    – user128299
    Commented el 22 dic. 2020 a las 1:24
  • Muchas gracias.
    – DABL03
    Commented el 22 dic. 2020 a las 3:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.