Mostrar datos en la misma página que el formulario sin refrescar
No estoy seguro si es algo específico de WordPress o lo que estoy haciendo, pero no logro que los tutoriales en línea funcionen cuando los implemento en una plantilla de página. Por ejemplo este http://www.computersneeker.com/submit-a-form-without-page-refresh-in-php-using-jquery/ Tutorial modificando el $query y la llamada mysql para simplemente hacer echo $name; Explicaré mi problema real y quizás alguien pueda ver mi malentendido.
Este título de post suena similar Ajaxify Form That Submits To Same Page To Display Post Data pero además de no tener respuesta, el contenido parece diferente.
Lo que intento hacer es tener un formulario con diferentes inputs. El usuario hace clic en un botón de enviar, y luego una tabla en la misma página se actualiza. Básicamente los datos que ingresan se buscan en una base de datos, se hacen algunos cálculos, y luego el resultado se muestra en la tabla. Usa muchos arrays y conexión a la db con $wpdb->get_results.
Estoy usando do_shortcode y POST, no sé si eso cambia algo.
Mi estructura ha sido hacerlo en la misma página:
<form action ="" method="post">
Ingresa tu edad <input type="number" min="1" name="age" style="width:50px;">
Selecciona Campo
<select name="field">
<option value="P">Campo P</option>
<option value="M">Campo M</option>
<option value="C">Campo C</option>
</select>
<div class="input_fields_wrap">
<button class="add_field_button">Añadir Campo</button><br><br>
<div>Nombre del Campo: <input type="text" name="fieldname[]">
Total Dato:</td><td><input style="width:50px;" name="datum[]" type="number" min="1" id="datum">
</div>
<input type="submit" name="test" value="Calcular"/>
</form>
Debajo de esto, luego intento procesar las variables:
if(isset($_POST["fieldname"])){
$capture_field_vals ="";
foreach($_POST["fieldname"] as $key => $text_field){
$capture_field_vals .= $text_field .", ";
$dataset[] = $text_field;
}
foreach($_POST["field"] as $key => $text_field){
$capture_field_vals .= $text_field .", ";
$field[] = $text_field;
}
$field = $_POST["field"];
}
Luego hago algunos algoritmos comparando las variables con $wpdb->get_results.
Finalmente pongo los resultados en la tabla de la página.
Actualmente esto funciona, pero cuando se presiona el botón de enviar, la página se refresca, los datos ingresados por el usuario desaparecen, pero la tabla se actualiza correctamente. Tengo problemas para encontrar información sobre cómo hacer esto. Cuando busco cómo evitar el refresco de página, los tutoriales son todos sobre enviar datos a una base de datos y poner el código en un archivo diferente. Necesito que la tabla esté siempre en la página, solo llena de 0's hasta que se ingresen datos. Luego mantener los valores en el formulario, y actualizar la tabla al presionar el botón. ¿Es posible hacer esto en el mismo archivo o estoy malentendiendo algún problema fundamental?
Si entiendo correctamente:
- necesitas que el formulario original muestre los valores de lo que acaba de enviarse.
- También necesitas que la tabla muestre 0 en los valores que no han sido calculados.
- Actualmente la tabla calcula la información perfectamente al enviar el formulario refrescando la página.
Puedes usar la variable if(isset($_POST["fieldname"])){
que tienes arriba para hacer esto.
if(isset($_POST["fieldname"])){ echo $_POST["fieldname"]
mostraría el valor de lo que se ha enviado, por ejemplo texto en un cuadro de texto. En tu caso es un checkbox así que usas algo como esto en su lugar:
<input type="checkbox" name="txtCheck" value="tu valor" <?php if(isset($_POST['txtCheck'])) echo "checked='checked'"; ?> />
Puedes hacer lo mismo con la tabla. Si quieres que muestre 0 antes del cálculo (sin ver tu código de tabla):
Algo así en tu celda:
if (empty($cellvalue)) echo '0'; // Si no hay datos para mostrar, muestra 0
else echo $cellvalue;

¿Esto aún refresca la página, pero solo devuelve el valor al campo de texto? Tus 3 puntos son correctos, lo que tengo ahora es tanto el cero como el cálculo (la tabla se actualiza correctamente), es solo un problema de refresco. Estoy buscando cómo evitar el refresco para que los elementos en la página no cambien. Tal vez tenga que editar la pregunta, pero el cuadro de texto fieldname usa una función jQuery para agregar dinámicamente más de uno (todos los valores se almacenan en un arreglo y luego se usa foreach). Así que cuando ocurre un refresco, el campo original sigue ahí, pero los adicionales se eliminan.

Ah ok, ¿quieres decir que tus cuadros jQuery adicionales se eliminan cuando la página se refresca, pero los datos aún están ahí? Si es así, podrías considerar AJAX que envía datos sin refrescar, aunque ciertamente no es mi área de especialización. No puedo ver el script pero, según el código anterior, ¿se llaman todos fieldname[1]
o fieldname[2]
etc. a medida que se crean?
