根据按钮单击更改模态的href

Question

Clicking this button opens the modal

<button type="button" id ="soldBtn" class="btn btn-info" data-toggle="modal" data-target="#myModal">This laptop has been sold</button>

This is the modal

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <p>Confirmation</p>
        </div>
        <div class="modal-body">
          <p>Are you sure you want to do this?</p>
        </div>
        <div class="modal-footer">
          <a class="btn btn-outline-success" id="confirmBtn" href="#" >Yes</a>
            <a class="btn btn-outline-danger" id="cancelBtn" data-dismiss="modal">No</a>
        </div>
      </div>
    </div>
  </div>
</div>

I could just have a different modal for different buttons, but I'd rather follow the DRY principle. I'd like the href of the confirmBtn to change based on which button to open the modal was clicked. I've tried this so far but not even sure if I'm on the right track.

<script type="text/javascript">
  if(jQuery('#soldBtn').data('clicked')) {
    document.getElementById("confirmBtn").href="{%url 'laptops:sale'%}";
}
</script>

Answer 1

You should first wait for your DOM to load. This can be done by wrapping your script code with the following:

$(function(){
    // Here you will place the code that follows
});

Then you should register an event handler for the click event on the DOM element with id soldBtn :

$("#soldBtn").on('click', function(){
    var confirmBtnEle = $("#confirmBtn");
    confirmBtnEle.attr('href','%url 'laptops:sale'%');
});

Apparently, you have to change the second argument we pass to attr method above to be that you want to be.