formulario html

[datab]

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

[engel lex]

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

[Reina_Negra]

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:

Código (html4strict) [Seleccionar] Expandir

<form method="get" action="dondesealmacenandatos.php">

Saludos.

[Usuario Invitado]

¿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

Código (html4strict) [Seleccionar] Expandir

<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

Código (javascript) [Seleccionar] Expandir

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

Código (php) [Seleccionar] Expandir

<?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

Código (php) [Seleccionar] Expandir

<?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:

Código (php) [Seleccionar] Expandir

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.