confirm box in javascript customize buttons

Question

confirm("Do you wish to proceed (fields) has missing data?");

Want to rename the name of buttons on confirmation box using java-script only?

I don't want to include another Jquery.

You can use... http://jqueryui.com/dialog/#modal-confirmation — Dilip Solanki, Apr 10 '18 at 07:18

score 2 · Answer 1 · answered Apr 10 '18 at 07:17

Create Custom Box

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

Create Method

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();
}

Call the method

doConfirm("Are you sure?", function yes()
{
    form.submit();
}, function no()
{
    // do nothing
});

score 1 · Answer 2 · answered Apr 10 '18 at 07:19

You need to customise with jquery. fiddle

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();
}

$(function () {
    $("form").submit(function (e) {
        e.preventDefault();
        var form = this;
        doConfirm("Are you sure?", function yes() {
            form.submit();
        }, function no() {
            // do nothing
        });
    });
});

body { font-family: sans-serif; }
#confirmBox
{
    display: none;
    background-color: #eee;
    border-radius: 5px;
    border: 1px solid #aaa;
    position: fixed;
    width: 300px;
    left: 50%;
    margin-left: -150px;
    padding: 6px 8px 8px;
    box-sizing: border-box;
    text-align: center;
}
#confirmBox .button {
    background-color: #ccc;
    display: inline-block;
    border-radius: 3px;
    border: 1px solid #aaa;
    padding: 2px;
    text-align: center;
    width: 80px;
    cursor: pointer;
}
#confirmBox .button:hover
{
    background-color: #ddd;
}
#confirmBox .message
{
    text-align: left;
    margin-bottom: 8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
    <input type="hidden" name="html" value="&lt;p&gt;Your data has been deleted&lt/p&gt;" />
    <input type="submit" value="Delete My Data" />
</form>
<div id="confirmBox">
    <div class="message"></div>
    <span class="button yes">Yes</span>
    <span class="button no">No</span>
</div>

score 1 · Answer 3 · answered Apr 10 '18 at 07:31

As far as I am aware this is not possible in the default modals/alerts provided by Javascript. So, if you want to create your own custom confirmation dialogs you will need to look at creating your own alert or using a Javascript library. Luckily, you are not the first who's wanted to create custom alerts, so there is plenty of sources available to help you out.

For starters, try having a look at the answers to these questions:

confirm box in javascript customize buttons

3 Answers3