Hola tengo un problema con esto

jonathan777 · #1 (**permalink**) 20/03/2011, 18:09

Estoy practicando con javascript y eh hecho un formulario en donde hay un boton agregar que al pulsarlo genera una ventana pidiendo datos tipeas y aceptar y tendria que agregar un nuevo elemento a una lista select.
El asunto es que no lo agrega no se si pudiesen ayudarme a solucinarlo.

Código Javascript:

Ver original<!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>Documento sin t&iacute;tulo</title>
 
        <script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
        <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
 
        <form id="form8" name="form8" method="post" action="">
            <p>Usuario&nbsp;&nbsp;&nbsp;
                <input type="text" name="txtusuario" id="txtusuario" />
                &nbsp; Raza&nbsp; &nbsp;
                <select name="lstRazas" id="lstRazas">
                    <option value="MAtlantis" selected="selected">Atlantis</option>
                    <option value="MAsgard">Asgard</option>
                    <option value="MOri">Ori</option>
                    <option value="MWraith">Wraith</option>
                    <option value="MReplicante">Replicante</option>
                    <option value="MJaffa">Jaffa</option>
                    <option value="MTauri">Tauri</option>
                    <option value="MGoauld">Goauld</option>
                </select>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
        </form>
        <script>
            var Receptora ="ini";
            var Inicial ="";
            function Ingresar()
            {
                var MiVariable=prompt("Ingresa Direccion")
                //alert(MiVariable)
                Receptora = MiVariable;
                //prompt almacena lo que escribas en la variable "MiVariable" luego puedes utilizarla a como gustes, en este ejemplo se muestra una ventana de alerta que muestra el contenido de la variable "MiVariable"
            }         
        </script>
 
        <form id="form9" name="form9" method="post" action="">
            <p>Direcciones  </p>
            <select name="transporte" size="5" onchange="document.getElementById('form9').submit();">
                <script>
                    Inicial = Inicial +" "+"<option value="+Receptora+">"+Receptora+"</option>";
                    alert(Inicial)
                    document.write(Inicial);
                </script>
            </select>
        </form>
        <form id="form6" name="form6" method="post" onclick="Ingresar()">
            <input type="submit" name="btnAgregar" id="btnAgregar" value="Agregar" />
        </form>
        <form id="form7" name="form7" method="post" action="">
            <input type="submit" name="btnEliminar" id="btnEliminar" value="Eliminar" />
        </form>
        <form id="form5" name="form5" method="post" action="">
            <input type="submit" name="btnConsulta" id="btnConsulta" value="GUARDAR DATOS DE ESTA DIRECCION" />
        </form>
        <div id="Panel_principal" class="TabbedPanels">
            <ul class="TabbedPanelsTabGroup">
                <li class="TabbedPanelsTab" tabindex="0">Tropas</li>
                <li class="TabbedPanelsTab" tabindex="0">Naves</li>
                <li class="TabbedPanelsTab" tabindex="0">Defensas</li>
            </ul>
            <div class="TabbedPanelsContentGroup">
                <div class="TabbedPanelsContent">Contenido 1
                    <form id="form1" name="form1" method="post" action="">
                    </form>
                </div>
                <div class="TabbedPanelsContent">Contenido 2
                    <form id="form2" name="form2" method="post" action="">
                    </form>
                </div>
                <div class="TabbedPanelsContent">Contenido 3
                    <form id="form3" name="form3" method="post" action="">
                    </form>
                </div>
            </div>
        </div>
        <p>&nbsp;</p>
        <p>&nbsp;&nbsp;</p>
 
        <form id="form4" name="form4" method="post" action="">
            <input type="submit" name="btnRegistrar" id="btnRegistrar" value="Registrar" />
        </form>
 
        <form id="form5" name="form5" method="post" action="">
            <input type="submit" name="btnCancelar" id="btnCancelar" value="Cancelar" />
        </form>
        <p>&nbsp;</p>
        <script type="text/javascript">
            <!--
            var TabbedPanels1 = new Spry.Widget.TabbedPanels("Panel_principal");
            //-->
        </script>
    </body>
</html>

zerokilled · #2 (**permalink**) 20/03/2011, 18:28

buenas...

los nuevos option a agregar debes hacerlo con funciones del DOM. puedes usar el constructor Option o el metodo document.createElement para crear el elemento <option>. luego obtienes la referencia del elemento <select> e invocas el metodo add para agregar el <option> creado. por otro lado, tienes un desastre en el codigo. tienes muchos <form> innecesariamente; con uno basta.

http://www.w3schools.com/jsref/met_select_add.asp

jonathan777 · #3 (**permalink**) 20/03/2011, 19:11

Hola aplique lo que me mencionaste y me resulto bien el problema radica en que al seleccionar un elemento como habras visto "onchange" se pierden los valores agregados, habra alguna forma de hacer persistir esos valores a la recarga?.

zerokilled · #4 (**permalink**) 20/03/2011, 19:20

no me habia fijado que tenias onchange... mas bien me concentre en como invocabas la funcion y el procedimiento que este hacia.

de todos modos, la unica forma que esos valores persistan luego de una recarga, es que envies esos valores al servidor y que este los genere. digo, seria lo mas adecuado. ya en esta parte javascript no tiene nada que ver, sino lenguaje de servidor (asp, php, jsp, python, etc.) y probablemente una base de datos.

en javascript puedes recrear los options pero necesitas algun modo de almacenamiento. por ejemplo, cookies o local storage. la contraparte es que el navegador pudiera tener inhabilitado las cookies o no tener soporte para local storage. de ahi que la forma mas segura es enviar los options al servidor.

jonathan777 · #5 (**permalink**) 20/03/2011, 21:06

entonces pasaria el valor completo a una variable php y ahi es el asunto como enviarlo.