Autor Tema: JavaScript. Ejercicio uso de cookies. guardar el valor seleccionado en select  (Leído 7461 veces)

javaquery

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 125
    • Ver Perfil
Hola, ¿alguien puede ayudarme en este ejercicio?:

Programa con JavaScript que al clicar sobre Guardar Datos se guarden todos los datos de los inputs en una cookie para cada input. Pej: para el input inputNombre crea una cookie que guarde su valor, para el input inputCodigo crea otra cookie con su valor, etc...)
« Última modificación: 27 de Noviembre 2016, 21:18 por Ogramar »

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:duda ejercicio
« Respuesta #1 en: 17 de Noviembre 2016, 14:59 »
Hola javimf.

Lo primero indicarte que leyeras las normas del foro para una correcta utilización de este.
https://www.aprenderaprogramar.com/foros/index.php?topic=1460.msg7784#msg7784


Sobre tu duda, puedes encontrar ayuda a tu consulta en el siguiente enlace.

https://www.aprenderaprogramar.es/index.php?option=com_content&view=article&id=877:javascript-cookies-ique-son-expires-max-age-path-secure-borrar-documentcookie-ejemplo-cu01188e&catid=78:tutorial-basico-programador-web-javascript-desde-&Itemid=206

Si no fuese suficiente, puedes pegar tu código y ayudarte sobre el.

Saludos. ;D

javaquery

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 125
    • Ver Perfil
Re:duda ejercicio
« Respuesta #2 en: 17 de Noviembre 2016, 15:09 »
Buenas tardes.

Te pego el codigo ,
Código: [Seleccionar]

 </head>

    <body>

        <form name="formulario" method="post" action="ejemplo.php">

            Nombre Producto: <input type ="text" id="texto" name="nombre" placeholder="Nombre" size ="30" onkeyup="validarNombre(this.value)" /> <br/>

            Codigo de Barras:<input type="text" id="codigo" name="codigo" placeholder="codigo" size="15"   /> <br/>

            Caducidad dia : <input type="text"  id="dia" name="dia" placeholder="Dia" size="5" />

            mes :<input type ="text" name="mes" id="mes" placeholder ="Mes" size ="5" />

            año :<input type="text" name="año" id="anio" placeholder="Año" size="5" /> <br/>

 

            <p>

                Oferta :

                <select  id="ofertas">

                    <option value="1">Normal</option>

                    <option value="2">2x1</option>

                    <option value="3">20%</option>

                    <option value="4">10%</option>

 

                </select>

            </p>

            Congelado  <input type="checkbox" id ="checkbox1"/>

            Fruta <input type="checkbox" id="checkbox2"/>

            Snack<input  type="checkbox" id="checkbox3"/><br/>

 

            <input class="boton" type ="submit" name="registrate" value="Registrate"/>

            <input class="boton" type="button" name="limpiar" value="Limpia el formulario"/>

            <input class="boton" type="button" name="guardar " value="Guardar datos"/>

            <input class="boton" type="button" name="recuperar" value="Recuperar datos"/><br/>

 

             <textarea id ="area" rows="2" cols="50">

            TextArea con la información del formulario

 

                </textarea>

 

            <button onclick="nombre_funcion()">Enviar</button>

        </form>

 

    </body>

</html>
<script>

function validarNombre(valor){

if(valor.length>=3 && valor.length<=20)

{

var re=/[0-9]/;

if(valor[0].match(re))

{

document.getElementById("area").innerHTML="NO puede empezar por un numero";

}else{

document.getElementById("area").innerHTML=valor;

}

}
}

</script>



<script>

function setCookie(cnmae, cvlaue, exdays){
var d =new Date();
d.setTime(d.getTime()+ (exdays*24*60*60*1000));
var expires="expires="+d.toGMTString();
document.cookie= cname +"=" + cvalue + "; " + expires;

}

function guardarValor(){

var valor = window.

}



pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:duda ejercicio
« Respuesta #3 en: 17 de Noviembre 2016, 17:13 »
Te dejo un pequeño código que pide una serie de datos y los guarda como cookies, mira a ver si te vale, sino, mas tarde intentaré ayudarte con tu código.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo aprenderaprogramar.com JavaScript CU01188E</title><meta charset="utf-8">
<style>
#pulsador {padding:15px; width: auto; display: inline-block; margin: 25px;
cursor: pointer; color: yellow; border-radius: 40px; background: purple;}
</style>
<script type="text/javascript">
function createCookie(name,value,days) {
                if (days) {
                               var date = new Date();
                               date.setTime(date.getTime()+(days*24*60*60*1000));
                               var expires = "; expires="+date.toGMTString();
                } else {
var expires = "";
}
                document.cookie = name+"="+value+expires+"; path=/";
}
function eraseCookie(name) { createCookie(name,"",-1); }
function mostrarTodasLasCookies(){
var misCookies = [];
misCookies = document.cookie.split(';');
var msg = 'Actualmente hay ' + misCookies.length + ' cookies en el documento.<br/>';
for(var i=0; i<misCookies.length; i++){
msg += 'Cookie nº' + (i+1) + ' con nombre: ' + misCookies[i].split('=',1) + ' y valor: ';
var nombre = misCookies[i].split('=',1) + '=';
var valor = misCookies[i];
msg += valor.substring(nombre.length,valor.length) + '<br/>';
}
return msg;
}
function pedirDatosCookies(){
var nombre = [], valor = [];
for (i=0; i<3; i++){
nombre[i] = prompt('Inserte el nombre para la cookie número ' + (i+1) + ': ');
valor[i] = prompt('Insete el valor para la cookie número ' + (i+1) + ': ');
createCookie(nombre[i], valor[i], 1);
}
document.getElementById('contenedorCookies').innerHTML = 'Lista de cookies: <br/>' + mostrarTodasLasCookies() + '<br/><br/>';
var misCookies = document.cookie.split(';');
document.getElementById('contenedorCookies').innerHTML += 'Ahora borraremos la última cookie creada, que es: ' + misCookies[misCookies.length-1];
eraseCookie(misCookies[misCookies.length-1].split('=', 1));
document.getElementById('contenedorCookies').innerHTML += '<br/><br/>La lista de cookies queda asi: <br/>' + mostrarTodasLasCookies();
}
</script>
</head>
<body>
<h3>Crearemos 3 cookies e interactuaremos sobre ellas</h3>
<div id ="pulsador" onclick="pedirDatosCookies()"> Probar </div>
<div id="contenedorCookies"></div>
</body>

Recuerda que para que funcione tienes que que tener activado el uso de cookies en tu navegador.

Saludos.

javaquery

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 125
    • Ver Perfil
Re:JavaScript. Ejercicio sobre uso de cookies.
« Respuesta #4 en: 17 de Noviembre 2016, 17:52 »
ahora no puedo probarlo estoy en el trabajo, luego lo pruebo a ver, ¿se puede hacer con estas funciones?
Código: [Seleccionar]
function setCookie(cname,cvalue,exdays) {
  var d = new Date();
  d.setTime(d.getTime()+(exdays*24*60*60*1000));
  var expires = "expires="+d.toGMTString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
 var name = cname + "=";
 var ca = document.cookie.split(';');
 for(var i=0; i<ca.length; i++)    {
   var c = ca[i].trim();
   if (c.indexOf(name)==0) return   c.substring(name.length,c.length);
  }
 return "";
 }
« Última modificación: 20 de Noviembre 2016, 16:45 por pedro,, »

javaquery

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 125
    • Ver Perfil
Re:JavaScript. Ejercicio sobre uso de cookies.
« Respuesta #5 en: 19 de Noviembre 2016, 17:24 »
He mirao el codigo pero no me queda claro¿puedes echarme una mano? voy muy justo de tiempo, tengo que entregar el lunes la practica, mejor dicho terminarla mañana domingo

un saludo

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:JavaScript. Ejercicio sobre uso de cookies.
« Respuesta #6 en: 20 de Noviembre 2016, 01:09 »
Buenas.

Para crear la coockie en tu código añadí una función que se encarga de preparar los datos que se guardarán en la coockie, usando tu función setCookie().

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo aprenderaprogramar.com JavaScript CU01188E</title>
  <meta charset="utf-8">
  <script>

    function validarNombre(valor){
        if(valor.length>=3 && valor.length<=20)
        {
            var re=/[0-9]/;
            if(valor[0].match(re))
            {
                document.getElementById("area").innerHTML="NO puede empezar por un numero";
            }else{
                document.getElementById("area").innerHTML=valor;
            }
        }
    }

    function setCookie(cnmae, cvlaue, exdays){
        var d =new Date();
        d.setTime(d.getTime()+ (exdays*24*60*60*1000));
        var expires="expires="+d.toGMTString();
        document.cookie= cname +"=" + cvalue + "; " + expires;
    }
    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++)    {
            var c = ca.trim();
            if (c.indexOf(name)==0) return   c.substring(name.length,c.length);
        }
        return "";
    }
    function crearDatosCoockie() {
        var nombreProducto = document.getElementById('nombre').value;
        var codigoBarras = document.getElementById('codigo').value;
        setCookie(nombreProducto, codigoBarras, 1);

    }
</script>
</head>
<body>

    <form name="formulario" method="post" action="ejemplo.php">
        Nombre Producto: <input type ="text" id="nombre" name="nombre" placeholder="Nombre" size ="30" onkeyup="validarNombre(this.value)" /> <br/>
        Codigo de Barras:<input type="text" id="codigo" name="codigo" placeholder="codigo" size="15"   /> <br/>
        Caducidad dia : <input type="text"  id="dia" name="dia" placeholder="Dia" size="5" />
        mes :<input type ="text" name="mes" id="mes" placeholder ="Mes" size ="5" />
        año :<input type="text" name="año" id="anio" placeholder="Año" size="5" /> <br/>
        Oferta :
        <select  id="ofertas">
            <option value="1">Normal</option>
            <option value="2">2x1</option>
            <option value="3">20%</option>
            <option value="4">10%</option>
        </select>

        Congelado  <input type="checkbox" id ="checkbox1"/>
        Fruta <input type="checkbox" id="checkbox2"/>
        Snack<input  type="checkbox" id="checkbox3"/><br/>
        <input class="boton" type ="submit" name="registrate" value="Registrate"/>
        <input class="boton" type="button" name="limpiar" value="Limpia el formulario"/>
        <input class="boton" type="button" name="guardar " value="Guardar datos" onclick="crearDatosCoockie();"/>
        <input class="boton" type="button" name="recuperar" value="Recuperar datos"/><br/>
        <textarea id ="area" rows="2" cols="50">
            TextArea con la información del formulario
        </textarea>
        <button onclick="nombre_funcion()">Enviar</button>
    </form>
</body>
</html>

En este código se guardan el nombre y el código de barras en la coockie, si hay que guardar mas datos o menos, me dices y lo cambio.

Saludos.
« Última modificación: 20 de Noviembre 2016, 16:43 por pedro,, »

javaquery

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 125
    • Ver Perfil
Re:JavaScript. Ejercicio sobre uso de cookies.
« Respuesta #7 en: 20 de Noviembre 2016, 01:58 »
Me queda por guardar solo el del select, los demas los tengo, el del select se me resiste,
gracias

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:JavaScript. Ejercicio sobre uso de cookies.
« Respuesta #8 en: 20 de Noviembre 2016, 16:41 »
Prueba con esto para recuperar el valor.

Código: [Seleccionar]
var oferta = document.getElementById('ofertas');
        var opcionSeleccionada = oferta.options[oferta.selectedIndex].textContent;

Luego pásalo como parámetro a la función setCookies() y ya tendrás el valor de la opción seleccionada.

Saludos. ;D
« Última modificación: 20 de Noviembre 2016, 16:44 por pedro,, »

javaquery

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 125
    • Ver Perfil
Re:JavaScript. Ejercicio sobre uso de cookies.
« Respuesta #9 en: 20 de Noviembre 2016, 16:56 »
Hola
tengo estas dos funciones una guarda las cookies de los input y la otra los muestra.
al darle al boton guardar se guardan en las cookies y al darle al boton recuperardatos se recuperarn y se rellenan los input con los valores. ?como lo haria en la cookie del select? adjunto el codigo
Código: [Seleccionar]

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="formulario.js" type="text/javascript"></script>
        <link rel="stylesheet" href="./formulario.css" type="text/css">
    </head>
    <body>
        <form name="formulario" method="post" action="ejemplo.php" onsubmit ="  return  validaSelec(this.value) && validaCheckbox(this.value)" >
            Nombre Producto: <input type ="text" id="texto" name="nombre" placeholder="Nombre" size ="30" onkeyup="validarNombre(this.value)" /> <br/>
            Codigo de Barras:<input type="text" id="codigo" name="codigo" placeholder="codigo" size="15" onkeyup="validaCodigo(this.value)" /> <br/>
            Caducidad dia : <input type="text"  id="dia" name="dia" placeholder="Dia" size="5" onkeyup="validarFecha(this.value)"/>
            mes :<input type ="text" name="mes" id="mes" placeholder ="Mes" size ="5" onkeyup= "validarFecha(this.value)"/>
            año :<input type="text" name="año" id="anio" placeholder="Año" size="5" onkeyup="validarFecha(this.value)"/> <br/>

            <p>
                Oferta :
                <select  id="ofertas" name ="ofertas">
                    <option value=""> Selecciona una oferta</option>
                    <option value="1">Normal</option>
                    <option value="2">2x1</option>
                    <option value="3">20%</option>
                    <option value="4">10%</option>

                </select>
            </p>
              <div id ="varios">
                Congelado  <input type="checkbox" name ="alimentos" id ="checkbox1" value="Congelado"/>
                Fruta <input type="checkbox" name = "alimentos" id="checkbox2"   value="Fruta"/>
                Snack<input  type="checkbox" name ="alimentos" id="checkbox3"  value="Snack"/><br/>
              </div>

            <input class="boton" type ="submit" name="registrate" value="Registrate"  />
            <input class="boton" type="button" name="limpiar" value="Limpia el formulario"/>
            <input class="boton" type="button" name="guardar " value="Guardar datos"  onclick="guardaValor()"/>
            <input class="boton" type="button" name="recuperar" value="Recuperar datos" onclick="obtenValor()" /><br/>

            <textarea id ="area" rows="2" cols="50">
            TextArea con la información del formulario
           
            </textarea>


        </form>

    </body>
</html>
/*
 ejercicio 3
 Controla que si no se selecciona algún tipo de alimento
 (Congelado, Fruta o Snak) no se envíe el formulario al clicar en Regístrate
 
 */
function validaCheckbox() {





    var todos = document.getElementById("varios").children;//hago una funcion y con un bucle
    //recorre todos los elementos
//por orden y etiqueta



    for (var x = 0; x < todos.length; x++) {

        if (todos[x].checked) {
            return true;

        } else {

            alert("Al menos debe marcar congelado o fruta o snack");
            return false;
        }
    }

    setCookie("checkCookie", todos, 50);
}









/*Ejercicio 4
 * 4. Controla que cada vez que el usuario escribe una letra en un input se
 * muestre un mensaje en el TextArea con el valor del input y si su valor es válido.
 /*escribe una letra en un input se muestre un mensaje en el TextArea con el valor del input */




/* b.   InputNombre  no puede empezar por un número y debe contener entre 3 y 20
 * caracteres.*/

function validarNombre(valor) {


    if (valor.length >= 3 && valor.length <= 20)
    {

        var re = /^[^0-9]/;

        if (valor[0].match(re))

        {

            document.getElementById("area").innerHTML = valor;  //escribe el valor obtenido del input en el textarea//

        } else {

            document.getElementById("area").innerHTML = "No puede  empezar por un numero";

        }

    } else {

        document.getElementById("area").innerHTML = "Tiene que tener entre 3 y 20 caracteres";


    }

    setCookie("nombreCookie", valor, 30); //creo la cookie para el input del nombre//


}




/*c.     InputCodigo debe tener 13 números, ninguna letra (puedes utilizar una
 expresión regular para validar).*/


function validaCodigo(valor) {


    if (/\b\d{13}\b/.test(valor)) {  //utilizo epresion regular //

        document.getElementById("area").innerHTML = valor;

    } else {

        document.getElementById("area").innerHTML = "Solo pueden ser 13 numeros";
    }

    setCookie("codigoCookie", valor, 50);
}



/*d. InputDia , inputMes y inputAno deben formar una fecha válida.*/

function validarFecha() {

    var day = document.getElementById("dia").value;
    setCookie("diaCookie", day, 50);
    var month = document.getElementById("mes").value;
    setCookie("mesCookie", month, 50);
    var year = document.getElementById("anio").value;
    setCookie("anioCookie", year, 50);


    var dteDate;
    month = month - 1;
    dteDate = new Date(year, month, day);
    return ((day === dteDate.getDate()) && (month === dteDate.getMonth()) && (year === dteDate.getFullYear()));
}






function validaSelec() {

    indice = document.getElementById("ofertas").selectedIndex;
    if (indice === null || indice === 0) {
        alert("debe seleccionar una oferta");
        return false;

    }


}


/*
 *  5. Programa con JavaScript que al clicar sobre Guardar Datos se guarden todos
 los datos de los inputs en una cookie para cada input. Pej: para el input inputNombre
 crea una cookie que guarde su valor, para el input inputCodigo crea otra cookie con su valor, etc...)
 *
 */


function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}




function guardaValor() {

    var valor = document.getElementById("texto").value; //guardo el valor del input nombre en una variable//
    var codigo = document.getElementById("codigo").value;
    var day = document.getElementById("dia").value;
    var month = document.getElementById("mes").value;
    var year = document.getElementById("anio").value;
    var todos = document.getElementById("varios").children;

    for (x = 0; x < todos.length; x++) { //uso un bucle para recoorer todos los checkbox//
        if (todos[x].nodeName === 'INPUT' && todos[x].checked === true) {

            setCookie("checkCookie", todos[x].value, 50);
            break;
        }
    }


    setCookie("nombreCookie", valor, 30);
    setCookie("codigoCookie", codigo, 50);
    setCookie("diaCookie", day, 50);
    setCookie("mesCookie", month, 50);
    setCookie("anioCookie", year, 50);

}




/* 6. Programa con JavaScript que al clicar sobre Recupera Datos se sustituya
 *  el valor de los inputs por el valor almacenado en su correspondiente cookie.
 *
 */

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) === 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

function obtenValor() {

    document.getElementById("texto").value = getCookie("nombreCookie"); //obtengo el valor de la cookie guardada//
    document.getElementById("codigo").value = getCookie("codigoCookie");
    document.getElementById("dia").value = getCookie("diaCookie");
    document.getElementById("mes").value = getCookie("mesCookie");
    document.getElementById("anio").value = getCookie("anioCookie");


    var todos_checkbox = document.getElementById("varios").children; //uso un for para obetner el valor de la cookie guardada del checkbox//
    for (x = 0; x < todos_checkbox.length; x++) {
        if (todos_checkbox[x].value === getCookie("checkCookie")) {
            todos_checkbox[x].checked = true;
            break;
        }
    }



Y otra duda que tengo , es que si no se selecciona ningun checkbok no se puede enviar el formulario, lo he intentado pero no hay manera.
gracias


pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:JavaScript. Ejercicio sobre uso de cookies.
« Respuesta #10 en: 20 de Noviembre 2016, 18:23 »
Podrías guardar en la cookie también el valor seleccionado del select, "oferta.selectedIndex", que para la primera opción devuelve 0 para el primer valor, 1 para el segundo, etc.
Y cuando lo vayas a recuperar, conque le digas al select que la opción seleccionada es la "0", la 1, etc. te mostrará bien el texto.

A ver si puedes conseguirlo con eso.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".