Confirmation message YES/NO

Asked

Viewed 2,169 times

3

As a PO request, using an attribute to copy the Mobile Phone number to the Whatsapp field, displaying a message to the user, as default is OK and Cancelar, but I would like the name of the buttons to be Sim and Não, How can I change this message? Note: Everything is working, but as a requirement of the PO the message should be Yes and No. inserir a descrição da imagem aqui

This is the code used:

    $('#Whatsapp').focus(function () {
        var celular = $('#Celular').val();
        var whatsapp = $(Whatsapp).val();
        celular = celular.replace(/[\-_()]/g, "");//Remove special characters
        whatsapp = whatsapp.replace(/[\-_()]/g, "");//Remove special characters
        if (celular.length == 11) {
            if (whatsapp.length != 11) {
                if (confirm("O numero do celular também é o número do Whatsapp?") == true) {
                    $('#Whatsapp').val($('#Celular').val());
                } else {
                    $('#Whatsapp').val('');
                }
            }
        }
    });

Edited down from here

I tried to use this way too, but did not succeed (Dialog nor opened):

    $('#Whatsapp').focus(function () {
        var celular = $('#Celular').val();
        var whatsapp = $(Whatsapp).val();
        celular = celular.replace(/[\-_()]/g, "");//Remove special characters
        whatsapp = whatsapp.replace(/[\-_()]/g, "");//Remove special characters
        if (celular.length == 11) {
            if (whatsapp.length != 11) {
                var mensagem = "O numero do celular também é o número do Whatsapp?";
                mensagem.dialog({
                    modal: true,
                    buttons: {
                        "Sim": function () {
                            $('#Whatsapp').val($('#Celular').val());
                            $(this).dialog('close');
                        },
                        "Não": function () {
                            return false;
                            $('#Whatsapp').val('');
                            $(this).dialog('close');
                        }
                    }
                });
                //if (confirm() == true) {
                //    $('#Whatsapp').val($('#Celular').val());
                //} else {
                //    $('#Whatsapp').val('');
                //}
            }
        }
    });
  • 1

    Related: http://answall.com/questions/10759/como-mudaro-texto-do-bot%C3%A3o-ok-do-Alert

  • @Virgilionovic edited the question, give a look if you can

  • Also insert the html from your dialog

  • check in the browser console tab if there is no Javascript error

  • This confirm browser native cannot be customized. You can user a library third-party as Sweetalert (my favorite). Or, if you don’t want to warm your head with this, change the message to "Click OK to confirm if cell phone number is also the Whatsapp number.".

1 answer

1


There is no way to change, customize it so it can be implemented with several plugins :

Jquery.ui

$(function() {
  $("#whats").focus(function() {
    $("#dialog-confirm").dialog({
      resizable: true,
      modal: false,
      buttons: {
        "Sim": function() {
          $("#whats").val($("#celular").val());
          $(this).dialog("close");          
        },
        "Não": function() {
          $(this).dialog("close");          
        }
      }
    });
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.structure.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.theme.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" />

<form>
  <div>
    <label>Celular:
      <input type="text" name="celular" id="celular" />
    </label>
  </div>
  <br>
  <div>
    <label>Whats:
      <input type="text" name="whats" id="whats" />
    </label>
  </div>
</form>

<div id="dialog-confirm" title="Mensagem">
  <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>O numero do celular também é o número do Whatsapp?</p>
</div>


Bootstrap

$(function() {
  $("#whats").focus(function() {
    $('#myModal').modal('show');
  });
  $("#btnSim").click(function() {
    $("#whats").val($("#celular").val());
    $('#myModal').modal('hide');
  });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form>
  <div>
    <label>Celular:
      <input type="text" class="form-control" name="celular" id="celular" />
    </label>
  </div>
  <br>
  <div>
    <label>Whats:
      <input type="text" class="form-control" name="whats" id="whats" />
    </label>
  </div>
</form>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Mensagem?</h4>
      </div>
      <div class="modal-body">
        <p>O numero do celular também é o número do Whatsapp?</p>
      </div>
      <div class="modal-footer">
        <button type="button" id="btnSim" class="btn btn-primary">Sim</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Não</button>
      </div>
    </div>
  </div>
</div>

  • 1

    the first option didn’t work for me, the second yes :) Thanks

Browser other questions tagged

You are not signed in. Login or sign up in order to post.