如何在用户采取行动或在 javaScript 中输入一些值之前停止执行？

Question

In a button I am calling a function getrequestvalue() which open a model then user enter yes or no.

I want to get these two values 1 is "value" and 2nd either yes or no in my function.

Here is my code which I tried but I am stuck:

<a onclick='getrequestvalue();' class="btn btn-sm btn-danger" data-id="{{ $customer->id }}" data-toggle="modal" data-target="#delete-customer-modal"><i class="fa fa-trash"></i></a>
              

javascript

function deletecustomer(id){
    var a = getrequestvalue();
    if (id === "yes"){
    $.ajax({
        type: "GET",
        dataType: "json",
        url: '{{ route('delete.customer') }}',
        data: {ids : a}, 
        success: function (data) {
        toastr.success(data.message);
        }
    });
    }
    $("#delete-customer-modal .close").click(); 
}
function getrequestvalue(){
     var param = $(this).data('id');
}

my model

<div class="modal fade" id="delete-customer-modal" tabindex="-1" role="dialog" aria-labelledby="delete-modal" aria-hidden="true">
                <div class="modal-dialog modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header bg-danger">
                            <h5 class="modal-title" id="delete-modal-label" style="color: white">Are You Sure ?</h5>
                            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">Are you sure to delete it . Data will be deleted permanently from system.</div>
                        <div class="modal-footer">
                            <button class="btn btn-default" type="button" data-dismiss="modal">No</button>
                            <a onclick="deletecustomer("yes")" class="btn btn-danger f-d" style="color: white">Yes</a>
                        </div>
                    </div>
                </div>
            </div>```

Answer 1

The phrase

<a onclick='myfunction("value");'></a>

Simply calls myfunction and gives the first parameter the string value of the word "value", only, nothing special, so the parameter name actually is equal to the string "value", when you check it, seemingly this is unrelated to whether or not the user clicked in the yes or no button

I don't have the backend code for what makes the buttons work, but in order to get which button is pressed you would have to add some kind of event listener to both buttons, and then call a function that reads the data attributes of each button, or simply pass a boolean value of it being either the yes or no button

So it would also seem that the yes or no buttons are different anyways, one being an a and the other a button , but essentially you would attach an event to each one, for example, you can add an inline event listener if you want (although generally discouraged):

<button onclick="isYes(false)" class="btn btn-default" type="button" data-dismiss="modal">No</button>
                <a onclick="isYes(true)" class="btn btn-danger f-delete-btn" style="color: white">Yes</a>

Then in JS

function isYes(what) {
//Check if true or false
}


            

Answer 2

You can get value of data-id of a which is clicked inside shown.bs.modal event then assign this value to a tag which is inside your modal. Then, whenever user click Yes just get the attr value and pass same to your ajax call.

Demo Code :

 function deletecustomer(el) { console.log("Here--" + $(el).data('id')) $.ajax({ type: "GET", dataType: "json", url: 'your url', data: { ids: $(el).data('id') //pass that here }, success: function(data) { toastr.success(data.message); } }); $("#delete-customer-modal.close").click(); } //on modal show $('#delete-customer-modal').on('shown.bs.modal', function(e) { var data_id = $(e.relatedTarget).data('id') //get attr of `a` tag console.log("Inside this " + data_id) $(this).find('.modal-footer a').data('id', data_id); //add it inside `a` tag modal });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <a class="btn btn-sm btn-danger" data-id="1" data-toggle="modal" data-target="#delete-customer-modal"><i class="fa fa-trash">Delete</i></a> <a class="btn btn-sm btn-danger" data-id="2" data-toggle="modal" data-target="#delete-customer-modal"><i class="fa fa-trash">Delete</i></a> <div class="modal fade" id="delete-customer-modal" tabindex="-1" role="dialog" aria-labelledby="delete-modal" aria-hidden="true"> <div class="modal-dialog modal-sm" role="document"> <div class="modal-content"> <div class="modal-header bg-danger"> <h5 class="modal-title" id="delete-modal-label" style="color: white">Are You Sure?</h5> <button class="close" type="button" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body">Are you sure to delete it. Data will be deleted permanently from system.</div> <div class="modal-footer"> <button class="btn btn-default" type="button" data-dismiss="modal">No</button> <a onclick="deletecustomer(this)" class="btn btn-danger fd" style="color: white">Yes</a> </div> </div> </div> </div>