Test Foro de elhacker.net SMF 2.1

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 (html4strict) [Seleccionar]
<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 (html4strict) [Seleccionar]
<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]
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]
<?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]
<?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]
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.