PHP - Añadir option a select y guardarlo en base de datos

   
Vista:

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

Publicado por Llorenç (7 intervenciones) el 09/03/2015 10:03:07
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.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve

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

Publicado por xve (5519 intervenciones) el 09/03/2015 15:01:00
Hola Llorenç, la manera que yo utilizaría, seria abrir una capa (<div>) por encima de la pantalla para poder añadir el nuevo valor.
Una vez introducido, mediante ajax, lo añadiría a la base de datos, y también añadiría el <option> al <select>.

No se si esto te serviría...

Si necesitas que te realice un ejemplo, muéstranos el formulario y intento ayudarte, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

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

Publicado por llsastre (7 intervenciones) el 09/03/2015 18:33:13
En php y mysql más o menos me defiendo. Lo que no manejo muy bien, aún, es Ajax y/o jquery, así que me vendría bien un ejemplo comentado. Este es un formulario sencillo de lo que pretendo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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 ajax 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). Entiendo que esto iría dentro del <div> y que al pulsar el botón llamase a otra página para añadir el nuevo ítem a la base de datos, pero no sabría cómo refrescar el <select> - <option> sin refrescar la página.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

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

Publicado por llsastre (7 intervenciones) el 09/03/2015 20:41:32
Bueno xve, después de leer tu comentario me has proporcionado algunas ideas que, googleando, he conseguido concretar. Este sería el script que he estado buscando y que, al final, con cositas de aquí y de allá he logrado que funcione:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!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.

Muchas gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

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

Publicado por xve (5519 intervenciones) el 10/03/2015 08:15:21
Gracias por compartirlo llsastre!!!

He intentado probarlo, pero al no disponer de los estilos se ve todo muy extraño... seria posible que nos adjuntaras el archivo de estilos?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

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

Publicado por llsastre (7 intervenciones) el 10/03/2015 12:16:02
Ahí tienes el styles.css que he usado, pero esto se puede cambiar según el diseño de tu web y no influye en el funcionamiento del script. Sólo es diseño.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
#content {
        width: 850px;
    }
 
    #close {
        float: right;
        font-weight: bold;
        color: red;
    }
 
    #element {
        /*margin: 0px auto;*/
        min-height: 100px;
        width: 850px;
        box-shadow: 0 2px 5px #666666;
        padding: 10px;
    }
 
 
/*.content {
    margin: 0px auto;
    width: 600px;
}*/
.comment {
    /*border: 1px solid #DDDDDD;*/
    box-shadow: 0 2px 5px #666666;
    border-radius: 8px 8px 8px 8px;
    list-style: none outside none;
    margin: 15px 0 10px;
    padding: 15px;
    width: 96%;
}
.comment-avatar {
    float: left;
    padding-left: 10px;
    padding-top: 10px;
    position: relative;
    width: 6%;
    margin-left: 10px;
}
.comment-autor {
    float: left;
    margin: 10px 10px 19px;
    padding-left: 10px;
    padding-top: 10px;
    position: relative;
    width: 74%;
}
.comment-text {
    margin-right: 10px;
    margin-top: 71px;
    padding-left: 10px;
    padding-top: 10px;
}
 
#register_form {
    box-shadow: 0 2px 5px #666666;
    border-radius: 8px 8px 8px 8px;
    list-style: none outside none;
    margin: 15px 0 10px;
    padding: 15px;
}
 
.header {
width:100%;
height:100px;
box-shadow: 0 2px 5px #666666;
text-align:center;
padding-top:15px;
}

El diseño (css) y la idea (script Ajax) la he encontrado en http://www.jose-aguilar.com/blog/mostrar-formulario-oculto-y-precesar-con-ajax/
El mérito es suyo, no mío.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

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

Publicado por xve (5519 intervenciones) el 10/03/2015 18:08:18
Perfecto muchas gracias!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar