Javascript customize confirm, replace text button "ok" and "Cancel", run function only if clicked on ok

Question

How can I customize confirm, replacing the button text OK and Cancel? I also wanted to run the function only if you click OK.

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

Answer 1

With the native function you can’t create custom confirmation boxes, 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>
<script src="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>

Answer 2

No, you won’t be able to change the text of the buttons confirm() native, what you can is create a dialog with some lib or create yourself. Take a look at this issue: Putting two Yes and No buttons on a Javascript message.

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

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 run the function as desired.

Answer 3

Below a solution to be worked, but before... a cave, do not lead to bad!

I am outraged that as much as you study, have the ability to create solutions, some prejudiced does not give you the opportunity to act in the area. I have been trying for more than 13 years (I did not give up, but I do not seek more). Because I have in my wallet, crafts of the manual type, many or all qualify you as unfit, without even having any idea of your competence.

I am not talking about the author of the question, but about those who take the ready thing. These are the ones that companies invest in. In the opportunists.

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

Follow...

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>

Missing only format with css styles. Good luck!

Answer 4

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!"); });
}