pasar variables de un form en AJAX a un archivo php

[jlusc98]

Buenas,
despues de estar liado con este tema todo el día no logro saber lo que hago mal. Tengo un formulario que debería recoger las variables y pasarlas mediante POST a un archivo php que realiza un input en la BD. La consulta php funciona perfectamente de hecho quería implementar AJAX para que la pagina no recargara... :(

os pongo el codigo por si alquien sabe como ayudarme.

Mil gracias de antemano.

Este es el form en html.

Código HTML:

<form class="form-inline" name="company" method="POST" enctype="multipart/form-data" action="" onsubmit="EnviarDatos('mapping.php'); return false"> 
    <?php $coamapID= uniqid(rand(),true); ?><input type="hidden" value="<?php echo "$coamapID" ?>"  name="coamapID" />
  <div class="form-group">
<select class="form-control" name="coasubID" id="coasub">
  <option selected value="">Local Accounts</option>

<?php 
$subsidiaryID=$_GET["subsidiaryID"];
$groupID=$_GET["groupID"];
$sql ="select * from coasub where subsidiaryID='$subsidiaryID'";
$resultado=mysql_query($sql) or die( mysql_error() ); 
while ($row =mysql_fetch_array($resultado)){
echo "
<option value=".$row['coasubID'].">".$row['coasubID']." ".$row['accname']."</option>";
}
echo "</select>";
?>
<input type="hidden" value="<?php echo "$subsidiaryID";?>" name="subsidiaryID">
<select class="form-control" name="coagroupID" id="coagroup">
  <option selected value="">Consolidation Accounts</option>
<?php 
$subsidiaryID=$_GET["subsidiaryID"];
$sql ="select * from groups,SUBSIDIARY where SUBSIDIARY.subsidiaryID='$subsidiaryID'";
$resultado=mysql_query($sql) or die( mysql_error() );
$row=mysql_fetch_array($resultado);
$groupID=$row['groupID'];
?>
<?php
$sql ="select * from coagroup where groupID='$groupID'";
$resultado=mysql_query($sql) or die( mysql_error() );
while ($row =mysql_fetch_array($resultado)){
echo "
<option value=".$row['coagroupID'].">".$row['coagroupID']." ".$row['accnamegroup']."</option>";
}
echo "</select>";
?>
<input type="hidden" value="<?php echo "$groupID";?>" name="groupID">

<button type="submit" name="enviar" class="btn btn-warning">Link Accounts</button>

</form>
</div>
</div>
<div id="resultado"> 

Código:

function objetoAjax(){
        var xmlhttp=false;
        try {
               xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
               try {
                  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
               } catch (E) {
                       xmlhttp = false;
               }
        }
 
        if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
               xmlhttp = new XMLHttpRequest();

        }

        return xmlhttp;

}

function enviarDatos(){

        //Recogemos los valores introducimos en los campos de texto
    coamapID = document.formulario.coamapID.value;
    subsidiaryID = document.formulario.subsidiaryID.value;
    groupID = document.formulario.groupID.value;
    coasubID = document.formulario.coasubID.value;
    coagroupID = document.formulario.coagroupID.value;


         //Aquí será donde se mostrará el resultado
    resultado = document.getElementById('resultado');

    //instanciamos el objetoAjax
    ajax = objetoAjax();

    //Abrimos una conexión AJAX pasando como parámetros el método de envío, y el archivo que realizará las operaciones deseadas
    ajax.open("POST", "mapping.php", true);

    //cuando el objeto XMLHttpRequest cambia de estado, la función se inicia
    ajax.onreadystatechange = function() {

             //Cuando se completa la petición, mostrará los resultados 
      if (ajax.readyState == 4){

        //El método responseText() contiene el texto de nuestro 'consultar.php'. Por ejemplo, cualquier texto que mostremos por un 'echo'
        resultado.value = (ajax.responseText) 
      }
    } 

    //Llamamos al método setRequestHeader indicando que los datos a enviarse están codificados como un formulario. 
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 

    //enviamos las variables a 'consulta.php' 
    ajax.send("&coamapID="+coamapID+"&subsidiaryID="+subsidiaryID+"&groupID="+groupID+"&coasubID="+coagroupID") 

}

y la consulta php que funciona bien:

Código PHP:

  <?php 
     
 include('conexion.php'); 
 
$coamapID=$_POST["coamapID"]; 
$subsidiaryID=$_POST["subsidiaryID"]; 
$groupID=$_POST["groupID"]; 
$coasubID=$_POST["coasubID"]; 
$coagroupID=$_POST["coagroupID"]; 
 
$query = "INSERT INTO coamap (coamapID,coagroupID,coasubID,groupID,subsidiaryID) VALUES ('$coamapID','$coagroupID','$coasubID','$groupID','$subsidiaryID')"; 
                                                                     
    mysql_query($query) or die(mysql_error()); 
     
    $_SESSION["usuarios"]=$row['subsidiaryID']; 
    print "<script>"; 
    print " self.location='dashboard_a.php?subsidiaryID=$subsidiaryID'"; 
    print "</script>";  
 
 
 ?>   

[Alexis88]

En la línea en la que envías los valores mediante Ajax, la primera variable no debe de tener un & adelante. Por otro lado, el archivo PHP solo realiza una redirección con JavaScript, no devuelve datos.

¿Qué esperas obtener?

Saludos

[jlusc98]

Hola Alexis,

en primer lugar gracias por la respuesta.
El archivo php inserta los datos recogidos en el form en una tabla y redirecciona a la misma pagina donde estaba.

He probado quitar el & pero siguen sin insertarse los datos en la bd. Ya que el php funciona a la perfección, es decir, pasando los datos por post llamando directamente al archivo mapping.php los datos se insertan perfectamente. Pero la pagina se carga y eso es lo que quería que no pasara, de ahi buscar pasar los datos con AJAX.

[Alexis88]

Quizá es porque te estás olvidando de cancelar el envío normal para poder hacerlo mediante Ajax. Cuando mandas a procesar los datos de un formulario, se produce el evento submit, el cual puedes cancelar con el método .preventDefault() para realizar el envío de los datos de manera asíncrona y evitando que recargue la página.

En la cabecera del formulario, añade el parámetro event en la llamada a la función:

Código HTML:

onsubmit="EnviarDatos(event, 'mapping.php')
 

El objeto event representa al evento que se está ejecutando. Luego, ya estando en la función, debes de cancelarlo y luego realizar el resto.

Código Javascript:

function enviarDatos(evento, direccion){
    evento.preventDefault(); //Cancelo el evento 'submit'
 
    //El resto de instrucciones
}
 

Saludos

[jlusc98]

Hola Alexis, lo probaré esta tarde a ver que tal y te cuento.

Gracias por tu ayuda