0

Saludos a todos, tengo este formulario que envía datos sin salir a otra pagina, pero al momento de hacerlo con ajax, la otra pagina no recibe los datos, especificamente en el form cliente. aquí mi código.

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}


$(document).ready(function() {
  $('.para_guardar').submit(function() {

    var x = confirm("¿Estás seguro que quieres guardar?");
    if (x) {
      $.ajax({
        type: "POST",
        url: "add2.php",
        data: $(this).serialize(),
        cache: false,
        success: function(data) {
          //$('#result').show(3000);

          $('#result').html(data).
          fadeIn().delay(1000).fadeOut();

        }
      }); //end ajax
      return false;
    }

  });
});


(function($) {
  $.fn.enterAsTab = function(options) {
    var settings = $.extend({
      'allowSubmit': false
    }, options);
    $(this).find('input, select, textarea, button').live("keydown", {
      localSettings: settings
    }, function(event) {
      if (settings.allowSubmit) {
        var type = $(this).attr("type");
        if (type == "submit") {
          return true;
        }
      }
      if (event.keyCode == 13) {
        var inputs = $(this).parents("form").eq(0).find(":input:visible:not(:disabled):not([readonly])");
        var idx = inputs.index(this);
        if (idx == inputs.length - 1) {
          idx = -1;
        } else {
          inputs[idx + 1].focus(); // handles submit buttons
        }
        try {
          inputs[idx + 1].select();
        } catch (err) {

        }
        return false;
      }
    });
    return this;
  };
})(jQuery);



function limpiar() {
  setTimeout('document.cliente.reset()', 2000);
  return false;
}

$("#camn").enterAsTab({
  'allowSubmit': true
});
console.log($('#camn').find(":input:visible:not(:disabled):not([readonly])"));
body {
  font-family: "Lato", sans-serif;
}


/* Style the tab */

div.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}


/* Style the buttons inside the tab */

div.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}


/* Change background color of buttons on hover */

div.tab button:hover {
  background-color: #ddd;
}


/* Create an active/current tablink class */

div.tab button.active {
  background-color: #ccc;
}


/* Style the tab content */

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

tr:hover {
  background-color: #CC9;
}

.button {
  background-color: #0067b8;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="jquery.min.js"></script>
  <script type="text/javascript">
    //

    //Este script es para limpiar los text box despues del submit.
  </script>
  <!-- Script para  boton enter como tab al formulario-->

  <script type="text/javascript">
  </script>

  <link rel="shortcut icon" type="image/x-icon" href="logo1.png" />

</head>

<body>

  <p>Click en un boton para añadir item:</p>

  <div class="tab">

    <button class="tablinks" onclick="openCity(event, 'cliente')">Cliente</button>
    <button class="tablinks" onclick="openCity(event, 'conductor')">Conductor</button>
    <button class="tablinks" onclick="openCity(event, 'camion')">Camión</button>
    <button class="tablinks" onclick="openCity(event, 'cb')">Chasis/ camabaja/mesa</button>
  </div>
  <center>
    <div id="conductor" class="tabcontent">
      <div id="camn">

        <form method="post" form name="driver" id="driver" autocomplete="off">
          <p>&nbsp;</p>
          <table width="358" height="270" border="0" cellspacing="0">
            <tr>
              <td>Nombre y apellido:</td>
              <td>&nbsp;</td>
              <td><label for="nomapell"></label>
                <input type="text" name="nomapell" id="nomapell" required /></td>
            </tr>
            <tr>
              <td>Cédula:</td>
              <td>&nbsp;</td>
              <td><label for="ced"></label>
                <input type="text" name="ced" id="ced" required/></td>
            </tr>
            <tr>
              <td>Código del conductor:</td>
              <td>&nbsp;</td>
              <td><label for="uni_co"></label>
                <input type="text" name="uni_co" id="uni_co" required/></td>
            </tr>

            <tr>
              <td>Celular:</td>
              <td>&nbsp;</td>
              <td><label for="cel"></label>
                <input type="text" name="cel" id="cel" required/></td>
            </tr>
            <tr>
              <td>Fecha de nacimiento</td>
              <td>&nbsp;</td>
              <td><label for="fechan"></label>
                <input type="date" name="fechan" id="fechan" required/></td>
            </tr>
          </table>


          <p>
            <input type="submit" class="button" name="send1" id="send1" value="Guardar" />
          </p>



        </form>


      </div>
    </div>
  </center>
  <center>
    <div id="cliente" class="tabcontent">
      <div id="camn">
        <form action="add2.php" method="post" name="cliente" class="para_guardar" onSubmit="return limpiar()" id="cliente" autocomplete="off">
          <p>&nbsp;</p>
          <table width="358" height="270" border="0" cellspacing="0">
            <tr>
              <td>Codigo del cliente:</td>
              <td>&nbsp;</td>
              <td><label for="cod_cli"></label>
                <input type="text" name="cod_cli" id="cod_cli" required/></td>
              <td>
                <div id="result"></div>
              </td>
            </tr>
            <tr>
              <td>Nombre del cliente:</td>
              <td>&nbsp;</td>
              <td><label for="nom_cli"></label>
                <input type="text" name="nom_cli" id="nom_cli" required/></td>
            </tr>
            <tr>
              <td>Telefono:</td>
              <td>&nbsp;</td>
              <td><label for="tel"></label>
                <input type="text" name="tel" id="tel" required/></td>
            </tr>
            <tr>
              <td>Fax:</td>
              <td>&nbsp;</td>
              <td><label for="fax"></label>
                <input type="text" name="fax" id="fax" required/></td>
            </tr>
            <tr>
              <td>E-Mail</td>
              <td>&nbsp;</td>
              <td><label for="correo"></label>
                <input type="email" name="correo" id="correo" required/></td>
            </tr>
          </table>

          <p>
            <input type="submit" class="button" name="send2" id="send2" value="Guardar" />
          </p>



        </form>
      </div>

    </div>

  </center>

  <center>
    <div id="camion" class="tabcontent">
      <div id="camn">
        <form action="add2.php" method="post" form name="camion" id="camion" autocomplete="off">

          <table width="636" height="221" border="0" cellspacing="0">
            <tr>
              <td>Código del camión:</td>
              <td><label for="uni_ca"></label>
                <input type="text" name="uni_ca" id="uni_ca" required /></td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
            <tr>
              <td>Placa:</td>
              <td><label for="placa"></label>
                <input type="text" name="placa" id="placa" required /></td>
              <td>Año:</td>
              <td><label for="ano"></label>
                <input type="date" name="ano" id="ano" required/></td>
            </tr>
            <tr>
              <td>Marca:</td>
              <td><label for="marca"></label>
                <input type="text" name="marca" id="marca" required/></td>
              <td>Color:</td>
              <td><label for="color"></label>
                <input type="text" name="color" id="color" required /></td>
            </tr>
          </table>
          <p>
            <input type="submit" class="button" name="sendt" value="Guardar" />
          </p>



        </form>
      </div>
  </center>

  </div>
  <center>
    <div id="cb" class="tabcontent">
      <div id="camn">
        <form action="add2.php" method="post" form name="pa" id="pa" autocomplete="off">

          <p>&nbsp;</p>

          <table width="358" height="221" border="0" cellspacing="0">
            <tr>
              <td>Código de chasis/Camabaja/Mesa:</td>
              <td>&nbsp;</td>
              <td><label for="num_int"></label>
                <input type="text" name="num_int" id="num_int" required/></td>
            </tr>
            <tr>
              <td>Placa:</td>
              <td>&nbsp;</td>
              <td><label for="placa_pa"></label>
                <input type="text" name="placa_pa" id="placa_pa" required/></td>
            </tr>
            <tr>
              <td>Tipo:</td>
              <td>&nbsp;</td>
              <td><label for="tipo"></label>
                <select name="tipo" id="tipo" required>
              <option value="">Elija</option>
              <option value="Chasis20">Chasis 20&quot;</option>
              <option value="Chasis40">Chasis 40&quot;</option>
              <option value="Chasis45">Chasis 45&quot;</option>
              <option value="Mesa16">Mesa 16&quot;</option>
              <option value="Mesa18">Mesa 18&quot;</option>
              <option value="Mesa20">Mesa 20&quot;</option>
              <option value="Mesa22">Mesa 22&quot;</option>
              <option value="Cama baja">Cama baja</option>
              <option value="Cama baja modular">Cama baja modular</option>
          </select></td>
            </tr>
          </table>
          <p>&nbsp;</p>
          <p>
            <input type="submit" class="button" name="send4" value="Guardar" />
          </p>



        </form>
      </div>
    </div>
  </center>
</body>

</html>

Y el PHP

 if(isset($_POST['send2'])){ 
$cod_cli = $_POST['cod_cli']; 
$nom_cli = $_POST['nom_cli']; 
$tel = $_POST['tel']; 
$fax = $_POST['fax']; 
$correo = $_POST['correo']; 
$link2 = mysql_connect("localhost","root","master3.1416"); mysql_select_db("roda",$link2); mysql_query("INSERT INTO cliente (cod_cli, nom_cli, tel, fax, correo) VALUES ('$cod_cli' , '$nom_cli', '$tel', '$fax', '$correo' )",$link2); 
$my_error = mysql_error($link2); echo"<br>"; echo "<span>Registro guardado</span>"; 
}
5
  • Y en PHP como los estas recibiendo?
    – Alvarez
    el 9 oct. 2017 a las 22:03
  • if(isset($_POST['send2'])){ $cod_cli = $_POST['cod_cli']; $nom_cli = $_POST['nom_cli']; $tel = $_POST['tel']; $fax = $_POST['fax']; $correo = $_POST['correo']; $link2 = mysql_connect("localhost","root","master3.1416"); mysql_select_db("roda",$link2); mysql_query("INSERT INTO cliente (cod_cli, nom_cli, tel, fax, correo) VALUES ('$cod_cli' , '$nom_cli', '$tel', '$fax', '$correo' )",$link2); $my_error = mysql_error($link2); echo"<br>"; echo "<span>Registro guardado</span>"; }
    – Leonardo
    el 9 oct. 2017 a las 22:05
  • al parecer es la condicion, pero como lo haria con la condicion?
    – Leonardo
    el 9 oct. 2017 a las 22:06
  • Leonardo, en las peticiones Ajax intervienen tres elementos: 1. Los datos que envías (recogidos generalmente del HTML), 2. El código jQuery que hace la petición Ajax, 3. El archivo que se ejecuta en el servidor cuando haces la petición, en este caso sería según tu código el archivo add2.php. Esas eran las tres cosas esenciales que debías poner en tu pregunta, comentando el error que te da. Por otra parte, siempre es bueno que depures tus variables (las que envías y las que recibes), usando por ejemplo console.log(variable) y que comentes lo que se presenta en la consola.
    – A. Cedano
    el 9 oct. 2017 a las 22:33
  • Checa todo lo que esta tratando de hacer y en que orden. Tu tag Form, tiene un action, y el handler no le dice evite el default, así que va a ir a add2.php. Además, tienes un onSubmit, que llama la funcion limpiar(), y encima, tienes el handler de JQuery para el evento submit de la forma (que es donde envías los datos)... Me pregunto si llama primero limpiar() y despues el handler de JQuery, ya no tendrias datos que enviar? el 9 oct. 2017 a las 23:29

1 respuesta 1

1

Cuando se envía un form serializado no se incluyen los elementos button. Lo que entiendo es que necesita de alguna manera diferenciar que form es el que se esta enviando, para esto puede solucionarlo rápida y fácilmente agregándole a cada form un input de tipo hidden que tenga por name action y que su valor describa la acción que debería ejecutar PHP como backend cuando reciba el post de alguno de los dos form.

Un ejemplo rápido tomando parte de su código sería el siguiente:

HTML

...
<form action="add2.php" method="post" form name="camion" id="camion" autocomplete="off">
    <input type="hidden" name="accion" value="guardar_camion">
    ...
</form>
...
<form action="add2.php" method="post" name="cliente" class="para_guardar" onSubmit="return limpiar()" id="cliente" autocomplete="off">
    <input type="hidden" name="accion" value="guardar_otros">
    ...
</form>
...

PHP

<?
$request = $_REQUEST[];
switch ($request['action']) {
    case 'guardar_camion':
        // Hacer algo con los datos
        break;
    case 'guardar_otros':
        // Hacer otra cosa
        break;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.