Ayuda para crear un texto a partir de un checklist en HTML

anikex #1 Dic '19 ಠ_ಠ

Hola, hace poco tiempo que he empezado en un curro en el cual cada dia me dan un numero de hojas con lugares que debo de visitar para realizar una serie de mantenimientos.

Esos lugares son fijos, digamos unos 100 por poner un ejemplo, pero no tengo que ir todos los dias a los mismos ya que hay mantenimientos cada mes, 3 meses, 6...

Encontré una web muy buena (www.routexl.es) que te calcula la mejor ruta segun varias direcciones que tu le metas a modo de lista para organizarme yo esas visitas que hare ese dia.

Teniendo eso en cuenta la movida que quiero hacer es aparentemente sencilla pero soy un puto inutil en el tema de picar codigo y no se muy bien por donde seguir.

Lo que quiero hacer es un simple archivo html que pueda abrir desde el navegador del movil que contenga varios checklist (las calles que tienen en total) y al pulsar un boton me genere un texto con las calles que yo haya marcado (que tengo que visitar ese dia segun los papeles que me hayan dado) para poder copiarlas y pegarlas en la web esta de las rutas.

Una cosa muy parecida a lo que busco es esto:

spoiler

<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<form method="post">      

    <fieldset>      

        <legend>Barrio 1</legend>   
   

    <input type="checkbox" name="1" value="C/Ejemplo 1 Codigo Postal XXXXX">Edificio 1 (llave tipo A) <br> 
 
    <input type="checkbox" name="2" value="C/Ejemplo 1 Codigo Postal XXXXX">Edificio 2 (llave tipo B)<br>    
  
    <input type="checkbox" name="3" value="C/Ejemplo 1 Codigo Postal XXXXX">Edificio 3 (llave tipo C)<br>      
    <br>      

<legend>Barrio 2</legend> 
       

    <input type="checkbox" name="4" value="C/Ejemplo 1 Codigo Postal XXXXX">Edificio 4 (llave tipo A) <br> 
 
    <input type="checkbox" name="5" value="C/Ejemplo 1 Codigo Postal XXXXX">Edificio 5 (llave tipo B)<br>    
  
    <input type="checkbox" name="6" value="C/Ejemplo 1 Codigo Postal XXXXX">Edificio 6 (llave tipo C)<br>      
    <br>  
    <input type="submit" value="Generar lista"  />      
</fieldset>      
</form>
</body>
</html>

Con esto lo que yo veria es el nombre del edificio, comunidad, negocio.. y un tipo de llave que me haria falta para poder ir. Pero al pulsar el boton me generaria un texto con una id que tendria en un excel aparte por si necesito mirar algo mas concreto mas adelante, y la direccion completa.

A modo de de ejemplo seria, marco "Edificio 1 y 5", pulso el boton y me devolveria este texto:
1 C/Ejemplo 1 Codigo Postal XXXXX
5 C/Ejemplo 5 Codigo Postal XXXXX

Para poder pegarlo en la web esta de rutas. Creo que es bastante simple de hacer pero ya no se como hacer que me genere el texto al pulsar el boton. ¿Alguna ayuda?

cabron #2 Dic '19 Judas

Y no te vale ninguna de las infinitas mierdas que puedes econtrar en internet para hacer checklist? tienes que desarrollar la tuya propia? Por ejemplo:

https://www.checkli.com/

https://todoist.com/

1 respuesta

anikex #3 Dic '19 ಠ_ಠ

#2 Si he posteado aqui es porque ya he mirado muchas webs y apps de listas pero ninguna hace lo que busco o no he sabido encontrarla. Y lo he puesto aqui porque creo que es sencillo de realizar pero no tengo claro como al ser un completo inutil en esto del codigo.

Al crear ese html me saldria algo como lo que busco.

Pero no consigo que me genere ningun texto al pulsar el boton. Y es ahi donde ando atrancado por si alguien sabria orientarme en que codigo me puede faltar para que eso funcione. Y aprender tambien un poco ya de paso.

1 respuesta

HeXaN #4 Dic '19

Eso son tres líneas de JS.

1 respuesta

anikex #5 Dic '19 ಠ_ಠ

#4 Y podrias orientarme un poco? He dicho de hacerlo en html para que me sea mas sencillo a mi de editar por si tengo que ir añadiendo o modificando calles. Y luego poder pasarme eso al movil y abrirlo (y que funcione) desde el navegador del movil.

Se que puede ser tremendamente facil lo que pido, pero como se puede ver no tengo ni idea.

1 respuesta

cabron #6 Dic '19 Judas

#3

Bueno tú sabrás, en cualquier caso, quita el input tipo submit y cambialo por un elemento button, le metes un onclick y le pones una función de js.

Esa función coge todos los checklist que estén activados y mira su valor, coges un div vacío que puedes identificar por su id y lo metes ahí.

No necesitas un formulario como has puesto en tu código de ejemplo

HeXaN #7 Dic '19

#5 https://stackoverflow.com/questions/11599666/get-the-value-of-checked-checkbox

LordPython #8 Dic '19

Mi opinión es hacerlo mediante Jquery, si no estás cómodo con VanillaJS.

https://api.jquery.com/change/

Este evento y alguno más y puedes hacer lo que quieres en pocas líneas de code.

Voy a entrar a un examen. Cuando vuelva a casa, si aún sigues liado, te doy una respuesta más concreta

1 respuesta

anikex #9 Dic '19 ಠ_ಠ

#8 Al final ya consegui hacer lo que queria con un script que he encontrado por ahi, muchas gracias a los que habeis ayudado.

1 respuesta

eXtreM3 #10 Dic '19

#9 normalmente siempre que se postea preguntando una duda de código, al final se postea el código con la solución. Te invito a hacerlo.

1 respuesta

anikex #11 Dic '19 ಠ_ಠ

#10 Al final lo he dejado asi:

spoiler

<html lang="en">
<head>
<title>Mantenimientos </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
  $("button").click(function() {
    $('#display').html($("input[name='calle']:checked").map(function() { return this.value; }).get().join("<br>"));
  });
});
</script>

<div id="checkboxvalues"></div>
<form>

<h3>Zona 1</h3>
	<input type="checkbox" name="calle" value="C/Ejemplo 1 Codigo Postal XXXXX">Ejemplo 1 (llave A)<br>
        

<h3>Zona 2</h3>
	<input type="checkbox" name="calle" value="C/Ejemplo 2 Codigo Postal XXXXX">Ejemplo 2 (llave B)<br>
        

<button type="button">Generar lista</button>
</form>
<div id=display></div>

</html>

Será lo mas guarro del mundo ya que la gente me ha dicho que se puede hacer de varias maneras y con 2 lineas escritas con el rabo, pero yo que no sé picar codigo y a mi me hace lo que necesito, asi que con eso me basta xD

Gracias de todas formas a los que han respondido.

Ayuda para crear un texto a partir de un checklist en HTML

Usuarios habituales

Tags