Buenas noches un consulta tengo un formulario en
https://dl.dropboxusercontent.com/u/33001930/Ventas.html
Como puedo hacer para que cada vez que inserto datos estos me aparezcan abajo en una tabla, y cuando salga del formulario y vuelvo a ingresar estos desaparezcan.
Mod: No escribas en mayúsculas
que sabes de php, y manejo de variables get y post?
porque lo que tienes que hacer es iniciar una session en php, e ir guardando un array con los valores de usuario que le vayas pasando por post o get...
en si defecto y la manera simple es jscript e igual tienes que guardar todo en un script y reescribir el DOM cada vez que le des al boton
Ahora que tienes el planteamiento del formulario, utiliza un archivo nuevo donde se almacenen los datos en PHP, utiliza un get en el primer archivo tipo:
<form method="get" action="dondesealmacenandatos.php">
Saludos.
¿Conforme añades registros se muestren en una tabla? ¿Con o sin BBDD? Asumo que es sin BBDD por la simpleza de tu enunciado. Te pondré un ejemplo en mi malísimo PHP xD, porque el 99% de los temas en "Desarrollo web" son en PHP (casi no veo Java EE, Python o Ruby).
index.html
<section class="panel">
<section class="panel-head">
<span class="panel-title">Insertar registros</span>
</section>
<section class="panel-body">
<input id="id" name="id" class="txt txt-id" placeholder="ID del producto"/>
<input id="name" name="name" class="txt txt-name" placeholder="Nombre"/>
<input id="description" name="description" class="txt txt-description" placeholder="Descripción"/>
<input id="price" name="price" class="txt txt-price" placeholder="Precio"/>
<button id="insert" class="btn btn-primary">Insertar</button>
<button id="clean" class="btn btn-default">Limpiar</button>
</section>
</section>
<section class="table-wrapper">
</section>
script.js
window.addEventListener("load", init);
function init() {
var txtId = document.querySelector(".txt-id");
var txtName = document.querySelector(".txt-name");
var txtDescription = document.querySelector(".txt-description");
var txtPrice = document.querySelector(".txt-price");
document.querySelector("#insert").addEventListener("click", handleInsert);
function handleInsert() {
var formData = new Object();
formData["id"] = txtId.value;
formData["name"] = txtName.value;
formData["description"] = txtDescription.value;
formData["proce"] = txtPrice.value;
sendByAjax(formData);
}
function sendByAjax(data) {
var request = nre XMLHttpRequest();
request.open("POST", "/insert-product", true);
request.addEventListener("readystatechange", function() {
if(request.readystatechange != 4 || request.status != 200) {
// en caso de error, devolver algo del backend
alert(request.responseText);
} else {
// en caso de exito, el backend devuelve la tabla con todos los elementos
document.querySelector(".table-wrapper").innerHTML = request.responseText;
resetForm();
}
});
request.send("data="+data);
}
function resetForm() {
txtId.value = "";
txtName.value = "";
txtDescription.value = "";
txtPrice.value = "";
txtId.focus();
}
}
insert.php
<?php
/** insert.php
* @Description This script store the new record into user session
* and return the table with all products
*/
if(!isset($_SESSION))
session_start();
if(!isset($_SESSION["products"]))
$_SESSION["products"] = array();
// convierte el JSON a array asociativo
$data = json_decode($_POST["data"], true);
array_push($_SESSION["products"], $data);
echo "/path/to/table.php"; // devuelve la tabla actualizada
table.php
<?php
/** table.php
* @Description This script create a table with all store products
*/
if(!isset($_SESSION))
session_start();
var $products = NULL;
if(!isset($_SESSION["products"]))
$products = $_SESSION["products"];
if (!is_null($products)) {
echo "<table>".
echo "<thead>".
echo "<tr>".
echo "<th>ID</th>".
echo "<th>Nombre</th>".
echo "<th>Descripción</th>".
echo "<th>Precio</th>".
echo "</tr">.
echo "</thead>".
echo "<tbody>".
for($product in $products) {
for($product as $key => $value) {
echo "<tr>".
echo "<td>$value</td>".
echo "</tr>"
}
}
echo "</tbody>".
echo "</table>";
}
Obviamente cuando cierres sesión o salgas de la página actual, la destruyes la sessión:
session_destroy();
Te aviso que lo he hecho muy rápido y al ojo en Notepad++, no lo he probado (no tengo ni Apache instalado xDD), así que es muy probable que haya errores.
Saludos.