[SOLUCIONADO] Añadir option a select y guardarlo en base de datos

llsastre · #1 (**permalink**) 09/03/2015, 02:54

Hola, quisiera saber si hay alguna manera de añadir una opción option a un select en un formulario para usarlo como elemento seleccionado, guardarlo en la base de datos para usos futuros y continuar con el formulario hasta hacer submit.
Por ejemplo, accedo a un formulario que tiene un select-option que se rellena con el contenido de una tabla de una base de datos. Quiero escoger un elemento que no se encuentra en este select-option, por tanto necesito insertarlo como nuevo elemento, que aparezca en el select-option para escogerlo y que quede grabado en la base de datos para futuras elecciones, y que me permita continuar con el formulario hasta completar todos los campos y enviarlo, todo sin refrescar la página. Esto lo quiero utilizar para hacer un inventario online de un departamento.
Agradezco de antemano cualquier aporte.

garciasanchezdani · #2 (**permalink**) 09/03/2015, 05:53

Hola @llsastre , agradecería que aportes algo de código para poder echarte una mano.
Saludos ;)

llsastre · #3 (**permalink**) 09/03/2015, 06:34

Bueno, todavía estoy pensando el código para ello, pero un ejemplo que me iría bien sería el siguiente:

Código PHP:

 
<form name="nuevoitem" action="grabarnuevoitem.php" method="POST" enctype="multipart/form-data"> 
  <?php 
  // Consultar la base de datos 
    $consulta_mysql='select * from inventario'; 
    $resultado_consulta_mysql=mysql_query($consulta_mysql,$conexion); 
 
    echo "Selecciona el objeto a inventariar: <select name='select1'>"; 
    while($fila=mysql_fetch_array($resultado_consulta_mysql)){ 
        echo "<option value='".$fila['id']."'>".$fila['nombre']."</option>"; 
    } 
    echo "</select>"; 
  ?> 
  &nbsp;&nbsp;<input name="Nuevo Item" type="button" value="nuevoitem" onclick="nuevoitem();"> 
  <br> 
  <input name="cantidad" type="text" size="5" value="cantidad"> 
  <br> 
  <input name="Enviar" type="submit" value="enviar"> 
</form>

Se trata de rellenar el formulario, pero si no me aparece el objeto en el select, entonces pulsando sobre el botón "Nuevo Item" que llame a una función javascript o jquery o similar para poder añadir el nuevo objeto a la base de datos y aparezca en este select para escogerlo y validar el formulario sin tener que refrescar la página (en realidad, el formulario definitivo contendrá muchos más campos, pero antes me gustaría solucionar este punto).

llsastre · #4 (**permalink**) 09/03/2015, 13:40

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&oacute;n:</td><td>'+name+'</td></tr><tr><td>Valor de la opci&oacute;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>&nbsp;&nbsp;<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:&nbsp;&nbsp;
        <input type="text" id="name" name="name" size="40" />&nbsp;&nbsp;&nbsp;&nbsp;
    
        Valor:&nbsp;&nbsp;
        <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.