Hacer Pregunta

Conecta

entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Como almacenar en JSON datos de un formulario con campos iguales

preguntó
Web
10941 Vistas
2 Respuestas
solucionada

Haber, tengo un formulario en la web con lo siguiente:
Cantidad: ""
Nombre: ""
Precio: ""

Ahora tengo justamente debajo un enlace que dice añadir otro elemento, y se abre un panel igual que el de arriba con los mismos datos. Así cuantas veces quiera el usuario.

Mi duda es como puedo almacenar todos esos datos en un array JSON y no se dupliquen los datos iguales.

Ejemplo: [{"Cantidad":"1","Nombre":"Pizza","Precio":"6"},{"Cantidad":"1","Nombre":"Ensalada","Precio":"6"}]
Así sucesivamente según las veces que le haya dado al enlace.

por danielreales7 (5.380 puntos) en Web

2 Respuestas

1voto

white Puntos75880

Intenta recorrer todos los campos y crear un objeto como mas te parezca, aca te dejo un ejemplo: http://jsfiddle.net/ems1898c/

formInputs.find('[data-role=add]').on('click', function() {
    tmpl = $('#inputs-tmpl').html();
    params = [];

    formInputs
        .find('.form-input-groups')
        .append(tmpl);

    formInputs
        .find('.form-input-groups > .group')
        .each(function(i, group) {
            inputParams = {};

            $(group).find(':input').each(function(i, input) {
                inputParams[$(input).attr('name')] = $(input).val();
            });

            params.push(inputParams);
        });

    $('#form-output code').html(JSON.stringify(params, undefined, 4));

    return false;
});
<div id="form-inputs">
    <div class="form-input-groups"></div>
    <a href="#" data-role="add" title="agregar campos">agregar campos</a>
</div>
<pre class="json" id="form-output"><code></code></pre>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script id="inputs-tmpl" type="text/template">
    <div class="group">
        <label>Cantidad</label><input type="text" name="cantidad">
        <label>Nombre</label><input type="text" name="nombre">
        <label>Precio</label><input type="text" name="precio">
    </div>
</script>

si nos proporcionas algo del codigo que tienes hasta el momento podria ser de ayuda para que te digamos especificamente que tendrias que cambiar en tú código.

por white (75.880 puntos)
seleccionada por

0voto

danielreales7 comentado

Haber te comento, hice lo que me dijistes adaptándolo al formulario de Yii y en lugar de enviar los datos intento imprimir por console.log(), pero resulta que me sale undefined.

Este es el formulario:

<div id="form-inputs">
    <div class="form-input-groups"></div>
    <a href="#" data-role="add" title="agregar campos">agregar campos</a>
</div>
<pre class="json" id="form-output"><code></code></pre>
<!--
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
-->
<script id="inputs-tmpl" type="text/template">
    <div class="form-group">
        <?php echo $form->labelEx($model,'NOMBRE_OF',array ("class"=>"col-sm-3 control-label no-padding-right")); ?>
        <!-- AÑADIR PARA ESTILO CORRECTO ,array ("class"=>"col-sm-3 control-label no-padding-right") -->

        <div class="col-sm-9">          
            <?php echo $form->textField($model,'NOMBRE_OF'); ?>

            <?php echo $form->error($model,'NOMBRE_OF',array("class"=>"col-xs-10 col-sm-5 text-warning")); ?>
            <!--AÑADIR PARA ESTILO CORRECTO ,array("class"=>"col-xs-10 col-sm-5 text-warning") -->
        </div>                      
    </div>

    <div class="space-4"></div>

    <div class="form-group">
            <?php echo $form->labelEx($model,'DATOS_OF',array ("class"=>"col-sm-3 control-label no-padding-right")); ?>
            <!-- AÑADIR PARA ESTILO CORRECTO ,array ("class"=>"col-sm-3 control-label no-padding-right") -->

        <div class="col-sm-9">          
            <?php echo $form->textField($model,'DATOS_OF'); ?>

            <?php echo $form->error($model,'DATOS_OF',array("class"=>"col-xs-10 col-sm-5 text-warning")); ?>
            <!--AÑADIR PARA ESTILO CORRECTO ,array("class"=>"col-xs-10 col-sm-5 text-warning") -->
        </div>                      
    </div>

    <div class="space-4"></div>
    <div class="form-group">
            <?php echo $form->labelEx($model,'PRECIO',array ("class"=>"col-sm-3 control-label no-padding-right")); ?>
            <!-- AÑADIR PARA ESTILO CORRECTO ,array ("class"=>"col-sm-3 control-label no-padding-right") -->

        <div class="col-sm-9">          
            <?php echo $form->textField($model,'PRECIO'); ?>

            <?php echo $form->error($model,'PRECIO',array("class"=>"col-xs-10 col-sm-5 text-warning")); ?>
            <!--AÑADIR PARA ESTILO CORRECTO ,array("class"=>"col-xs-10 col-sm-5 text-warning") -->
        </div>                      
    </div>
    <!--
    <div class="group">
        <label>Cantidad</label><input type="text" name="cantidad">
        <label>Nombre</label><input type="text" name="nombre">
        <label>Precio</label><input type="text" name="precio">
    </div>
    -->
</script>

Y en el javascript lo único que cambie fue esto formInputs .find('.form-input-groups > .group') por formInputs .find('.form-input-groups > .form-group')

Me muestra todo tal cual el ejemplo que me mandaste, y ahora tengo lo siguiente:

<script>
    function updateTxt()
    {  
        var datos = $('#form-output code').html(JSON.stringify(params, undefined, 4));

        console.log(datos['TDIA[NOMBRE_OF]']);

    }  
</script>

Pero me vuelve undefined, que estoy haciendo mal?

por danielreales7 (5.380 puntos)

0voto

white comentado

la variable datos en tu función updateTxt no es un objeto es una cadena, por eso te da undefined. si intentas de esta forma:

<div id="form-inputs">
    <div class="form-input-groups"></div>
    <a href="#" data-role="add" title="agregar campos">agregar campos</a>
</div>

<pre class="json" id="form-output"><code></code></pre>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<script id="inputs-tmpl" type="text/template">
    <div class="group">
        <?php echo $form->labelEx($model,'NOMBRE_OF',array ("class"=>"col-sm-3 control-label no-padding-right")); ?>
        <!-- AÑADIR PARA ESTILO CORRECTO ,array ("class"=>"col-sm-3 control-label no-padding-right") -->

        <div class="col-sm-9">
            <?php echo $form->textField($model,'NOMBRE_OF'); ?>

            <?php echo $form->error($model,'NOMBRE_OF',array("class"=>"col-xs-10 col-sm-5 text-warning")); ?>
            <!--AÑADIR PARA ESTILO CORRECTO ,array("class"=>"col-xs-10 col-sm-5 text-warning") -->
        </div>
    </div>

    <div class="space-4"></div>

    <div class="group">
            <?php echo $form->labelEx($model,'DATOS_OF',array ("class"=>"col-sm-3 control-label no-padding-right")); ?>
            <!-- AÑADIR PARA ESTILO CORRECTO ,array ("class"=>"col-sm-3 control-label no-padding-right") -->

        <div class="col-sm-9">
            <?php echo $form->textField($model,'DATOS_OF'); ?>

            <?php echo $form->error($model,'DATOS_OF',array("class"=>"col-xs-10 col-sm-5 text-warning")); ?>
            <!--AÑADIR PARA ESTILO CORRECTO ,array("class"=>"col-xs-10 col-sm-5 text-warning") -->
        </div>
    </div>

    <div class="space-4"></div>
    <div class="group">
            <?php echo $form->labelEx($model,'PRECIO',array ("class"=>"col-sm-3 control-label no-padding-right")); ?>
            <!-- AÑADIR PARA ESTILO CORRECTO ,array ("class"=>"col-sm-3 control-label no-padding-right") -->

        <div class="col-sm-9">
            <?php echo $form->textField($model,'PRECIO'); ?>

            <?php echo $form->error($model,'PRECIO',array("class"=>"col-xs-10 col-sm-5 text-warning")); ?>
            <!--AÑADIR PARA ESTILO CORRECTO ,array("class"=>"col-xs-10 col-sm-5 text-warning") -->
        </div>
    </div>
    <!--
    <div class="group">
        <label>Cantidad</label><input type="text" name="cantidad">
        <label>Nombre</label><input type="text" name="nombre">
        <label>Precio</label><input type="text" name="precio">
    </div>
    -->
</script>
<script type="text/javascript">
    var formInputs, tmpl, params, inputParams, input;

    formInputs = $('#form-inputs');

    formInputs.find('[data-role=add]').on('click', function() {
        tmpl = $('#inputs-tmpl').html();
        params = [];

        formInputs
            .find('.form-input-groups')
            .append(tmpl);

        formInputs
            .find('.form-input-groups > .group')
            .each(function(i, group) {
                inputParams = {};

                $(group).find(':input').each(function(i, input) {
                    inputParams[$(input).attr('name')] = $(input).val();
                });

                params.push(inputParams);
            });

        $('#form-output code').html(JSON.stringify(params, undefined, 4));

        return false;
    });
</script>

te debería devolver sin problema un objeto params, talvez no es la estructura que buscabas? en tu funcion updateTxt no entiendo la linea TDIA[NOMBRE_OF]

TDIA es una clave? si me das un ejemplo de como exactamente quieres el objeto podría ayudarte, es realmente un json lo que buscas? o es un objeto?

por white (75.880 puntos)

0voto

danielreales7 comentado

Lo que necesito es un JSON, es decir una vez que el cliente introduzca todos esos datos, me almacene en la BD en un campo que tengo llamado DATOS_OF dichos datos en formato JSON, por eso tengo esa función que no entendías, para ver si me devolvía algún dato en concreto. Era solo de prueba, pero estaba viendo que no devolvía nada.

Lo que pasa que estoy pensando que después Yii, no va a tener en cuenta ese array JSON y me va almacenar solamente los primeros datos que introduzca.

¿Sabes lo que te quiero decir? Muchas gracias.

por danielreales7 (5.380 puntos)

0voto

white comentado

Aca te dejo un ejemplo: http://jsfiddle.net/4LLo9df7/

y aca otro ejemplo: http://jsfiddle.net/mkwmk7z3/

En este ultimo ejemplo, se evita que se dupliquen los valores con respecto a la clave NOMBRE_OF

es decir que si tenemos un objeto asi:

[
    {
        NOMBRE_OF: "pizza",
        DATOS_OF: "first item",
        PRECIO: 10.00
    },
    {
        NOMBRE_OF: "pizza",
        DATOS_OF: "second item",
        PRECIO: 14.00
    }
]

te tendría que devolver lo siguiente:

[
    {
        NOMBRE_OF: "pizza",
        DATOS_OF: "first item",
        PRECIO: 10.00
    }
]

evitando los items duplicados.

por white (75.880 puntos)

0voto

Ovalois Puntos140

Excelente, me sirvió mucho, pero como podría pasar esta info a un .json? osea, que lo que salga del form alimente a data.json, desde ya muchas gracias!

por Ovalois (140 puntos)

0voto

Peter comentado

Por favor abre tu propia pregunta, esta es de otro tema y ya está solucionada.

Saludos.

por Peter (150.480 puntos)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta