Jquery + pasar multiple Checkbox

[sergi_climent]

Hola,

tengo un form con varios campos y uno de ellos es un checkbox que se genera automaticamente segun el resultado de una query.

de la siguiente manera:

Código PHP:

  
<table class="tablesorter">     
<tr> 
    <th>campoX</th> 
    <th>CamopY</th>     
    <th>&nbsp;</th> 
</tr> 
<?php 
if($sql) { 
 
    while( $resultado = mysql_fetch_array($sql) ){         
     
    ?> 
        <tr id="fila-<?php echo $resultado ['id']; ?>"> 
            <td align="left"><?php echo  $resultado ['campoX']; ?></td> 
            <td align="left"><?php echo $resultado ['campoY']; ?></td> 
            <td><input type="checkbox" id="checkbox<?php echo $resultado ['id'];?>" name="checkbox<?php echo $resultado ['id'];?>" value="1"/></td> 
        </tr> 
       
    <?php 
    } 
} 
?> 
</table>  

lo cual me quedaria un checkbox1, checkbox2, checkbox3..... dependiendo de la cantidad de registros devueltos en la query.


entonces, cuando llamo la función Jquery para comprobar campos y pasarlos por Post a otra pagina, no ser como pasar este checkbox.

el código en javascript es el siguiente: (resumido)

Código Javascript:

function xxx(){         
        
        var campo1= $('#campo1').attr('value');
        
        var campo2= $('#campo2').attr('value');     
        var campo3= $('#campo3').attr('value');
        var campo4= $('#campo4').attr('value');
 
$.ajax({
            url: 'mipagina/mipagina.php',
            type: "POST",
            data: "submit=&campo1="+campo1+"&campo2="+campo2+"&campo3="+campo3+"&campo4="+campo4,
beforeSend: function(){
                if (campo1==""){
                    alert("Campo 1 es Obligatorio.");
                    $("#campo1").focus();
                    return false;
                }
                            },          
            success: function(datos){   
                alert(datos);           
            },
            complete: function(){/*Quan s'hagi completat*/}     
        });
        return false;
    }
 
 
}
 

entonces mi pregunta es: como puedo hacer para pasar las todos los checkbox generados por la query?



saludos y gracias de antemano!!!!

[Dany_s]

con serialize() http://api.jquery.com/serialize/

[sergi_climent]

Hola Dany_s, gracias por tu rápida respuesta aunque no acabo de dar con la solución, para q me coja todos los checkbok y me los pase por Post a otra pagina.

aquí es la parte donde creo los checkbox:

Código PHP:

<?php
session_start();
 
require('../lib/class/preventius.class.php');
require('../lib/funcions/utils.php');
 
 
$objPreventiu   = new Preventius;
 
extract($_POST); //extreu les variables d'un array.
  
if($paramTipo == 1){
    
    $w  = "";   
    $w  = " WHERE id_maquina = ".$paramMaquina."";
    $w .= " AND preventiu_fet = 0";
    $w .= " AND preventius.situacio = 0";
    
    $order = "";
    $order = " ORDER BY data_revisio ASC";
    
} 
$sql_preventius  = $objPreventiu->mostrar_preventius_wo($w,$order); 
 
?>
<table class="tablesorter"> 
<tr>
    <th>Prox.Revision</th>
    <th>Preventivo</th> 
    <th>&nbsp;</th>
</tr>
<?php
if($sql_preventius) {
 
    while( $preventius = mysql_fetch_array($sql_preventius) ){      
    
    ?>
        <tr id="fila-<?php echo $preventius['id_preventiu']; ?>">
            <td align="left"><?php echo format_data($preventius['data_revisio'],'ymd','d/m/y'); ?></td>
            <td align="left"><?php echo utf8_decode($preventius['tipus_preventiu']); ?></td>
            <td><input type="checkbox" id="preventiu<?php echo $preventius['id_preventiu'];?>" name="preventiu" value="1"/></td>
        </tr>
      
    <?php
    }
}
?>
</table>
 

y aquí es donde compruebo todas la variables de mi form para pasarlas por post:

Código Javascript:

function AltaRapport(){     
 
        
        
        var ref_rapport     = $('#ref_rapport').attr('value');
        
        var data_avis       = $('#data_avis').attr('value');        
        var data_ini        = $('#data_ini').attr('value');
        var data_fin        = $('#data_fin').attr('value');
        
        var id_localitat    = $('#id_localitat').attr('value');
        var id_seccio       = $('#id_seccio').attr('value');
        var id_maquina      = $('#id_maquina').attr('value');   
 
        // -- Avaria
        var hora_averia_avis    = $('#hora_averia_avis').attr('value'); 
        var hora_averia_ini     = $('#hora_averia_ini').attr('value');      
        var hora_averia_fin     = $('#hora_averia_fin').attr('value');
 
                    
        var descripcio_averia   = $('#descripcio_averia').attr('value');
        var material_averia     = $('#material_averia').attr('value');
        
        var dies_paro_averia        = $('#dies_paro_averia').attr('value');
        var hores_paro_averia       = $('#hores_paro_averia').attr('value');
        var minuts_paro_averia      = $('#minuts_paro_averia').attr('value');
        
        var dies_reparacio_averia   = $('#dies_reparacio_averia').attr('value');        
        var hores_reparacio_averia  = $('#hores_reparacio_averia').attr('value');
        var minuts_reparacio_averia = $('#minuts_reparacio_averia').attr('value');
        
        var preu_hora_averia        = $('#preu_hora_averia').attr('value');
        var preu_material_averia    = $('#preu_material_averia').attr('value');     
        var preu_total_averia       = $('#preu_total_averia').attr('value');
        
        // -- Activitat
        var descripcio_activitat    = $('#descripcio_activitat').attr('value'); 
        var material_activitat      = $('#material_activitat').attr('value');               
 
                    
        var descripcio_averia   = $('#descripcio_averia').attr('value');
        var material_averia     = $('#material_averia').attr('value');
        
        var dies_reparacio_activitat        = $('#dies_reparacio_activitat').attr('value');
        var hores_reparacio_activitat       = $('#hores_reparacio_activitat').attr('value');
        var minuts_reparacio_activitat      = $('#minuts_reparacio_activitat').attr('value');
        var preu_hora_activitat             = $('#preu_hora_activitat').attr('value');      
        var preu_material_activitat         = $('#preu_material_activitat').attr('value');
        var preu_total_activitat            = $('#preu_total_activitat').attr('value');
 
 
//AQUI ES DONDE ESTOY INTENTANDO COGER LOS VALORES DE LOS CHECKBOX PERO... NO SER.
// HE PROBADO PASAÄDOLE EL FORM Y LUEGO MOSTRARLO PERO NO ME MUESTRA NADA
        var str = $("preventiu").serialize();
        alert(str);
 
 
        
        
 
        $.ajax({
            url: 'rapports/nou_rapport.php',
            type: "POST",
            data: "submit=&ref_rapport="+ref_rapport+"&data_avis="+data_avis+"&data_ini="+data_ini+"&data_fin="+data_fin+
            "&id_localitat="+id_localitat+"&id_seccio="+id_seccio+"&id_maquina="+id_maquina+
            "&hora_averia_avis="+hora_averia_avis+"&hora_averia_ini="+hora_averia_ini+"&hora_averia_fin="+hora_averia_fin+
            "&descripcio_averia="+descripcio_averia+"&material_averia="+material_averia+
            "&dies_paro_averia="+dies_paro_averia+"&hores_paro_averia="+hores_paro_averia+"&minuts_paro_averia="+minuts_paro_averia+
            "&dies_reparacio_averia="+dies_reparacio_averia+"&hores_reparacio_averia="+hores_reparacio_averia+"&minuts_reparacio_averia="+minuts_reparacio_averia+
            "&preu_hora_averia="+preu_hora_averia+"&preu_material_averia="+preu_material_averia+"&preu_total_averia="+preu_total_averia,
            beforeSend: function(){
                if (ref_rapport==""){
                    alert("Referenciar el Rapport es Obligatoria.");
                    $("#ref_rapport").focus();
                    return false;
                }
                if (data_avis==""){
                    alert("La Fecha de Aviso es Obligatoria.");
                    $("#data_avis").focus();
                    return false;
                }
            },          
            success: function(datos){   
                alert(datos);           
                $("#dades_maquina").hide();
                $("#formulari").show();
                $("#list_tabla").show();
            },
            complete: function(){/*Quan s'hagi completat*/}     
        });
        return false;
        
    }
 

me podrias dar una pistilla más?


gracias de antemano

[Dany_s]

serialize te convierte los campos de un formulario a una cadena de pares nombre/valor

Código HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prueba</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$( function (){
    $('input[name=preventiu]').change( function (){
        $('#campos').text( $('input[name=preventiu]').serialize() );
    });
});
</script>

</head>
<body>
<input type="checkbox" name="preventiu" value="1"><br />
<input type="checkbox" name="preventiu" value="2"><br />
<input type="checkbox" name="preventiu" value="3"><br />
<input type="checkbox" name="preventiu" value="4"><br />
<input type="checkbox" name="preventiu" value="5"><br />
<input type="checkbox" name="preventiu" value="6"><br />
<input type="checkbox" name="preventiu" value="7"><br />
<div id="campos"></div>
</body>
</html> 

ahi tomo todos los input con name preventiu y genero la cadena, es lo mismo que la cadena get y que también es lo que se le pasa en el parámetro data de ajax

para obtener los valores de todos los elementos de un formulario podes hacer como muestra el ejemplo de la doc de jquery que pase anteriormente

[sergi_climent]

Gracias de nuevo Dany_s!!!!!!

al final en toda la comprobación lo puse así:

Código Javascript:

var query_preventius = ''; 
        $("input[name='preventiu']").each( 
            function() 
            { 
                if (this.checked) 
                { 
                    query_preventius += "&preventiu[]=" + this.value; 
                }
                
            });
 

y de momento funciona genial!

Saludos

[Dany_s]

pero si eso lo podés hacer en una sola linea con serialize()

[chifliiiii]

Hehehe más vale lo malo conocido que lo bueno por conocer :D

[sergi_climent]

no logré que me tirara bien con serialize! ^^

[Dany_s]

Iniciado por chifliiiii

Hehehe más vale lo malo conocido que lo bueno por conocer :D

jeje pero en un proyecto grande ahorrar 1 linea es valioso y mejor agarrar costumbre

[luisosorio]

Que tal Dany_s creo que sergi_climent no utilizo serialize porque al usar tu ejemplo que pusiste anteriormente el resultado seria:

preventiu=1&preventiu=2&preventiu=3&preventiu=4&pr eventiu=5&preventiu=6&preventiu=7

Ahora bien como tu dices que se muestra como en los formularios que se manda la informacion por get tienes razon pero si vez el valor de cada uno es la misma variable que es preventiu.
Entonces lo que puede hacer sergi_climent para que le salga el codigo mejor es utilizar serialize de la siguiente manera

$( function (){
$('input:checkbox').change( function (){
$('#campos').text( $('input:checkbox').serialize() );
});
});

Con esto sergi_climent podra tener los checkbox de diferentes nombres y las variables se presentarian distintas. Un ejemplo sencillo:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Prueba</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$( function (){
$('input:checkbox').change( function (){
$('#campos').text( $('input:checkbox').serialize() );
});
});
</script>
</head>
<body>
<input type="checkbox" name="preventiu1" value="1"><br />
<input type="checkbox" name="preventiu2" value="2"><br />
<input type="checkbox" name="preventiu3" value="3"><br />
<input type="checkbox" name="preventiu4" value="4"><br />
<input type="checkbox" name="preventiu5" value="5"><br />
<input type="checkbox" name="preventiu6" value="6"><br />
<input type="checkbox" name="preventiu7" value="7"><br />
<div id="campos"></div>
</body>
</html>

La data se motraría así:

preventiu1=1&preventiu2=2&preventiu3=3&preventiu4= 4&preventiu5=5&preventiu6=6&preventiu7=7