Eso quería, implementar Ajax, pero no soy muy ducho en ello, por ello pedía ayuda. Me defiendo con php y mysql pero todavía debo aprender con Ajax y jquery.
Bueno, después de googlear un rato este sería el script que he estado buscando y que, al final, con cositas de aquí y de allá he logrado que funcione:
Código :
<!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=utf-8" />
<title>Prueba de añadir option a un select</title>
<link type="text/css" href="css/styles.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("#element").hide();
});
$("#show").click(function(){
$("#element").show();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#enviar-btn").click(function() {
var nameop = $("input#name").val();
var valoropcion=$("input#opvalor").val();
/*var dataString = 'nameop=' + nameop + '&opvalor=' + valoropcion;
$.ajax({
type: "POST",
url: "addcomment.php",
data: dataString,
success: function() {
$("#element").hide();
$('#newmessage').append('<h2>Tu información ha sido grabada correctamente!</h2><table><tr><td>Nombre opción:</td><td>'+name+'</td></tr><tr><td>Valor de la opción: </td><td>'+valorop+'</td></tr></table>');
}
});*/
$('#campo_select_append').append('<option value="'+valoropcion+'" selected="selected">'+nameop+'</option>');
return false;
});
$("#enviar").click(function() {
var mitexto = $("#campo_select_append option:selected").text();
var mivalor = $("#campo_select_append").val();
alert("Has seleccionat "+mitexto+" amb valor id="+mivalor);
})
});
</script>
</head>
<body>
<div class="header"><h2>Cabecera de simulación para ver el efecto jquery-ajax</h2></div>
<div class="capa1">
<br /><br />
Tenemos un select en un formulario:
<br /><br />
<form method="post" action="">
<select name="campo_select_append" id="campo_select_append">
<option value="opcion_1">Opción 1</option>
<option value="opcion_2">Opción 2</option>
<option value="opcion_3">Opción 3</option>
<option value="opcion_4">Opción 4</option>
<option value="opcion_5">Opción 5</option>
<option value="opcion_6">Opción 6</option>
<option value="opcion_7">Opción 7</option>
<option value="opcion_8">Opción 8</option>
<option value="opcion_9">Opción 9</option>
<option value="opcion_10">Opción 10</option>
</select> <a href="#" id="show"><input type="button" value="Añadir opción"></a>
<br />
<input id="enviar" name="Enviar" type="submit" value="enviar" />
<br />
</form>
</div>
<div id="newmessage"></div>
<!--<a href="#" id="show">Mostrar</a>-->
<div id="element" style="display: none;">
<div id="close"><a href="#" id="hide"><input type="button" value="Cerrar formulario"></a></div>
<br /><br />
<form method="post" action="" name="nuevoitem" id="nuevoitem">
Nombre de la nueva opción:
<input type="text" id="name" name="name" size="40" />
Valor:
<input type="text" id="opvalor" name="opvalor" size="20" />
<br/><br/>
<div style="margin-left: 376px;"><input name="submit" type="submit" value="enviar" id="enviar-btn" /></div>
</form>
</div>
</body>
</html>
Al pulsar el botón "Añadir opción" sale una ventana <div> con el formulario para añadir un nuevo option en el select. Rellenamos y enviamos, y la comprobación la hago con el alert y veo que funciona. La parte comentada del Ajax sería la que enviaría la información POST a una página que insertaría el valor en la base de datos y que sería transparente para el usuario. En el styles.css iría el formato de los <div> y demás elementos, pero básicamente creo que así va bien. Ahora debo completarlo y ver si todo funciona conjuntamente. Naturalmente, esto se puede mejorar.
