<!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="validarFecha();validaCheckbox();">
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" />
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" name ="alimentos" id ="checkbox1"/>
Fruta <input type="checkbox" name = "alimentos" id="checkbox2"/>
Snack<input type="checkbox" name ="alimentos" 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>
</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() { todos = document.getElementsByTagName('input');//hago una funcion y con un bucle
//recorre todos los elementos
//por orden y etiqueta
for (x = 0; x < todos.length; x++) { if (todos[x].checked) {
return true;
}
}
alert("Al menos debe marcar congelado o fruta o snack"); return false;
}
/*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;
} 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("cookieNombre",valor, 20 );}
/*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)) {
document.getElementById("area").innerHTML = valor;
} else {
document.getElementById("area").innerHTML = "Solo pueden ser 13 numeros"; }
}
/*d. InputDia , inputMes y inputAno deben formar una fecha válida.*/
function validarFecha() {
var day = document.getElementById("dia").value; var month = document.getElementById("mes").value; var year = document.getElementById("anio").value;
var dteDate;
month=month-1;
dteDate=new Date(year,month, day);
return ((day ==dteDate.getDate()) && (month==dteDate.getMonth()) && (year==dteDate.getFullYear()));
}
/*
* 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;
}
/* 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].trim();
if (c.indexOf(name)==0) return
c.substring(name.length,c.length);
}
return "";
}
