Pregunta ¿Cómo crear un diálogo con las opciones "sí" y "no"?


Voy a hacer un botón para realizar una acción y guardar los datos en una base de datos.

Una vez que el usuario hace clic en el botón, quiero una alerta de JavaScript para ofrecer opciones de "sí" y "cancelar". Si el usuario selecciona "sí", los datos se insertarán en la base de datos; de lo contrario, no se tomarán medidas.

¿Cómo puedo mostrar un diálogo así?


520
2018-02-17 20:03


origen


Respuestas:


Probablemente estés buscando confirm(), que muestra un mensaje y regresa true o false de acuerdo con lo que decidió el usuario:

if (confirm('Are you sure you want to save this thing into the database?')) {
    // Save it!
} else {
    // Do nothing!
}

984
2018-02-17 20:06



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

Utilizar confirm en lugar de alerta Esta es la forma más fácil de lograr esa funcionalidad.


67
2018-02-17 20:06



Cómo hacer esto usando JavaScript 'en línea':

<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>

59
2018-02-17 20:06



Evite JavaScript en línea - ¡Cambiar el comportamiento significaría editar cada instancia del código, y no es bonito!

Una forma mucho más limpia es usar un atributo de datos en el elemento, como data-confirm="Your message here". Mi código a continuación admite las siguientes acciones, incluidos los elementos generados dinámicamente:

  • a y button clics
  • form presenta
  • option selecciona

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>

Demostración de JSFiddle


32
2017-08-12 18:20



Tienes que crear custome confirmBox, no es posible cambiar los botones en el cuadro de diálogo mostrado por la función de confirmación.

Jquery confirmBox


mira este ejemplo: https://jsfiddle.net/kevalbhatt18/6uauqLn6/

<div id="confirmBox">
    <div class="message"></div>
    <span class="yes">Yes</span>
    <span class="no">No</span>
</div>

function doConfirm(msg, yesFn, noFn)
{
    var confirmBox = $("#confirmBox");
    confirmBox.find(".message").text(msg);
    confirmBox.find(".yes,.no").unbind().click(function()
    {
        confirmBox.hide();
    });
    confirmBox.find(".yes").click(yesFn);
    confirmBox.find(".no").click(noFn);
    confirmBox.show();
}


17
2018-05-28 05:46



Este complemento puede ayudarte jquery-confirm fácil de usar

$.confirm({
title: 'Confirm!',
content: 'Simple confirm!',
confirm: function(){
    alert('Confirmed!');
},
cancel: function(){
    alert('Canceled!')
}

});


9
2017-12-29 09:05



Puedes interceptar el onSubmit evento ising JS. Luego llame a una alerta de confirmación y luego tome el resultado.


5
2018-02-17 20:06



Otra forma de hacer esto:

$("input[name='savedata']").click(function(e){
       var r = confirm("Are you sure you want to save now?");

       //cancel clicked : stop button default action 
       if (r === false) {
           return false;
        }

        //action continues, saves in database, no need for more code


   });

3
2017-11-24 07:18



O simplemente:

<a href="https://some-link.com/" onclick="return confirm('Are you agree to go to that link?');">click me!</a>

0
2017-07-30 05:08



document.getElementById("button").addEventListener("click", function(e) {
   var cevap = window.confirm("Satın almak istediğinizden emin misiniz?");
   if (cevap) {
     location.href='Http://www.evdenevenakliyat.net.tr';       
   }
});

-4
2018-05-31 08:30