Comment créer un dialogue avec des options "oui" et "non" ?

Question

Je vais créer un bouton pour effectuer une action et enregistrer les données dans une base de données.

Lorsque l'utilisateur clique sur le bouton, je veux qu'une alerte JavaScript propose les options "oui" et "annuler". Si l'utilisateur sélectionne "oui", les données seront insérées dans la base de données, sinon aucune action ne sera entreprise.

Comment afficher un tel dialogue ?

Answer 1

Vous recherchez probablement confirm() qui affiche une invite et renvoie true ou false en fonction de ce que l'utilisateur a décidé :

if (confirm('Are you sure you want to save this thing into the database?')) {
  // Save it!
  console.log('Thing was saved to the database.');
} else {
  // Do nothing!
  console.log('Thing was not saved to the database.');
}

Answer 2

var answer = window.confirm("Save data?");
if (answer) {
    //some code
}
else {
    //some code
}

Utilisez window.confirm au lieu de l'alerte. C'est le moyen le plus simple d'obtenir cette fonctionnalité.

Answer 3

Comment le faire en utilisant le JavaScript "en ligne" :

<form action="http://www.google.com/search">
  <input type="text" name="q" />
  <input type="submit" value="Go"
    onclick="return confirm('Are you sure you want to search Google?')"
  />
</form>

Answer 4

Évitez le JavaScript en ligne - changer le comportement signifierait modifier chaque instance du code, et ce n'est pas joli !

Une méthode beaucoup plus propre consiste à utiliser un attribut de données sur l'élément, tel que data-confirm="Your message here" . Mon code ci-dessous prend en charge les actions suivantes, y compris les éléments générés dynamiquement :

• a et button clics
• form soumet
• option sélectionne

jQuery :

$(document).on('click', ':not(form)[data-confirm]', function(e){
    if(!confirm($(this).data('confirm'))){
        e.stopImmediatePropagation();
        e.preventDefault();
    }
});

$(document).on('submit', 'form[data-confirm]', function(e){
    if(!confirm($(this).data('confirm'))){
        e.stopImmediatePropagation();
        e.preventDefault();
    }
});

$(document).on('input', 'select', function(e){
    var msg = $(this).children('option:selected').data('confirm');
    if(msg != undefined && !confirm(msg)){
        $(this)[0].selectedIndex = 0;
    }
});

HTML :

<!-- hyperlink example -->
<a href="http://www.example.com" data-confirm="Are you sure you want to load this URL?">Anchor</a>

<!-- button example -->
<button type="button" data-confirm="Are you sure you want to click the button?">Button</button>

<!-- form example -->
<form action="http://www.example.com" data-confirm="Are you sure you want to submit the form?">
    <button type="submit">Submit</button>
</form>

<!-- select option example -->
<select>
    <option>Select an option:</option>
    <option data-confirm="Are you want to select this option?">Here</option>
</select>

Démonstration de JSFiddle

Answer 5

Vous pouvez intercepter le onSubmit l'événement esting JS. Ensuite, appelez une alerte de confirmation, puis récupérez le résultat.