CODEWITHSUNDEEP
phpjqueryhtml
Nadiya
Nadiya

Reputation: 402

Pass a data to the Button href in the modal

I do have a table ,which contains the delete button to delete the particular user. so when i click the delete button, a confirmation modal displays and when i click the delete button ,the particular user has to be deleted.

Button that trigger the modal

<td style="white-space: nowrap; width: 1%;">
   <div class="tabledit-toolbar btn-toolbar" style="text-align: left;">
        <div class="btn-group btn-group-sm" style="float: none;">
            <button onclick="location.href='<?php echo base_url('Employee/viewEmployee/'.$id) ?> ' " type="button" class="tabledit-delete-button btn btn-inverse waves-effect waves-light" style="float: none;margin: 5px;">
              <span class="fa fa-eye"></span>
            </button>
            <button onclick="location.href='<?php echo base_url('Employee/editEmployeeView/'.$id) ?> ' " type="button" class="tabledit-edit-button btn btn-primary waves-effect waves-light" style="float: none;margin: 5px;">
              <span class="icofont icofont-ui-edit"></span>
            </button>
            <button type="button" id="<?php echo $id; ?>" class="tabledit-delete-button btn btn-danger waves-effect waves-light" data-toggle="modal" data-target="#default-Modal" data-id="<?php echo $id; ?>" data-yourparameter="<?php echo $id; ?>" style="float: none;margin: 5px;">
              <span class="icofont icofont-ui-delete"></span>
            </button>
         </div>
    </div>
 </td>

Modal

<div class="modal fade" id="default-Modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
          <h4 class="modal-title">Delete Employee</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
           <h5>Are you sure?</h5><br>
           <p>By proceeding ,the data will be permanently deleted.You will not  be able to recover once it is deleted</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default waves-effect " data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-danger waves-effect waves-light " onclick="location.href='<?php echo base_url('Employee/deleteEmployee/'.$id) ?>' ">Delete</button>
        </div>
    </div>
 </div>

Currently when i click the button,the modal is open by default. I didn't write any additional script other than the jquery library.

What i want to do is to pass the id to the modal.

I'm new to javascript and jquery. I tried some of the answers mentioned in the other questions, but irrespective of the code i use,it didn't work out;the modal is opened by the jquery library's method (i think).

Any help is greatly appreciated.Thank You.

Upvotes: 0

Views: 372

Answers (1)

Webdeveloper_Jelle
Webdeveloper_Jelle

Reputation: 2856

I think that you POST the ID to process it with PHP.

Use the onclick function to replace the value in your onclick method:
Place this at the bottom of your code!

<script>
$(".tabledit-delete-button").each(function(index) {
    $(this).on("click", function(){
       var myID = $(this).data('id');
       $("#default-Modal .btn-danger").attr("onclick","location.href='/Employee/deleteEmployee/'" + myID);
    });
});
</script>

Then you have your value inside the modal.
This prevents the need of multiple same modals.

Check out this JSfiddle I made for you: https://jsfiddle.net/Jbotman/f4voxes8/1/

Upvotes: 1

Related Questions