YY, aca te pegare todo mi code:
Código HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calendario</title>
<link rel="stylesheet" href="css/jquery-ui-1.8.23.custom.css">
<link rel="stylesheet" href="css/validation.css" type="text/css" media="screen" />
<script src="js/jquery-1.8.0.js"></script>
<script src="js/validacion.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.datepicker-es.js"></script>
<script src="js/jquery.ui.datepicker.js"></script>
<script src="js/validation.js"></script>
<style type="text/css">
h2
{
font-family: "Fuente predeterminadaArial", Helvetica, sans-serif;
font-size: 20px;
color:#339900;
}
h3
{
font-family: "Fuente predeterminadaArial", Helvetica, sans-serif;
font-size: 18px;
color:#339900;
}
.spann
{
font-family: "Fuente predeterminadaArial", Helvetica, sans-serif;
font-size: 14px;
color:#339900;
}
</style>
<script>
function mostrar(id)
{
if (id == "Feriado")
{
$('#tipo_per').removeAttr('disabled');
$("#feriado").show();
$("#permiso").hide();
}
if (id == "Permiso")
{
$("#feriado").hide();
$("#permiso").show();
}
}
</script>
</head>
<body>
<div class="demo-description">
<form action="" method="post" name="calendarizacion" id="calendarizacion">
<h2>Seleccione Petición: </h2>
<select id="feriado_permiso" name="feriado_permiso" onChange="mostrar(this.value);">
<option >Seleccione...</option>
<option value="Permiso">Permiso</option>
<option value="Feriado">Feriado</option>
</select>
<div id="feriado" style="display: none;">
<script>
$(function() {
$( "#fecha1" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function( selectedDate ) {
$( "#fecha2" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#fecha2" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function( selectedDate ) {
$( "#fecha1" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
<script>
/*function realizaProceso(fecha1, fecha2){
var parametros = {
"fecha1" : fecha1,
"fecha2" : fecha2
};
$.ajax({
data: parametros,
url: 'getFecha.php',
type: 'post',
beforeSend: function () {
$("#feriado").html("Procesando, espere por favor...");
},
success: function (response)
{
$("#feriado").html(response);
}
});
}*/
</script>
<h3>Periodo Petición De Feriado...</h3>
<table>
<tr>
<td><label for="fecha1" class="spann">Desde: </td>
<td><input type="text" id="fecha1" name="fecha1" readonly/></label><span id="fecha1Info"></span></td>
<td><label for="fecha2" class="spann">Hasta:</td>
<td colspan="4"> </td>
<td colspan="4"><input type="text" id="fecha2" name="fecha2" readonly/></label><span id="fecha2Info"></span></td>
</tr>
<tr>
<td colspan="4"><input type="submit" value="Calcular"/></td>
</tr>
</table>
</div>
</div>
<div id="permiso" style="display: none;">
<h2>Seleccione Tipo de Permiso:</h2>
<select id="tipo_per" name="tipo_per" onChange="mostrar(this.value);">
<option>Seleccione...</option>
<option value="Nacimiento_Hijo">Nacimiento Hijo</option>
<option value="Matrimonio">Matrimonio</option>
<option value="Otros">Otros</option>
<option value="Fiestas_Patrias">Fiestas Patrias</option>
<option value="Vacaciones_de_Invierno">Vacaciones de Invierno</option>
<option value="Administrativos">Administrativos</option>
</select>
<!-- Fin select tipo_per -->
<script>
$(function() {
$( "#fecIni" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function( selectedDate ) {
$( "#fecFin" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#fecFin" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function( selectedDate ) {
$( "#fecIni" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
<script>
/*function pedirPermiso(fecIni, fecFin){
var parametros = {
"fecIni" : fecIni,
"fecFin" : fecFin
};
$.ajax({
data: parametros,
url: 'getPermiso.php',
type: 'post',
beforeSend: function () {
$("#permiso").html("Procesando, espere por favor...");
},
success: function (response) {
$("#permiso").html(response);
}
});
}*/
function pedirPermiso(){
var parametros = $("#calendarizacion").serialize();
$.ajax({
data: parametros,
url: 'getPermiso.php',
type: 'post',
beforeSend: function () {
$("#permiso").html("Procesando, espere por favor...");
},
success: function (response) {
$("#permiso").html(response);
}
});
}
</script>
<h3>Periodo Petición De Permiso...</h3>
<table>
<tr>
<td><label for="fecIni" class="spann">Desde:</td>
<td><input type="text" id="fecIni" name="fecIni" readonly/></label><span id="fecIniInfo"></span></td>
<td><label for="fecFin" class="spann">Hasta:</td>
<td colspan="4"> </td>
<td colspan="4"><input type="text" id="fecFin" name="fecFin" readonly/></label><span id="fecFinInfo"></span></td>
</tr>
<tr>
<td colspan="4"><input type="button" value="CalcularPermiso"/></td>
</tr>
</table>
</form>
<div style="display:none"><b></b>
</div>
</div>
</div>
</body>
</html> Donde el div Oculto es #permiso mi form se llama #calendarizacion y la funcion se llama pedirPermiso(); desde ya muchas gracias pr tu ayuda y que atenticimo a tu contestacion slds.