Save X number of data in an array

Question

Save X number of data in an array

Navigation

#1 by (1 votes)

0

I want to save the data of the inputs in an array, and by pressing the boton

agregar

put them in a table and so x number of data you want to add, once you have the entire list that when you press boton de Guardar datos send that array with all the data in the list, using ajax, jQuery , I hope you can help me

var parametros=[];
                var parame=[];
var par=[];
$("#datos div input, #datos div input:checked, #datos div select").each(function(i,e){
	var value ="";
                     
    parametro = {    
		"ckpID" : $(this).val()
    };
	parametros.push(parametro);

 });

par.push(parametros)
console.log(par);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group" id="datos">
    					<div class="form-group col-md-12">
    						<div class="form-group col-md-2">
    							<label>Existe:</label><br>
    							<input type="checkbox" checked="true">
    						</div>
    						<div class="form-group col-md-3">
    							<label>Nombre:</label><br>
    							<input type="text" class="form-control">
    							<select id="elemento" class="form-control requerido">
                  <option value="1">Dato 1</option>
                  <option value="2">Dato 2</option>
                  <option value="3">Dato 3</option>
                  <option value="4">Dato 4</option>
    							</select>
    						</div>
    						<div class="form-group col-md-3">
    							<label>Cantidad:</label><br>
    							<input type="number" class="form-control">
    						</div>
    						<div class="form-group col-md-2">
    							<label for="sol_esUnidad">Es nuevo:</label><br>
    							<input type="checkbox" checked="true">
    						</div>
    						<div class="form-group col-md-2">
    							<label>Adquirido:</label><br>
    							<input type="number" class="form-control">
    						</div>
                <div class="form-group col-md-2">
    							<label>Prestado:</label><br>
    							<input type="checkbox" checked="true">
    						</div>
    					</div>
    				</div>
            <button type="button" class="btn btn-primary pull-left btn-tabla-nuevo">
			          <span class="glyphicon glyphicon-plus"></span> Agregar
			        </button>
            
            
            <div class="form-group">
					<table id="datostabla" class="table"><thead><tr><th>Existe </th><th>Nombre</th><th>Cantidad</th><th>Es nuevo</th><th>Adquirio</th><th>Prestado</th></thead></table>	
				</div>
        
        <button type="button" class="btn btn-primary pull-left btn-tabla-nuevo">
			          <span class="glyphicon glyphicon-plus"></span> Guardar Datos
			        </button>

jquery html5 ajax

asked by Soldier 26.10.2017 в 21:57

source

1 answer

How to display several options within a menu in cosola in java? Error voting response in model with polymorphism

score 1 · Accepted Answer

Well I think I've done what you required, it's just missing that you finish your ajax logic on the server side.

To carry out your requirement you could do something like this:

var parametros = [];
var parametro = [];

$("#boton_agregar").click(function(){
    $("#datos div input, #datos div input:checked, #datos div select").each(function(index, elemento){

        var id = $(elemento).attr('id');
        var valor = $(elemento).val();

        parametro[id] = valor;

    });

    $("#datostabla tbody").append('<tr><td>'+ parametro.existe +'</td><td>'+ parametro.nombre +'</td><td>'+ parametro.cantidad +'</td><td>'+ parametro.nuevo +'</td><td>'+ parametro.adquirido +'</td><td>'+ parametro.prestado +'</td></tr>')

    $("#nombre").val('');
    $("#cantidad").val('');
    $("#adquirido").val('');
    $("#elemento").val(1);

    parametros.push(parametro);
    parametro = [];
});

$("#guardar_datos").click(function(){
    $.ajax({
        url: 'aca-tu-url.php',
        type: 'post',
        data: parametros,
        cache: false,
        contentType: false,
        processData: false,
        success: function(respuesta){
            // Función a ejecutar si hay una repsuesta positiva del servidor
        }
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group" id="datos">
    <div class="form-group col-md-12">
        <div class="form-group col-md-2">
            <label>Existe:</label><br>
            <input type="checkbox" checked="true" id="existe">
        </div>
        <div class="form-group col-md-3">
            <label>Nombre:</label><br>
            <input type="text" class="form-control" id="nombre">

            <select class="form-control requerido" id="elemento">
                <option value="1">Dato 1</option>
                <option value="2">Dato 2</option>
                <option value="3">Dato 3</option>
                <option value="4">Dato 4</option>
            </select>
        </div>
        <div class="form-group col-md-3">
            <label>Cantidad:</label><br>
            <input type="number" class="form-control" id="cantidad">
        </div>
        <div class="form-group col-md-2">
            <label for="sol_esUnidad">Es nuevo:</label><br>
            <input type="checkbox" checked="true" id="nuevo">
        </div>
        <div class="form-group col-md-2">
            <label>Adquirido:</label><br>
            <input type="number" class="form-control" id="adquirido">
        </div>
        <div class="form-group col-md-2">
            <label>Prestado:</label><br>
            <input type="checkbox" checked="true" id="prestado">
        </div>
    </div>
</div>

<button type="button" class="btn btn-primary pull-left btn-tabla-nuevo" id="boton_agregar">
    <span class="glyphicon glyphicon-plus"></span> Agregar
</button>
            
<div class="form-group">
    <table id="datostabla" class="table">
        <thead>
            <tr>
                <th>Existe </th>
                <th>Nombre</th>
                <th>Cantidad</th>
                <th>Es nuevo</th>
                <th>Adquirio</th>
                <th>Prestado</th>
            </tr>
        </thead>

        <tbody>
            
        </tbody>
    </table> 
</div>
        
<button type="button" class="btn btn-primary pull-left btn-tabla-nuevo" id="guardar_datos">
    <span class="glyphicon glyphicon-plus"></span> Guardar Datos
</button>

I corrected you several errors that you had in the HTML structure regarding the closing of tags.