pasar valor de textbox y un select (combobox) juntos para recibirlos con php

[r0xdrig0]

Hola amigos, les cuento tengo una funcion q me pasa como parametro la fecha inicio y fecha fin de los permisos de trabajo q piden los usuarios (esta funcion me anda bien me recibe los dos parametros de los textbox), per ahora quiero y necesito en la misma funcion q tambien me envie para recibir en php el valor de la lista select (combo box) junto con los dos textbox, la primera funcion q anda sin problema en la q solo envio los dos textbox es esta:

Código:

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);
		}
		});
		}

y aca la funcion q estoy tratando de hacer funcionar

Código:

function pedirPermiso(fecIni, fecFin){
		var parametros = {
		"fecIni" : fecIni,
		"fecFin" : fecFin,
		"tipo_permisos" : tipo_permisos,//aca este es mi arreglo q pretendo  pasarle a php al igual q las variable de los textbox fecIni y fecFin
		};
		

		$.ajax({
		data: parametros, 
		url: 'getPermiso.php',
		type: 'post',
		beforeSend: function () {
		$("#permiso").html("Procesando, espere por favor...");
		},
		success: function (response) {
		$("#permiso").html(response);
		}
		});
		}

alguien de uds me podria ayudar/explicar q modificacion de manera correcta tengo q hacerle a esta funcion para q aparte de pasarme los dos textbox tambien me permita pasar la lista select (combo box) en la misma funcion???

espero haberme explicado bien ..... de antemano muchas gracias bye.

[YYs86]

Porque no usas la función $.serialize() de jquery... es bastante sencilla y potente que definir variable por variable.

var dataString = $('.yourformcontainer').serialize()

Una vez hecho ésto solo tienes que pasar al $.ajax() tu variable utilizando "data: dataString"

Para utilizarlos en PHP se realizaría igual que una función $_POST normal, usando como variables los "name" usados para tus textbox y tu combobox

[r0xdrig0]

Hola YYs86!!!!, gracias por tu respuesta, sabes soy practicamente novato en jquery yu bueno estoy tratando de implementarlo como me dijiste tu la funcion ahora la tengo asi:

Código:

function pedirPermiso(){
		
		var parametros = $("#permiso").serialize();

		$.ajax({
		data: parametros,
		url: 'getPermiso.php',
		type: 'post',
		beforeSend: function () {
		$("#permiso").html("Procesando, espere por favor...");
		},
		success: function (response) {
		$("#permiso").html(response);
		}
		});
		}

y desde el boton la estoy llamando asi

Código:

<input type="button" href="javascript:;" onClick="pedirPermiso();return false;" value="Calcular"/>

y al ejecutar la funcion al presionar el boton imprimpo el arreglo por php con print_r($_POST[]) y el array viene vacio, no me muestra ningun valor, y eso q yo lleno los campos antes de presionar el boton calcular.... estoy llamando bien a la funcion??? o como deberia llamarla??? porfavor agradeceria mucho tu ayuda/guia.... quedo antento a tus comentarios Ayuda pls!!! slds y gracias desde ya

[YYs86]

Hola @r0xdrig0,

Si la función está bien llamada, pero me temo que no estás seleccionando bien el contenedor de la función.

Puedes poner un "alert(parametros);" después de habler declarado y enviarnos una captura del valor que te devuelve?

[r0xdrig0]

Hola YYs86, gracias por tu pronta respuesta.... te cuento q me imprime el array vacion no toma ningun valor q selecciono.... te cuento el contenedor es un div q aparece o desaparece segun la seleccion de otro combobox y (este div contenedor tambien posee un combobox, un boton Calcular y dos cajas de texto la fecha de inicio y la fecha fin)al hacerlo aparecer debo seleccionar sus datos para luego calcular los dias q hay entre la fecha inicio y la fecha de fin y esos datos los envio al archivo getPermiso.php. Anteriormente tenia la funcion q si andaba pero me tomaba los valores de los puros teextbox ya q cuando hacia click en el boton calcular se le perdia el valor del combobox q habia seleccionado y me tomaba solo los valores de los textbox de la fecha inicio y la fecha fin, es por eso q cambie la funcion para q me mantenga el valor seleccionado en el combobox al hacer click en el boton calcular, es por eso q te pregunto, que debo cambiarle a esa funcion para q me tome el valor del combobox sin q este se me pierda al hacer click en calcular junto con los textbox de la fecha inicio y fin???

[YYs86]

Lo único que debes pasarle es tu class o id del contenedor de tu <form> no de tu capa oculta... si pegas el codigo te puedo indicar cual seria

[r0xdrig0]

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&oacute;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&oacute;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">&nbsp;</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&oacute;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">&nbsp;</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.

[YYs86]

Ofu chiquillo que lio de codigo xD

var dataString = $('.demo-description').serialize();

alert(dataString);

[r0xdrig0]

YYs86, disculpa q te moleste tanto mira... al div demo-description le quite la class y le puse un ID de nombre calendario y la funcion pedirPermiso() la deje asi:

Código HTML:

		function pedirPermiso(){
		
		var parametros = $("#calendario").serialize();

		$.ajax({
		data: parametros,
		url: 'getPermiso.php',
		type: 'post',
		beforeSend: function () {
		$("#calendario").html("Procesando, espere por favor...");
		},
		success: function (response) {
		$("#calendario").html(response);
		alert(parametros);
		}
		});
		}

pero aun el array no me muestra nada y me imprimo vacio en la pagina getPermiso.php lo se pq estoy imprimiendo el array en el archivo php asi print_r($_POST[]) y me lo imprime vacio que debo cambiarle a esta funcion??? atento a tu contestacion y agradecido desde ya... slds

[YYs86]

mmm me extraña mucho que no le pasa nada... has hecho la prueba añadiendo el alert() en el jquery?

[r0xdrig0]

Si y me imprime el alert en blanco ... :( sorry la pregunta nuevamente, pero asi como acyualmente tengo la funcion q tengo q cambiarle o en q parte tengo q cambiarle algo para q me tome todos los campos del formulario (el div contenedor principal q tiene dentro el form y todo lo demas se llama #calendario) q deberia cambiarle especificamente a la funcion de acuerdo a como la tengo??? atento a tu contestacion.... slds

[YYs86]

OMFG... FALLO MIO...

Tienes que ponerle un $("#calendario").find('form').serialize();

Pero q noob mira que lo uso a diario...

[r0xdrig0]

hola YYs86!!! Sorry por no cerar ell tema antes pero he estado con harton trabajo y mil gracias pq solucione el problemilla de jquery.... gracias YYs86 y cualquier cosa si no me resulta consultare slds!!!