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
Tema: JavaScript. Ejercicio uso de cookies. guardar el valor seleccionado en select (Leído 11922 veces)
RSS -
WAP2