Greetings to all, I have this form that sends data without leaving to another page, but when doing it with ajax, the other page does not receive the data, specifically in the client form. here my code.
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> </p>
<table width="358" height="270" border="0" cellspacing="0">
<tr>
<td>Nombre y apellido:</td>
<td> </td>
<td><label for="nomapell"></label>
<input type="text" name="nomapell" id="nomapell" required /></td>
</tr>
<tr>
<td>Cédula:</td>
<td> </td>
<td><label for="ced"></label>
<input type="text" name="ced" id="ced" required/></td>
</tr>
<tr>
<td>Código del conductor:</td>
<td> </td>
<td><label for="uni_co"></label>
<input type="text" name="uni_co" id="uni_co" required/></td>
</tr>
<tr>
<td>Celular:</td>
<td> </td>
<td><label for="cel"></label>
<input type="text" name="cel" id="cel" required/></td>
</tr>
<tr>
<td>Fecha de nacimiento</td>
<td> </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> </p>
<table width="358" height="270" border="0" cellspacing="0">
<tr>
<td>Codigo del cliente:</td>
<td> </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> </td>
<td><label for="nom_cli"></label>
<input type="text" name="nom_cli" id="nom_cli" required/></td>
</tr>
<tr>
<td>Telefono:</td>
<td> </td>
<td><label for="tel"></label>
<input type="text" name="tel" id="tel" required/></td>
</tr>
<tr>
<td>Fax:</td>
<td> </td>
<td><label for="fax"></label>
<input type="text" name="fax" id="fax" required/></td>
</tr>
<tr>
<td>E-Mail</td>
<td> </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> </td>
<td> </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> </p>
<table width="358" height="221" border="0" cellspacing="0">
<tr>
<td>Código de chasis/Camabaja/Mesa:</td>
<td> </td>
<td><label for="num_int"></label>
<input type="text" name="num_int" id="num_int" required/></td>
</tr>
<tr>
<td>Placa:</td>
<td> </td>
<td><label for="placa_pa"></label>
<input type="text" name="placa_pa" id="placa_pa" required/></td>
</tr>
<tr>
<td>Tipo:</td>
<td> </td>
<td><label for="tipo"></label>
<select name="tipo" id="tipo" required>
<option value="">Elija</option>
<option value="Chasis20">Chasis 20"</option>
<option value="Chasis40">Chasis 40"</option>
<option value="Chasis45">Chasis 45"</option>
<option value="Mesa16">Mesa 16"</option>
<option value="Mesa18">Mesa 18"</option>
<option value="Mesa20">Mesa 20"</option>
<option value="Mesa22">Mesa 22"</option>
<option value="Cama baja">Cama baja</option>
<option value="Cama baja modular">Cama baja modular</option>
</select></td>
</tr>
</table>
<p> </p>
<p>
<input type="submit" class="button" name="send4" value="Guardar" />
</p>
</form>
</div>
</div>
</center>
</body>
</html>And the 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>";
}