Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: datab en 21 Marzo 2015, 06:25 am



Título: formulario html
Publicado por: datab en 21 Marzo 2015, 06:25 am
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


Título: Re: FORMULARIO HTML
Publicado por: engel lex en 21 Marzo 2015, 08:18 am
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


Título: Re: formulario html
Publicado por: Reina_Negra en 21 Marzo 2015, 12:07 pm
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
  1. <form method="get" action="dondesealmacenandatos.php">

Saludos.


Título: Re: formulario html
Publicado por: Usuario Invitado en 21 Marzo 2015, 21:24 pm
¿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
  1. <section class="panel">
  2.    <section class="panel-head">
  3.        <span class="panel-title">Insertar registros</span>
  4.    </section>
  5.  
  6.    <section class="panel-body">
  7.        <input id="id" name="id" class="txt txt-id" placeholder="ID del producto"/>
  8.        <input id="name" name="name" class="txt txt-name" placeholder="Nombre"/>
  9.        <input id="description" name="description" class="txt txt-description" placeholder="Descripción"/>
  10.        <input id="price" name="price" class="txt txt-price" placeholder="Precio"/>
  11.        <button id="insert" class="btn btn-primary">Insertar</button>
  12.        <button id="clean" class="btn btn-default">Limpiar</button>
  13.    </section>
  14. </section>
  15.  
  16. <section class="table-wrapper">
  17.  
  18. </section>

script.js

Código
  1. window.addEventListener("load", init);
  2.  
  3. function init() {
  4.    var txtId = document.querySelector(".txt-id");
  5.    var txtName = document.querySelector(".txt-name");
  6.    var txtDescription = document.querySelector(".txt-description");
  7.    var txtPrice = document.querySelector(".txt-price");
  8.    document.querySelector("#insert").addEventListener("click", handleInsert);
  9.  
  10.    function handleInsert() {
  11.        var formData = new Object();
  12.        formData["id"] = txtId.value;
  13.        formData["name"] = txtName.value;
  14.        formData["description"] = txtDescription.value;
  15.        formData["proce"] = txtPrice.value;
  16.  
  17.        sendByAjax(formData);
  18.    }
  19.  
  20.    function sendByAjax(data) {
  21.        var request = nre XMLHttpRequest();
  22.        request.open("POST", "/insert-product", true);
  23.        request.addEventListener("readystatechange", function() {
  24.           if(request.readystatechange != 4 || request.status != 200) {
  25.               // en caso de error, devolver algo del backend
  26.               alert(request.responseText);
  27.           } else {
  28.               // en caso de exito, el backend devuelve la tabla con todos los elementos
  29.               document.querySelector(".table-wrapper").innerHTML = request.responseText;
  30.               resetForm();
  31.           }
  32.        });
  33.        request.send("data="+data);
  34.    }
  35.  
  36.    function resetForm() {
  37.        txtId.value = "";
  38.        txtName.value = "";
  39.        txtDescription.value = "";
  40.        txtPrice.value = "";
  41.        txtId.focus();
  42.    }
  43.  
  44. }

insert.php

Código
  1. <?php
  2. /** insert.php
  3.  * @Description This script store the new record into user session
  4.  * and return the table with all products
  5.  */
  6.  
  7. if(!isset($_SESSION))
  8.    session_start();
  9. if(!isset($_SESSION["products"]))
  10.    $_SESSION["products"] = array();
  11.  
  12. // convierte el JSON a array asociativo
  13. $data = json_decode($_POST["data"], true);
  14. array_push($_SESSION["products"], $data);
  15. echo "/path/to/table.php"; // devuelve la tabla actualizada

table.php

Código
  1. <?php
  2. /** table.php
  3.  * @Description This script create a table with all store products
  4.  */
  5.  
  6. if(!isset($_SESSION))
  7.    session_start();
  8. var $products = NULL;
  9. if(!isset($_SESSION["products"]))
  10.    $products = $_SESSION["products"];
  11.  
  12. if (!is_null($products)) {
  13.    echo "<table>".
  14.    echo "<thead>".
  15.    echo "<tr>".
  16.    echo "<th>ID</th>".
  17.    echo "<th>Nombre</th>".
  18.    echo "<th>Descripción</th>".
  19.    echo "<th>Precio</th>".
  20.    echo "</tr">.
  21.    echo "</thead>".
  22.    echo "<tbody>".
  23.        for($product in $products) {
  24.            for($product as $key => $value) {
  25.                echo "<tr>".
  26.                echo "<td>$value</td>".
  27.                echo "</tr>"
  28.            }
  29.        }
  30.    echo "</tbody>".
  31.    echo "</table>";
  32. }

Obviamente cuando cierres sesión o salgas de la página actual, la destruyes la sessión:

Código


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.