Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Agregar espacio en un formulario

Buenos días amigos, hoy les tengo una pregunta.

Estoy haciendo un formulario y quiero que mis clientes agreguen una descripción o producto que desean, pero para no ser tan exagerado prefiero dejar un solo campo, pero si su necesidad es, que ellos puedan agregar mas campos, con un boton agregar items. no se como se pueda hacer esto, pido su ayuda gracias.
0
Puntos
1450
Visitas
7
Resp
Por ajjaramillo.18 hace 105 meses
Principiante
Respuesta #1
Hola Muy buenas!
esto lo podes incrementar mediante jquery css y algo de html es algo muy facil de hacer
aqui te paso unas lineas de código para poder incrementar el codigo para tu proyecto
con este codigo bastaría para hacer antar lo que estarias buscado espero que te funcione
Saludos! (:
Html
<a id="agregarCampo" class="btn btn-info" href="#">Agregar Campo</a>
<div id="contenedor">
    <div class="added">
        <input type="text" name="mitexto[]" id="campo_1" placeholder="Texto 1"/><a href="#" class="eliminar">&times;</a>
    </div>
</div>


js
<script src="../js/jquery.js"></script>
<script>$(document).ready(function() {

    var MaxInputs       = 8; //Número Maximo de Campos
    var contenedor       = $("#contenedor"); //ID del contenedor
    var AddButton       = $("#agregarCampo"); //ID del Botón Agregar

    //var x = número de campos existentes en el contenedor
    var x = $("#contenedor div").length + 1;
    var FieldCount = x-1; //para el seguimiento de los campos

    $(AddButton).click(function (e) {
        if(x <= MaxInputs) //max input box allowed
        {
            FieldCount++;
            //agregar campo
            $(contenedor).append('<div><input type="text" name="mitexto[]" id="campo_'+ FieldCount +'" placeholder="Texto '+ FieldCount +'"/><a href="#" class="eliminar">&times;</a></div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click",".eliminar", function(e){ //click en eliminar campo
        if( x > 1 ) {
            $(this).parent('div').remove(); //eliminar el campo
            x--;
        }
        return false;
    });
});</script>


Estilos.css
<style>
input[type="text"]{
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    border-radius: 4px 4px 4px 4px;
    color: #555555;
    display: inline-block;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
    padding: 4px 6px;
    vertical-align: middle;
}
input[type="text"]:focus {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0 none;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);
    -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);
}
a {
    text-decoration: none;
}
.btn {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    vertical-align: middle;
}
.btn-info {
    background-color: #49AFCD;
    background-image: linear-gradient(to bottom, #5BC0DE, #2F96B4);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn:hover{
    color:#333;
    text-decoration:none;
    background-position:0 -15px;
    -webkit-transition:background-position .1s linear;
    -moz-transition:background-position .1s linear;
    -o-transition:background-position .1s linear;
    transition:background-position .1s linear;
}
.btn-info:hover{
    color:#fff;
    background-color:#2f96b4;
}
#contenedor {
    margin-top: 15px;
}
.added {
    float: left;
    margin-right: 10px;
}
.eliminar {
    margin: 5px;
}</style>?
5
Puntos
Por pablo hace 105 meses
Experto
Respuesta #2 
<script src="../js/jquery.js"></script>

esta primera line que archivo es?
0
Puntos
Por ajjaramillo.18 hace 105 meses
Principiante
Respuesta #3
pablo dijo:
Hola Muy buenas!
esto lo podes incrementar mediante jquery css y algo de html es algo muy facil de hacer
aqui te paso unas lineas de código para poder incrementar el codigo para tu proyecto
con este codigo bastaría para hacer antar lo que estarias buscado espero que te funcione
Saludos! (:
Html
<a id="agregarCampo" class="btn btn-info" href="#">Agregar Campo</a>
<div id="contenedor">
    <div class="added">
        <input type="text" name="mitexto[]" id="campo_1" placeholder="Texto 1"/><a href="#" class="eliminar">&times;</a>
    </div>
</div>


js
<script src="../js/jquery.js"></script>
<script>$(document).ready(function() {

    var MaxInputs       = 8; //Número Maximo de Campos
    var contenedor       = $("#contenedor"); //ID del contenedor
    var AddButton       = $("#agregarCampo"); //ID del Botón Agregar

    //var x = número de campos existentes en el contenedor
    var x = $("#contenedor div").length + 1;
    var FieldCount = x-1; //para el seguimiento de los campos

    $(AddButton).click(function (e) {
        if(x <= MaxInputs) //max input box allowed
        {
            FieldCount++;
            //agregar campo
            $(contenedor).append('<div><input type="text" name="mitexto[]" id="campo_'+ FieldCount +'" placeholder="Texto '+ FieldCount +'"/><a href="#" class="eliminar">&times;</a></div>');
            x++; //text box increment
        }
        return false;
    });

    $("body").on("click",".eliminar", function(e){ //click en eliminar campo
        if( x > 1 ) {
            $(this).parent('div').remove(); //eliminar el campo
            x--;
        }
        return false;
    });
});</script>


Estilos.css
<style>
input[type="text"]{
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    border-radius: 4px 4px 4px 4px;
    color: #555555;
    display: inline-block;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    margin-bottom: 10px;
    padding: 4px 6px;
    vertical-align: middle;
}
input[type="text"]:focus {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0 none;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);
    -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);
}
a {
    text-decoration: none;
}
.btn {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-image: none;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0;
    padding: 4px 12px;
    text-align: center;
    vertical-align: middle;
}
.btn-info {
    background-color: #49AFCD;
    background-image: linear-gradient(to bottom, #5BC0DE, #2F96B4);
    background-repeat: repeat-x;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #FFFFFF;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.btn:hover{
    color:#333;
    text-decoration:none;
    background-position:0 -15px;
    -webkit-transition:background-position .1s linear;
    -moz-transition:background-position .1s linear;
    -o-transition:background-position .1s linear;
    transition:background-position .1s linear;
}
.btn-info:hover{
    color:#fff;
    background-color:#2f96b4;
}
#contenedor {
    margin-top: 15px;
}
.added {
    float: left;
    margin-right: 10px;
}
.eliminar {
    margin: 5px;
}</style>?
Oye mil gracias perdón la ignorancia era agregar el archivo jquery.

Pero tengo algo que me genera return al darle eliminar no se que debo cambiar o que hice mal agradezco infinitamente tu apoyo gracias.
0
Puntos
Por ajjaramillo.18 hace 105 meses
Principiante
Respuesta #4
Para eso estamos para ayudarte.

Saludos!
0
Puntos
Por pablo hace 105 meses
Experto
Respuesta #5
Hola Pablo, tengo una pequeña pregunta sobre esta acción, si quiero que al agregar un campo me agregue otro a la vez como hago; es decir, agrego el campo de producto, pero quiero que la cantidad también me salga otro campo. o sea que se aumenten varios campos, adicional mente a la hora de dar la función de eliminar campo me realiza un retorno, y no me elimina el campo, podrías ayudarme en esto también. Gracias.
0
Puntos
Por ajjaramillo.18 hace 105 meses
Principiante
Respuesta #6
Hola ajaramillo18
lo que entendi fue si el usuario agrega un producto (campo) quieres que se agregen en 2 categorias
por ej titulo y categoria
0
Puntos
Por pablo hace 105 meses
Experto
Respuesta #7
Si señor ya lo solucione. gracias ahora creo que tengo que abrir otro post.
0
Puntos
Por ajjaramillo.18 hace 105 meses
Principiante
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate
Utilizamos cookies para mejorar la navegación en el sitio. Más información Aceptar