How to post a form to same page loaded dynamically - php

Question

thanks in advance for your time.
I have a PHP web which dynamically fills a html section depending on the url in this way:
<section id="sect_info">
<?php
$existingPages = array('main', 'createacc');
if (isset($_GET['p'])) {
$requestedPage = $_GET['p'];
if (in_array($requestedPage, $existingPages)) {
if (file_exists($requestedPage.'.php')) include_once($requestedPage.'.php');
else echo "La pagina solicitada no existe.";
}
else include_once('main.php');
}
else include_once('main.php');
?>
</section>
The php that has the content for that section is the following:
<?php
if (isset($_POST['user']) && isset($_POST['pwd'])) {
createAcc();
}
else {
echo "
<table cellpadding='0' cellspacing='0' class='table_info'>
<tr>
<td class='topWnd' align='center'> Nueva cuenta
</td>
</tr>
<tr>
<td class='contenidoInfo'>
<form action='createacc.php' method='post'>
<table>
<tr>
<td>Usuario:</td>
<td><input type='text' maxlength='10' name='user'></td>
</tr>
<tr>
<td>Contraseña:</td>
<td><input type='password' maxlength='10' name='pwd'></td>
</tr>
<tr>
<td>Repetir contraseña:</td>
<td><input type='password' maxlength='10' name='repeatPwd'></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type='text' maxlength='60' name='email'></td>
</tr>
<tr>
<td>Pregunta secreta:</td>
<td><input type='text' maxlength='60' name='question'></td>
</tr>
<tr>
<td>Respuesta secreta:</td>
<td><input type='text' maxlength='60' name='answer'></td>
</tr>
</table>
<p><input type='checkbox' name='rules'> Estoy de acuerdo con las reglas de Helbreath OS.</p>
<p><input type='submit' value='Crear cuenta'></p>
</form>
</td>
</tr>
</table>";
}
function createAcc() {
include_once("include/account.php");
include_once("include/main.php");
// -- Variables globales
$usuario = $_POST["user"];
$contraseña = $_POST["pwd"];
// --
// Verificamos que los datos ingresados sean validos
if (!empty($usuario) and !empty($contraseña))
{
// se verifica la longitud de los campos para no generar conflictos con la base de datos
if ((strlen($usuario) <= 10) && ((strlen($contraseña) >= 4) && (strlen($contraseña) <= 10))) {
// Luego de verificar la información establecemos la comunicacion con la base de datos.
$mainObj = new Main; // Instancia de Main
// Intentamos conectar a la base de datos y almacenamos el resultado
// de la conexion en una variable.
$conexResult = $mainObj->ConnectToDatabase();
if ($conexResult != "") // La conexión no ha sido exitosa. Mostramos el resultado
{
echo $conexResult;
$mainObj->CloseCon();
return;
}
$accObj = new Account; // Instancia de Account
// verificamos si la cuenta que se quiere crear ya existe
if ($accObj->CheckExistingAccount($mainObj->getConexObj(), $usuario))
{
echo "La cuenta: ".$usuario." ya existe!.";
$mainObj->CloseCon();
return;
}
else
{
if ($accObj->CreateNewAccount($mainObj->getConexObj(), $usuario, $contraseña))
echo "<p style='color:green;'>La cuenta: ".$usuario." fue creada exitosamente.!</p>";
else
echo "<p style='color:red;'>La cuenta: ".$usuario." no ha podido crearse.!</p>";
}
}
// Cerramos la conexion a la base de datos
$mainObj->CloseCon();
}
}
?>
The problem is that when the user submit the form, it result is shown on a blank page. What I need is to display the result of the php action in the same section where the php is loaded.
I've tried using jQuery and ajax, replacing the "input type submit" for "input type button" and handling the submit event from jQuery but it seems that jQuery can't find the form element.
so: how can I post a form and display its result to that section that I mentioned before?
Sorry guys for my poor english. If you need more details or more code or whatever just tell me.
Thanks again!

Answer 1

To do an ajax post and replace the contents of the forms container you should do this.
$('#sect_info form').on('submit', function(e){
e.preventDefault();
// do client side check of values
if ($(this).find("input[name=user]").val() == '' ||
$(this).find("input[name=pwd]").val() == '' ||
$(this).find("input[name=pwd]").val() != $(this).find("input[name=repeatPwd"]).val()){
alert ('All fields are required. Please Correct and resubmit');
return;
}
// do the post and replace the context of the section with the returned markup.
$.ajax({
url:window.location.toString,
type:"POST",
data:$(this).serialize(),
success:function(htmlStr){
$('#sect_info').html(htmlStr);
}
)};
});
edit: One of the square bracket of [name=pwd] was outside the quotation marks

Answer 2

you just need the form to post to itself. For this just use form without "action" or point the action to itself.
For instance, if the file where the form is, it's named "myform.php", then you could use:
<form action="http://www.mywebsite.com/myform.php" method="post">
Then, at the begining of myform.php you check the $_POST (or $_REQUEST if you want)
if (!empty($_POST['user'])) {
/* do stuff */
}
<form action="http://www.mywebsite.com/myform.php" method="post">
/* the form's inputs goes here */