Oggi vediamo come obbligare i nostri visitatori alla conferma di una determinata operazione (come la cancellazione) tramite l’utilizzo di javascript.
Grazie all’utilizzo di una semplice funzione possiamo obbligare gli utenti a confermare se vogliono davvero eseguire una determinata operazione. Per farlo ci basterà usare la funzione confirm di javascript. Ecco due “casi” di studio utili ed esempi concreti sul suo utilizzo.
Case study 1: eliminazione singolo elemento
Per eliminare un singolo elemento dobbiamo predisporre innanzitutto il codice html con un trigger di eliminazione che possa passare un id a uno script server-side (nel nostro caso PHP).
<p class="delete" data-id="NUMERO_ID">Cancella</p>
A questo punto ecco lo script con la conferma di eliminazione:
$(".delete").click(
function(){
var confirmation = confirm("Sei sicuro di voler cancellare?")
if (confirmation){
//L'utente vuole eseguire l'operazione
var id = $(this).attr("data-id");
// alert(id);
//chiamata ajax
$.ajax({
type: "POST",
url: "percorso_allo_script_elaborazione.php",
data: "id=" + id,
dataType: "html",
success: function(msg)
{
alert('Operazione eseguita.');
},
error: function()
{
alert("Ops, qualcosa è andato storto. Si prega di riprovare...");
}
});
}//Conferma non data
else{}
});//Delete
Come vedete lo script in questo esempio specifico, una volta ottenuta la conferma finale dall’utente invia l’id a uno script php che elaborerà la richiesta tramite ajax. Ovviamente potete eseguire qualsiasi tipo di operazione dopo che l’utente ha confermato.
Case study 2: eliminazione multipla tramite form
Nel caso di un form (per l’eliminazione multipla ad esempio) ci basterà predisporre l’html (e il form in particolare) in questo modo:
<form action="url" method="POST" onsubmit="return confirm('Vuoi elaborare il form?');">
<input type="submit" value="Elabora/Cancella" class="bottone-cancella" />
Il funzionamento è semplice:grazie a onsubmit quando l’utente clicca sul “bottone-cancella” (ovvero nel submit) viene processata la funzione che di fatto chiede la conferma per proseguire l’elaborazione.
Questa soluzione risulta estremamente utile anche per ottenere la conferma finale prima di inviare i dati di qualsiasi tipologia.
Conclusioni
Una soluzione semplice ma efficace per migliorare la user experience del vostro progetto o applicazione. Questo articolo ti è stato utile? Condividilo sui tuoi social network preferiti oppure fammi sapere cosa ne pensi nei commenti!
