Conferma operazione con javascript

Conferma operazione con javascript
Freia

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!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

come-realizzare-un-semplice-breadcrumb-php
Up Next:

Come realizzare un semplice breadcrumb PHP

Come realizzare un semplice breadcrumb PHP