Este framework JavaScript llamado Prototype agiliza bastante el desarrollo de tareas comunes con el html dom, en este ejemplo mi objetivo es el pedir confirmación del usuario mostrándole los nombres de los registros que se van a borrar. Mediante checkboxes el usuario selecciona los registros a eliminar y luego presiona el botón 'Eliminar'. Usaremos como shortcut el id de cada checkbox, el cual contendrá el nombre del registro a mostrar en el mensaje de confirmación.
Los checkbox deben tener la forma general siguiente:
<input id="checkbox<NombreRegistro>" type="checkbox" />
Por ejemplo:
<input id="checkboxRamiro" type="checkbox" />
<input id="checkboxAlejandro" type="checkbox" />
<input id="checkboxRaul" type="checkbox" />
<input id="checkboxAlberto" type="checkbox" />
<input id="checkboxJuan" type="checkbox" />
Agregamos al final de la forma un botón que mande llamar a la función javascript.
<input onclick="javascript:alertDelete()" type="button" value="Eliminar" />
La función JavaScript es la siguiente:
function alertDelete(){
var users = ''; // la variable en la que acumularemos los nombres de registros
$$('input').each(function(e){ if(e.type == 'checkbox' && e.checked) users += $(e).id; });
users = users.gsub('checkbox',' ').replace(/^\s+|\s+$/g, '').gsub(' ',', ');
if(users != ''){ confirm("Estas seguro de que quieres borrar los siguientes registros: "+users); }
}
Como ven el framework nos permite encontrar de forma bastante ágil los checkboxes que se encuentran seleccionados y al mismo tiempo recuperar el nombre de los registros a borrar, en una sola línea:
$$('input').each(function(e){ if(e.type == 'checkbox' && e.checked) users += $(e).id; });
Después simplemente le damos formato agregando comas para separar cada nombre:
users = users.gsub('checkbox',' ').replace(/^\s+|\s+$/g, '').gsub(' ',', ');
Primero sustituyo la palabra checkbox por un espacio en blanco, de esta manera quedarán solo los nombres de los usuarios separados por dichos espacios. Para eliminar espacios al inicio y final de la cadena utilizo el método replace de Javascript con una expresión regular: /^\s+|\s+$/g donde el /g indica que lo hará en toda la cadena. Finalmente sustituyo los espacios restantes por comas.
Y lo mostramos como una ventana de confirmación al usuario:
confirm("Estas seguro de que quieres borrar los siguientes registros: "+users);
Si seleccionas los checkboxes 1, 3 y 5 deberá mostrar un mensaje como el siguiente:
Estas seguro de que quieres borrar los siguientes registros: Ramiro, Raul, Juan
