[SOLUCIONADO] Enviar datos por php

jjjtaccess · #1 (**permalink**) 01/07/2015, 19:02

Surge otro inconveniente.....

Hola, decir por demas que soy nuevo en Javascript (conocimientos basicos)

Me surge una inquietud y no se por donde comenzar... haber.!

Tengo este codigo que funciona perfectamente

Código HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Jefferson Jimenez</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link rel='stylesheet prefetch' href='http://s.cdpn.io/3/bootstrap.min.css'>
</head>
 
<body>
 
 
<section class="container">
 
	<h2>Tabla Filtrar</h2>
 
	<input type="button" onClick="filtraCantidad();" value="filtra">
        <input type='button' id="btnImpr" onclick='window.print();' value='Imprimir' />
 
	<table name="datos" class="order-table table">
		<thead>
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Phone</th>
				<th>Price</th>
		       </tr>
		</thead>
		<tbody id="datos">
			<tr>
				<td>John Doe</td>
				<td>[email protected]</td>
				<td>0123456789</td>
				<td>99</td>
				<td><input type="text" name="Cantidad" id="Cant1" value=""></td>
			</tr>
			<tr>
				<td>Jane Vanda</td>
				<td>[email protected]</td>
				<td>9876543210</td>
				<td>349</td>
				<td><input type="text" name="Cantidad" id="Cant2" value=""></td>
			</tr>
			<tr>
				<td>Alferd Penyworth</td>
				<td>[email protected]</td>
				<td>6754328901</td>
				<td>199</td>
				<td><input type="text" name="Cantidad" id="Cant3" value=""></td>
			</tr>
			<tr>
				<td>Jefferson</td>
				<td>[email protected]</td>
				<td>041456545454</td>
				<td>125</td>
				<td><input type="text" name="Cantidad" id="Cant4" value=""></td>
			</tr>
 
		</tbody>
	</table>
 
</section>
 
<script>
function filtraCantidad()
{
	// la var para recorrer la tabla
	var tableReg = document.getElementById('datos');
	// la var para pasar el input donde deseo hacer match
	var x = document.getElementsByName("Cantidad");
 
	for(var i = 0; i < x.length; i++)
	{ // Recorremos todas las celdas
		// Comparo sea tipo input text
		if (x[i].type == "text")
		{
			console.log(x[i].value);
			// Verifico el valor del input
			if (x[i].value == null || x[i].value.length == 0 || x[i].value=="" || /^\s*$/.test(x[i].value))
			{ // Si esta vacio oculto el display
				console.log(i);
				tableReg.rows[i].style.display = 'none';
			} else { // caso contrario lo hago visible
				tableReg.rows[i].style.display = '';
			}
		}
	}
}
</script>
 
</body>
</html>

Lo que deseo, me explico :

1) si coloco xx cantidad en cualquier <td> y pulso el boton filtrar (BIEN)
2) si pulso el boton imprimir (bien) imprime solo los <td> que recoje de la funcion filtrar (BIEN)

El problema ???

Como hago para poder enviar esos datos por email embebidos en el cuerpo del mensaje usando php (demas decir que enviar email por php se hacerlo) lo que no se "ni idea" es como recojer los datos filtrados {tal y como lo hace el boton imprimir}

Con esta funcion de JQuery [URL="http://pandamonios.com/blog/array-dinamico-en-jquery-php"]Link JQuery[/URL] explica un poco el procedimiento, pero no estoy seguro de poder implementar...

Necesito un poco de luces para poder encaminarme, por favor.!

jjjtaccess · #2 (**permalink**) 04/07/2015, 00:24

Al final lo he logrado usando la funcion JQuery del tutorial

1) El codigo HTML

Código HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Jefferson Jimenez</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <link rel='stylesheet prefetch' href='http://s.cdpn.io/3/bootstrap.min.css'>
</head>
 
<body>
 
 
<section class="container">
 
	<h2>Tabla Filtrar</h2>
 
	<input type="button" onClick="filtraCantidad();" value="filtra">
	<input type="button" onClick="Quitafiltra();" value="filtro Off">
	<input type="button" onClick="grabaTodoTabla('DataTable');" value="Envia PHP">
        <input type='button' id="btnImpr" onclick='window.print();' value='Imprimir' />
 
	<table name="datos" id="DataTable" class="order-table table">
		<thead>
			<tr>
				<th>Codigo</th>
				<th>Email</th>
				<th>Phone</th>
				<th>Price</th>
				<th>Cantidad</th>
		       </tr>
		</thead>
		<tbody id="datos">
			<tr>
				<td id="Cod">D1092</td>
				<td>[email protected]</td>
				<td>0123456789</td>
				<td>99</td>
				<td><input type="text" name="Cantidad" id="Cant1" value=""></td>
			</tr>
			<tr>
				<td id="Cod">D5236</td>
				<td>[email protected]</td>
				<td>9876543210</td>
				<td>349</td>
				<td><input type="text" name="Cantidad" id="Cant2" value=""></td>
			</tr>
			<tr>
				<td id="Cod">D635</td>
				<td>[email protected]</td>
				<td>6754328901</td>
				<td>199</td>
				<td><input type="text" name="Cantidad" id="Cant3" value=""></td>
			</tr>
			<tr>
				<td id="Cod">D6984</td>
				<td>[email protected]</td>
				<td>041456545454</td>
				<td>125</td>
				<td><input type="text" name="Cantidad" id="Cant4" value=""></td>
			</tr>
 
		</tbody>
	</table>
 
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

	<script type="text/javascript">
	// Actualiza de manera masiva todos los archivos cargados en la tercera pestaña.
	function grabaTodoTabla(TABLAID){ 
		//tenemos 2 variables, la primera será el Array principal donde estarán nuestros datos y la segunda es el objeto tabla
		var DATA 	= []; 
		var TABLA 	= $("#"+TABLAID+" tbody > tr");
	 
		//una vez que tenemos la tabla recorremos esta misma recorriendo cada TR y por cada uno de estos se ejecuta el siguiente codigo
		TABLA.each(function(){
			//por cada fila o TR que encuentra rescatamos 3 datos, el ID de cada fila, 
			
			var     ID 	= $(this).find("td[id='Cod']").text(),
				DESC 	= $(this).find("input[id*='Cant']").val(),
				
	
			//entonces declaramos un array para guardar estos datos, lo declaramos dentro del each para así reemplazarlo y cada vez
			item = {}; 
			//si miramos el HTML vamos a ver un par de TR vacios y otros con el titulo de la tabla, 
			if(ID !== ''){
			if( $(this).find("input[id*='Cant']").val() !== '' ) { 
		        item ['Codigo'] 	= ID; 
		        item ['Cantidad'] 	= DESC; 
		      
		        
		        //una vez agregados los datos al array "item" declarado anteriormente hacemos un .push() para agregarlos a nuestro array principal "DATA".
		        DATA.push(item); 
			} }
		});
		console.log(DATA);  
	
		//eventualmente se lo vamos a enviar por PHP por ajax de una forma bastante simple y además convertiremos el array en json para evitar 
		INFO 	= new FormData();
		aInfo 	= JSON.stringify(DATA);
	
		INFO.append('data', aInfo);  
         
			$.ajax({
			processData: false, 
			contentType: false,
			 type: "POST",
			 url: "envio.php",
			 data: INFO,
			 success: function(data) { alert(data);}
			});	
			
	}
	</script>

 
<script>
function filtraCantidad()
{
	// la var para recorrer la tabla
	var tableReg = document.getElementById('datos');
	// la var para pasar el input donde deseo hacer match
	var x = document.getElementsByName("Cantidad");
 
	for(var i = 0; i < x.length; i++)
	{ // Recorremos todas las celdas
		// Comparo sea tipo input text
		if (x[i].type == "text")
		{
			console.log(x[i].value);
			// Verifico el valor del input
			if (x[i].value == null || x[i].value.length == 0 || x[i].value=="" || /^\s*$/.test(x[i].value))
			{ // Si esta vacio oculto el display
				console.log(i);
				tableReg.rows[i].style.display = 'none';
			} else { // caso contrario lo hago visible
				tableReg.rows[i].style.display = '';
			}
		}
	}
}
function Quitafiltra()
		{
			// la var para recorrer la tabla
			var tableReg = document.getElementById('datos');
			// la var para pasar el input donde deseo hacer match
			var x = document.getElementsByName("Cantidad");
		 
			for(var i = 0; i < x.length; i++)
			{ // Recorremos todas las celdas
			   tableReg.rows[i].style.display = '';
			}
	       }
</script>
 
</body>
</html>

Ahora en la misma carpeta del directorio donde estemos trabajando creamos el php que lo llamaremos envio.php (cada quien le pone el nombre que desee)

Código PHP:

  <?php 
 
$jsonData = $_POST['data']; 
$phpArray = json_decode($jsonData, true); 
 
foreach ($phpArray as $key => $value) {  
     
    foreach ($value as $Codigo => $Cantidad) {  
     
    $dev =  $dev .  " $Codigo : $Cantidad "  ;  
  
    }  
} 
 
 
echo $dev; 
 
 
?>

Y listo eso es todo....