Mostrar datos de formulario sin recargar en jquery

churretin · #1 (**permalink**) 30/01/2013, 18:38

Hola amigos os cuanto lo que estoy intentando, son dos combos anidados, con provincias y ciudades, en un formulario con un boton, al pulsar el boton pretendo que me salga el id de la poblacion sin recargar la pagina en un div mediante jquery, los combos me funcionan bien, y consigo mostrar un alert con el id de la poblacion

pero lo que intento es que en vez de en un alert() cuando le doy a enviuar el formulario, aparezca en un div, sin recargar la pagina

todo codigo que intente me inutiliza el segundo combo, por lo que os muestro el codigo con el alert() en la funcion alert_id() que es donde tiene el vallor que quiero pasar por get o post prueba.php que carga en el div mapa:

index.php

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ajax Tutorial: Dynamic Loading of ComboBox using jQuery and Ajax in PHP</title>

<script type="text/javascript" src="jquery-1.3.2.js"></script>

<script type="text/javascript">

$(document).ready(function() {

	$('#loader').hide();
	$('#show_heading').hide();
	
	$('#search_category_id').change(function(){
		$('#show_sub_categories').fadeOut();
		$('#loader').show();
		$.post("get_chid_categories.php", {
			parent_id: $('#search_category_id').val(),
		}, function(response){
			
			setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400);
		});
		return false;
	});
});

function finishAjax(id, response){
  $('#loader').hide();
  $('#show_heading').show();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
} 

function alert_id()
{
	if($('#sub_category_id').val() == '')
	alert('Please select a sub category.');
	else
	alert($('#sub_category_id').val());
	return false;
}

</script>

</head>
<?php
		include('dbcon.php');?>
<body>

<h1>Dynamic Loading of ComboBox using jQuery and Ajax in PHP </h1>

<br clear="all" /><br clear="all" /><br clear="all" />

<div style="padding-left:30px;">
<form action="#" name="form" id="form" method="post" onsubmit="return alert_id();" enctype="multipart/form-data">

	<div class="both">
		<h4>Selecione Provincia</h4>
		<select name="search_category"  id="search_category_id">
		<option value="" selected="selected"></option>
		<?php
		$query = "select * from provincia";
		$results = mysql_query($query);
		
		while ($rows = mysql_fetch_assoc(@$results))
		{?>
			<option value="<?php echo $rows['idprovincia'];?>"><?php echo $rows['provincia'];?></option>
		<?php
		}?>
		</select>		
	</div>
	
	<div class="both">
		<h4 id="show_heading">Select Sub Category</h4>
		<div id="show_sub_categories" align="center">
			<img src="loader.gif" style="margin-top:8px; float:left" id="loader" alt="" />
		</div>
	</div>
	<br clear="all" /><br clear="all" />
	
	<input type="submit" name="" value="GO" />
</form>
</div>
<br clear="all" /><br clear="all" /><br clear="all" />
<br clear="all" /><br clear="all" /><br clear="all" />
<br clear="all" /><br clear="all" />
<br clear="all" /><br clear="all" /><br clear="all" />
<br clear="all" /><br clear="all" /><br clear="all" />
<div id="mapa" align="center">
			
		</div>
</body>
</html>

donde tengo el segundo combo get_chid_categories.php:

Código PHP:

  <?php 
 
    include('dbcon.php'); 
 
if($_REQUEST) 
{ 
    $id     = $_REQUEST['parent_id']; 
 
    $query = "select * from poblacion where idprovincia = ".$id; 
    $results = mysql_query( $query);?> 
     
    <select name="sub_category"  id="sub_category_id"> 
    <option value="" selected="selected"></option> 
    <?php 
    while ($rows = mysql_fetch_assoc(@$results)) 
    {?> 
        <option value="<?php echo $rows['idpoblacion'];?>  id=<?php echo $rows['idpoblacion'];?>"><?php echo $rows['poblacion'];?></option> 
    <?php 
    }?> 
    </select>     
     
<?php     
} 
?>

y donde tiene que llegar el id de la poblacion tras pulsar el envio de formulario prueba.php

Código PHP:

  <?php 
echo $id_poblacion=$GET['sub_category_id']; 
?>

Gracias por su tiempo

maycolalvarez · #2 (**permalink**) 04/02/2013, 11:54

1 - utiliza una version vieja de jQuery, aunque ése no sea el problema trate de usar si no la última: una reciente y estable como 1.6

2 - $_REQUEST no se debe usar en PHP, use $_POST o $_GET, y para verificar si hay post puede usar isset($_POST['algun_input_utilizado'])

3 - por un lado usa AJAX para los selects dependientes, eso está bien, ¿porqué no usar AJAX para envíar el form en vez del envío tradicional?, con AJAX puede evitar el recargo de la página y los tediosos alert, eso sí, debe devolver siempre false en el onsubmit para que no interfiera con ajax