Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: javaquery en 16 de Noviembre 2016, 12:00
-
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...)
-
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
-
Buenas tardes.
Te pego el codigo ,
</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.
}
-
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.
<!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.
-
ahora no puedo probarlo estoy en el trabajo, luego lo pruebo a ver, ¿se puede hacer con estas funciones?
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 "";
}
-
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
-
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().
<!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.
-
Me queda por guardar solo el del select, los demas los tengo, el del select se me resiste,
gracias
-
Prueba con esto para recuperar el valor.
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
-
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
<!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
-
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.