insertar datos de formulario en base datos MySql con JavaScript, PHP y Ajax

[Lorenzo31]

Buenas, estoy intentando insertar en una base de datos, los datos de un formulario a traves de javascript y ajax pero no me ejecuta la consulta php, y la consulta php funciona porque solo con php y POST funciona.

Dejo el código a ver si alguien puede ayudarme.

NOTA: VALE ya me funciona, los scripts deben ir encima del form que los llama, lógico por otra parte, sólo me falta que no me cambie de pantalla una vez ejecuta el insert.

El echo 'todo OK' lo hace en una nueva ventana. Es como si no detectara ajax y ejecutara el insert del php registro_eliminar en una nueva pagina.

No hace caso a my_script.js


HTML

Código: [Seleccionar]

<form id="myForm" method="post" action="registro_eliminar.php">
//<textarea name="textoEliminar" style="width:99%; margin:auto; height:200px;">//</textarea>
//</div>
//<div class="modal-footer">
<input type="hidden" value="eliminar" name="eliminar"/>
    <input type="hidden" value="<?= $piso['id_piso']?>" name="id_piso"/>
<button id="sub" class="btn btn-default" style= "background-color:#6fb3e0 !important; border-color:#6fb3e0;" >Enviar</button>
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script src="my_script.js" type="text/javascript"></script>


registro_eliminar.php  (no llega a ejecutarse esta parte)

Código: [Seleccionar]

<?php
include '/libs/comoon.php';
//if ( !empty( $_POST['eliminar'] ) ) {
           

$propietario = $_SESSION['user']['id'];
$tex = $_POST['textoEliminar'];
$date = date("Y-m-d H:i:s");
                     $id_piso = $_POST['id_piso'];
//registra los datos del empleados
$sql="INSERT INTO eliminar_piso (id_propietario, texto, fecha, estado, id_piso) VALUES ('$propietario', '$tex', '$date', '0', '$id_piso')";

$resultado = $mysqli->query($sql); 
if (!$resultado) {  echo 'No se pudo ejecutar la consulta: ' . mysql_error(); }else { echo 'ALL OK'; }
          //     }
?>


my_script.js

Código: [Seleccionar]

$("#sub").click( function() {
 $.post( $("#myForm").attr("action"),
         $("#myForm :input").serializeArray(),
         function(info){ $("#result").html(info);
   });
clearInput();
});
 
$("#myForm").submit( function() {
  return false;
});
function clearInput() {
    $("#myForm :input").each( function() {
       $(this).val('');
    });
}



[Mario R. Rancel]

Buenos días
 
No sé si ya lo resolviste, cuando dices que el echo "todo OK" lo hace en una nueva ventana no sé muy bien a qué te refieres porque no veo echo "todo OK"; en el código

Para operar con Ajax y un formulario debes tener en cuenta lo siguiente: Ajax supone operar en segundo plano con el servidor, mientras que cuando un usuario pulsa el botón enviar de un formulario, se produce la redirección hacia donde apunte el action.

Si quieres operar puramente con Ajax de forma que no haya recarga tendrías que anular la posibilidad de que se envíe el formulario, o directamente no usar formulario sino exclusivamente Ajax.

Saludos

[Lorenzo31]

Buenos días Mario, si ya logré enviar con ajax la recarga

$.ajax {
             ....
              }

La unica duda que intento resolver (y el problema es que aún no me dio tiempo de aprender JavaScript y Ajax, es como hacer que Ajax, cuando la inserción de datos se efectua, muestre unas etiquetas html que forman un aviso de success.

Sé que se hace con un success: function { loquesea.html } pero se me escapa como incluir ahí lo que vendría siendo un String con el código html que quiero que muestre.

De momento lo solucione con un alert("todo ok"); pero en el navegador eso se ve muy mal o da problemas, y investigo como hacerlo.

Aunque la solución es encontrar 150 horas (JavaScript) y 90 horas (Ajax) y hacer los dos cursos. Pero en lo inmediato no me da tiempo a eso (aunque lo haré sin duda alguna) en los proximos 6 meses estan hechos.

Gracias Mario por todo como siempre.

[César Krall]

Hola! En vez de un alert puedes hacer que el mensaje se muestre sobre la misma web usando innerHTML (innerHTML JavaScript. Modificar texto o html (p.ej. div) en tiempo real. this: acceder al nodo actual (CU01138E), http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=818:innerhtml-javascript-modificar-texto-o-html-pej-div-en-tiempo-real-this-acceder-al-nodo-actual-cu01138e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206)

Saludos!

[Lorenzo31]

Podrías darme un ejemplo básico para cambiar un trozo de codigo html, por ejemplo un <div id="principal"> </div> por otro trozo de código con la función innerHTML de javaScript César?

Gracias.

[César Krall]

Hola!

En el curso tienes bastantes ejemplos

Un ejemplo básico sería:

Código: [Seleccionar]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "<h1>Se ha cambiado con innerHTML!</h1>";
}
</script>
</head>
<body>
<h2 id="demo" onclick="myFunction()">Haz click aquí para ver cómo cambia el contenido (innerHTML).</h2>
</body>
</html>

Saludos!

[Lorenzo31]

Gracias! Si la verdad que tengo que sacar tiempo para hacer el curso JavaScript y el de Ajax.

Veo que son vitales para desarrollo web.

[Hamoru-san]

Y si no pudieras usar PHP???
Es decir, si la programacion estuviera tambien del lado del cliente, por lo cual no pudioeras usar PHP??? como podeias usar MySQL con node por ejemplo??

[DRANXZ88]

En bootstrap esta haciendo tu código html también veo que usa jquery lo que tenes que hacer cuando hace click a tu botón llama a una función donde contenga el ajax para que esto llame al archivo php si quiere te puedo pasar alguna modificación que le hice a tu ejercicios para guiarte y adaptar a tu necesidad.

[Lorenzo31]

Buenas, muchas gracias Dranxz88, mas o menos desde que hice la pregunta ya he evolucionado bastante con el tema. Pero muchisimas gracias.

Utilizo o bien funciones en jquery o bien clicks en id's. Efectivamente llamas con ajax al php.