I am trying to get a report from my created tables. The thing is I have 3 different button to trigger 3 different modal right now. This approach works but I think it is unnecessary to create them seperately. I want only one modal with auto routed to related "Action". I think it will be solved with jquery but I can't seem to understand.
The buttons that triggers modals is below.
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a data-toggle="modal" data-target="#GeneralModal" class="dropdown-item" href="#">General Report </a>
<a data-toggle="modal" data-target="#VehicleModal" class="dropdown-item" href="#">Vehicle Report</a>
<a data-toggle="modal" data-target="#WarrantylModal" class="dropdown-item" href="#">Warranty Report</a>
</div>
My modals are below.
<div class="modal fade" id="GeneralModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportGeneral" role="form" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group m-form__group row m--margin-top-20">
<label class="col-form-label col-lg-3 col-sm-12">
Start Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
</div>
<label class="col-form-label col-lg-3 col-sm-12">
End Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
<button type="submit" class="btn btn-primary">Get Report </button>
</div>
</div>
</div>
</form>
<div class="modal fade" id="WarrantyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportWarranty" role="form" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group m-form__group row m--margin-top-20">
<label class="col-form-label col-lg-3 col-sm-12">
Start Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
</div>
<label class="col-form-label col-lg-3 col-sm-12">
End Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
<button type="submit" class="btn btn-primary">Get Report </button>
</div>
</div>
</div>
</form>
<div class="modal fade" id="VehicleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form action="/Export/ExportVehicle" role="form" method="post">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Excel Report</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group m-form__group row m--margin-top-20">
<label class="col-form-label col-lg-3 col-sm-12">
Start Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker" name="date1" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose start date">
</div>
<label class="col-form-label col-lg-3 col-sm-12">
End Date
</label>
<div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="datepicker2" name="date2" data-date-format="dd-mm-yyyy" autocomplete="off" placeholder="Choose end date">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Vazgeç</button>
<button type="submit" class="btn btn-primary">Get Report </button>
</div>
</div>
</div>
</form>
The only changing part is the modal's,
<form action="/Export/ExportGeneral" role="form" method="post">
Depending on the triggered modal it route to another action such as,
ExportGeneral ExportWarranty ExportVehicle
What I am asking is if there is a thing that help me to click the different buttons but open them in only one modal which's
<form action="/Export/ExportGeneral" role="form" method="post">
Change's automatically depending on, clicked button. (Maybe an id to buttons ?)
Thank you for your time!
In your anchor tag, you just need to replace your code with mine:
<a data-toggle="modal" data-target="#GeneralModal" id="general-export-button" data-url="/Export/ExportGeneral" class="dropdown-item" href="#">General Report </a>
<a data-toggle="modal" data-target="#GeneralModal" id="warranty-export-button" data-url="/Export/ExportWarranty" class="dropdown-item" href="#">Vehicle Report</a>
<a data-toggle="modal" data-target="#GeneralModal" id="vehicle-export-button" data-url="/Export/ExportVehicle" class="dropdown-item" href="#">Warranty Report</a>
Now on the bottom of your page, add this jQuery code and everything will work fine.
<script>
$("#general-export-button, #warranty-export-button, #vehicle-export-button").click(function (e) {
e.preventDefault();
var form = $("#multpurpose-form");
form.prop("action", $(this).data("url"));
});
Now I will explain what is happening in my code. All anchor tags are linked to a single modal. The action method of form in the linked modal is changing against "anchor tag data-url" through jQuery code.