I'm trying to make my first ajax form but I can't make it work. It is supposed to send some values to a .php file using POST method, make some calculations and retrieve the results. For some reason, I can't find the way to get the values in the php code. When I use print_r ($_POST) I can see all the values inserted in the form but if I try to get them using $_POST['input_name'] an "Undefined index" error message is shown :S I don't know what I am doing wrong so any help would be appreciated. Here is the code I'm using:
JQuery/Ajax:
$().ready(function() {
$("#formulario").validate();
});
function calcularR(){
if ($('#formulario').valid() )
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("calculo").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","calcularT.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var form = document.getElementById('formulario');
var formData = new FormData(form);
xmlhttp.send(formData);
}
}
HTML:
<form id="formulario" name="formulario" method="post" action="enviarR.php" enctype="application_x-www-form-urlencoded">
<div id="bulto1" class= "bult1">
<label class="form-label-top" id="label_alto" >Alto (cm)</label>
<input type="text" class="required" id="alto1" name="alto1" size="21" maxlength="6" value = "" />
<label class="form-label-top" id="label_largo" for="input_26">Largo (cm)</label>
<input type="text" class="required" id="largo1" name="largo1" size="21" maxlength="6" value = "" />
<label class="form-label-top" id="label_ancho" for="input_27">Ancho (cm)</label>
<input type="text" class="required" id="ancho1" name="ancho1" size="21" maxlength="6" value = "" />
</div>
<input type="button" name="calcular" id="calcular" value="Calcular" onclick="calcularR()">
<input type="submit" name="enviar" id="enviar" value="Entrar">
</form>
<div id="calculo" name="calculo"><b> </b></div>
PHP (calcularT.php)
if(isset($_POST['largo1']) && !empty($_POST['largo1'])){
$largo = $_POST['largo1'];
if(isset($_POST['ancho1']) && !empty($_POST['ancho1'])){
$ancho = $_POST['ancho1'];
if(isset($_POST['alto1']) && !empty($_POST['alto1'])){
$alto = $_POST['alto1'];
$t = calcularP($largo, $ancho, $alto);
echo "Resultado: ".$t."<br/>";
}else{
echo "alto required <br/>";
}
}else{
echo "ancho required<br/>";
}
}else{
echo "largo required<br/>";
}
This is just part of the code. First I try sending form data using
var alto = document.getElementById("alto").value;
var ancho = document.getElementById("ancho").value;
xmlhttp.send("alto="+alto+"&ancho="+ancho);
instead of
var formData = new FormData(form);
xmlhttp.send(formData);
and it worked just fine but the form has more inputs and some of them are not always sent, so I thought it was better to use formData instead but, as I said, I can't find the way to get the values in the php code. Thanks in advance and please forgive my basic/bad english (this is not my native language. I'm learning that too :P)