Categorías
Desarrollo y Programación

Sumar Radio button con Javascript

Este problema lo obtuve de los foros de cristalab del usuario mariassssss, el usuario busca sumar los valores de unos input radio con javascript:

Aquí el post original: http://foros.cristalab.com/javascrip-t122822/

Me tomé la libertad de corregir el codigo, quitar las funciones que no estaban en uso y hacer la operación que necesita sin moverle mucho.

<html>
<head>
<title>CAFETERIA</title>
<meta charset="utf-8" />
<style>
body {
background-color: #e1e637;
}
h1 {
color: #ff090e;
}
legend {
margin-top: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>CAFETERIA</h1>
<form>
<legend>SELECCIONE EL PLATO PRINCIPAL</legend>
<input type="radio" id="n1" name="principal" value="12" /> Caldo de pollo
Q12.00 <br /><br />
<input type="radio" id="n2" name="principal" value="20" /> pescado frito
Q20.00<br /><br />
<input type="radio" id="n3" name="principal" value="25" /> revolcado
Q25.00<br /><br />
<legend>SELECCIONE SU BEBIDA</legend>
<input type="radio" id="n4" name="bebida" value="7" /> CocaCola Q7.OO<br /><br />
<input type="radio" id="n5" name="bebida" value="4" /> Jamaica Q4.00<br /><br />
<input type="radio" id="n6" name="bebida" value="5" /> Sprite Q5.00<br /><br />
<legend>SELECCIONE SU POSTRE</legend>
<input type="radio" id="n7" name="postre" value="7" /> Pastel de fresa
Q7.oo<br /><br />
<input type="radio" id="n8" name="postre" value="5" /> Helado de Chocolate
Q5<br /><br />
<input type="radio" id="n9" name="postre" value="9" /> Coctel de frutas
Q9.00<br /><br />
<button>Obtener TOTAL</button>
</form>
<script>
// buscar el <form> y guardarlo en una variable
const form = document.querySelector('form');
// decir que en el evento enviar se sume el total
form.addEventListener('submit', obtenerTotal);
function obtenerTotal(event) {
// evitar enviar el formulario que ocasiona que se refresque la pagina
event.preventDefault();
// obtener todos los input radio
const formData = new FormData(event.target);
// convertir los valores a String, o colocar un 0 si no elegieron algo
const principal = parseInt(formData.get('principal') || '0', 10);
const bebida = parseInt(formData.get('bebida') || '0', 10);
const postre = parseInt(formData.get('postre') || '0', 10);
const result = principal + bebida + postre;
alert("la suma es:" + result);
}
</script>
</body>
</html>

A diferencia del código original no es necesario ir a recuperar el valor por input, si no obtener todo el formulario y sacar los valores necesarios.

Es algo primitivo pero este formData estaría listo para enviar a en una request y obtener los datos a partir de este elemento y sus correspondientes names.

Entre las mejoras se puede poner un array para obtener los datos requeridos, pero como no estaba la problemática descrita, pues decidí omitir.

Categorías
Desarrollo y Programación

jQuery mostrar y ocultar div con animación

En esta ocasión vamos a mostrar y ocultar div con jQuery para practicar el funcionamiento base de la librería. vamos a asignar eventos a dos botones que nos permitan interactuar con la visualización de un componente.

En esta ocasión traigo la actualización de un código que hice hace unos siete años para este blog, el cual hice un tutorial en youtube:

El código completo y funcional está aquí:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tutorial jQuery Remasterizado</title>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
var pagina = $(document);
pagina.on("ready", animar);
function animar() {
var x = $("#mostrar_elemento");
x.on("click", mostrar);
var y = $("#ocultar_elemento");
y.on("click", ocultar);
}
function mostrar() {
var x = $("div");
x.show("slow");
}
function ocultar() {
var x = $("div");
x.hide("slow");
}
</script>
<style>
.ocultado {
display: none;
background-color: #9c0;
border-color: #063;
border-style: dotted;
border: thin;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<input id="mostrar_elemento" type="button" value="Mostrar mensaje" />
<input id="ocultar_elemento" type="button" value="Ocultar" />
<div class="ocultado">
Esta div se esta mostrando sin embargo puede ser cualquier elemento
</div>
</body>
</html>
view raw jquery01.html hosted with ❤ by GitHub

Refactorizar código Javascript

Ahora también tenemos una actualización de un refactor que pueden ver en el siguiente video:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tutorial jQuery Remasterizado</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<button id="showContainer" type="button">Mostrar mensaje</button>
<button id="hideContainer" type="button">Ocultar mensaje</button>
<div class="container hidden">
Esta div se esta mostrando sin embargo puede ser cualquier elemento
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
<script>
$(window).on("load", assignEvents);
function assignEvents() {
$("#showContainer").on("click", mostrar);
$("#hideContainer").on("click", ocultar);
}
function mostrar() {
$("div").show("slow");
}
function ocultar() {
$("div").hide("slow");
}
</script>
</body>
</html>
view raw index.html hosted with ❤ by GitHub
.container {
background-color: #9c0;
border-color: #063;
border-style: dotted;
border: thin;
width: 200px;
height: 200px;
}
.hidden {
display: none;
}
view raw style.css hosted with ❤ by GitHub

Este último video trata de seguir buenas prácticas para evitar el uso innecesario de variables y agregar nombres legibles a las clases e identificadores de HTML y Javascript.

Si tienen alguna duda ponganla en los comentarios 😎