How can I customize the data: :confirm popup to prompt for an input, that will be appended to the request params?

Question

Many places in my application, submitting forms and visiting post-links requires the user to specify some reasoning as to why they decided to do so (the comments/reasoning are used to track who did what changes internally).

Now for this reason, I would like to be able to change the behaviour of data: {confirm: "Are you sure you want to submit this form?"} to prompt for an input instead of just answering yes/cancel. I would like the box to appear with a an input field, which content will then be appended to the requests params, so I can store it from the controller.

How can I do this?

Answer 1

Use fake submit button which is trigger prompt dialog. When prompt is filled, copy the value intu form hidden input, then trigger form submit event. This is the working example:

HTML:

<form id="myForm">
    <input type="checkbox" name="checkbox" checked />
    <input id="myVisibleInput" name="visibleinput" type="text" />  
    <input id="myHiddenInput" name="hiddeninput" type="text" />
    <button id="fakesubmit" type="button">Submit</button>
</form>

jQuery:

$('#fakesubmit').on('click', function() {
    var answer = prompt('Why?');
    if (answer != null) {
        $('#myHiddenInput').val(answer);
        $('#myForm').submit();
    }
});

$("#myForm").on("submit", function(event) {
    console.log($(this).serialize());
});

CSS:

#myHiddenInput {
    display: none;
}

Answer 2

You can use prompt:

var test = prompt("Enter your name:");
alert("Hi " + test + "!");

Prompt - W3Schools

Answer 3

can you try some modal service like bootstrap modal, or just build your own directive. there's some good info here. essentially whatever func you tie your ng-click to will call $modalService first, and once user confirms/denies, $modalService will call func.success or func.error