Javascript customize confirm, replace button text "ok" and "cancel", execute function only if clicked ok

5

How can I customize confirm , overwriting the Ok and Cancel button text? I also wanted to execute the function only if I clicked Ok.

Follow the code without success yet

<script>
function funcao_a() {
  confirm('funcao A');
}
function funcao_b() {
  alert('funcao B');
}
</script>
<button id="btn" onclick="confirm('Confirmar?',funcao_b());">Clique aqui</button>

Thank you

    
asked by anonymous 14.08.2016 / 17:48

4 answers

7

With the native function you can not create custom confirmation boxes , you can however use jquery UI to simulate this:

function funcao_b() {
  alert('funcao B');
}
function confirmar() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Yap executa função b": function() {
          $( this ).dialog( "close" );
          funcao_b();
        },
        'Não executa nada': function() {
          $( this ).dialog( "close" );
          console.log('cancelado');
        }
      }
    });
}
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<button id="btn" onclick="confirmar();">Clica</button>
<div id="dialog-confirm" title="Executar função?"></div>
    
14.08.2016 / 17:59
1

No, you will not be able to change the text of the buttons of confirm() native, what you can is to create a dialog with some lib or create yourself. Take a look at this question: Put two Yes and No buttons in a Javascript message .

As for the function performed according to the choice, from the native confirm, just do the following:

function confirmar(texto, callback1, callback2){
  var confirmacao = confirm(texto);
  if(confirmacao) callback1(); // executa a primeira função de "OK"
  else callback2(); // executa a segunda função se "Cancelar"
}

function apagar(){
  confirmar(
    "Deseja apagar?",
    function(){
      alert("Apagado!");
    },
    function(){
      alert("Não apagado!"); 
    }
  )  
}
<button onclick="apagar()" >Apagar</button>

The confirm() returns a value boolean , so just check this value and execute the function as desired.

    
14.08.2016 / 17:57
0

Below a solution to be worked, but before ... a little bubble, do not get too bad!

I am outraged that as much as you study, have the ability to create solutions, some biased does not give you the opportunity to act in the area. I have been trying for over 13 years (I have not given up, however I look no further). For having in hand, crafts of the manual type, many or all qualify you as incapable, without even having an idea of your competence.

I do not speak of the author of the question, but of those who get the thing ready. These are the ones that companies invest. In opportunists.

Here's an example of how to apply one of the solutions to the case! PS: Sorry for the bad "professionalism" of the code.

Next ...

function CONFIRMA(txt, idform, confirmacao, ylegenda, nlegenda){
    	
    	box = document.getElementById('bloco');
    	msg = document.getElementById('msg');
    	bt_y = document.getElementById('ylegenda');
    	bt_n = document.getElementById('nlegenda');
    	if(confirmacao==''&&txt!=0){
    		
    		msg.innerHTML=txt;
    		bt_y.innerHTML=ylegenda;
    		bt_n.innerHTML=nlegenda;
    		box.style.display='block';
    		return false;
    	}
    	
    	if(confirmacao == true){
    		document.getElementById(idform).submit();
    	}
    	box.style.display='none';
    	
    }
<div id="bloco" style="display: none;">
<div id="msg"></div>

<a href="javascript:void(0);" onClick="CONFIRMA(0, 'form1', true)"><span id="ylegenda"></span></a> ------------- 
<a href="javascript:void(0);" onClick="CONFIRMA(0, 'form1', false)"><span id="nlegenda"></span></a>

</div>


<div>
<p>&nbsp;</p>
    <form id="form1" name="form1" method="post" onSubmit="return CONFIRMA('Vai fazer cagada?', this.id, false, 'Sim, sou imbecil', 'Puts...')" action="">
      <input type="submit" name="Submit" value="Aplicar">

    </form>


</div>

Just missing formatting with css styles. Good luck!

    
04.08.2017 / 21:16
-1
function confirmar(texto, callback1, callback2){
    var confirmacao = prompt(texto);
    if(confirmacao)
        callback1(); // executa a primeira função de "OK"
    else
        callback2(); // executa a segunda função se "Cancelar"
}

function apagar(){
    confirmar("Deseja apagar?", 
        function(){ alert("Apagado!"); }, 
        function(){ alert("Não apagado!"); });
}
    
18.08.2017 / 22:10