I have a cshtml page with this code:
<form action='#Url.Action("ExportExcel", "Records")' method="post" target="_blank" onsubmit="return exportExcel(), true">
<input type="hidden" name="filteredRecordsIds" id="filteredRecordsIds" value="" />
<input id="btnExportExcel" type="submit" hidden="hidden" />
</form>
in js the exportExcel function:
function exportExcel() {
$('#filteredRecordsIds').val(filteredRecords.map(function (record) { return record.Id }));
return true;
}
in controller Records:
public ActionResult ExportExcel(string filteredRecordsIds)
{...}
I would like to add modal/popup, before the submitting that ask the user:
"Would you like to export with calculations?" with 2 buttons options: "Yes" or "No".
Depending on the user's response, I would like to send the answer to the controller (as second parameter).
How can I add that?
Thank You!
You can try to remove onsubmit,and use a button to open modal,then calling exportExcel when clicking Yes button:
<form action='#Url.Action("ExportExcel", "Records")' method="post" target="_blank" id="myForm">
<input type="hidden" name="filteredRecordsIds" id="filteredRecordsIds" value="" />
<input id="btnExportExcel" type="button" value="submit" data-toggle="modal" data-target="#exampleModalLong"/>
</form>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Would you like to export with calculations?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="exportExcel()">Yes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
js(submit the form in exportExcel):
function exportExcel() {
$('#filteredRecordsIds').val(filteredRecords.map(function (record) { return record.Id }));
$("#myForm").submit();
}
Related
Let's say I have the following form:
<form id="evidence-formset" action="{% url 'interpret-criteria' %}" method="post">
<div class="form-group row">
<!-- Some content here -->
<div class="col-auto">
<input type="submit" class="btn btn-primary" value="Calculate" />
<input type="reset" class="btn btn-secondary" value="Reset" />
<input type="submit" class="btn btn-dark" value="Register" onclick="validateRegister()" formaction='https://www.wikipedia.org/'/>
<input type="submit" class="btn btn-link" value="Export results as Excel" formaction="{% url 'export-interpretation' %}" />
</div>
</div>
<form>
And the following JS function (WIP):
function validateRegister() {
event.preventDefault();
$("#myModal").modal();
$("#registerSubmit").submit()
}
And this basic modal:
<div class="modal" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Register changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
So basically what I want is that when I click the Register button a modal shows, asking for confirmation. If I click again on 'Register' then the input will submit and the webpage should redirect to wikipedia (this is just an example). If I click Close, no form should be submitted and the modal will disappear.
I checked all the previous StackOverflow questions and I couldn't find an answer that worked for me. The closest solution I found is this but it doesn't work.
UPDATE WITH A SOLUTION:
function validateRegister() {
event.preventDefault();
$("#myModal").modal();
$("#myModal").on("click",".btn-primary", function(){
$('#evidence-formset').attr('action', 'https://www.wikipedia.org/').submit();
});
}
remove onclick and add this
$("#evidence-formset").on("submit",function(e) {
e.preventDefault();
$("#myModal").modal();
})
Add ok/cancel to the buttons of the modal
$("#myModal").on("click",".btn-primary", function(){
$("#evidence-formset").submit(); // you can add if (validate(....) in front if you have any validation
});
$("#myModal").on("click",".btn-secondary", function(){
$("#myModal").modal('toggle');
});
I have a dynamic table, and in the button value I store value of each id.
I want to pass my button value to a modal popup view and do a database query in the backend. I will do that via node.js and EJS template. I know I can probably do this via using jQuery, but I don't know the details.
The <%= ProInfoList[j].Id %> is my node.js loop to get each data id.
This is button code to trigger modal view:
<button data-toggle="modal" data-target="#myModal" class="dropbtn"
value="<%= ProInfoList[j].Id %>"
style="background-color:transparent; border:0;margin-bottom: -10px">
<a>Delete</a>
</button>
I would like to use a hidden form field to achieve my goal, but it didn't work.
The form action="/delProInfo/del" is my backend node.js function.
This is my modal code:
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to delete the data ?</p>
<p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
<input type="text" size="50"></input>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
<form action="/delProInfo/del" method="POST" novalidate>
<input type="hidden" name="Id" value="" />
<button class="btn btn-primary">Sure to Delete</button>
</form>
</div>
This may help.
<button data-toggle="modal" data-target="#myModal" class="dropbtn"
title="<%= ProInfoList[j].Id %>"
style="background-color:transparent; border:0;margin-bottom: -10px">
<a>Delete</a>
</button>
Add a attributes name as title and assign id into title attribute
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Do you want to delete the data ?</p>
<p class="text-warning"><small>If you sure to delete, please write some comments.</small></p>
<input type="text" size="50"></input>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" class="btn btn-default" data-dismiss="modal">Close</button><br><br>
<form action="/delProInfo/del" method="POST" novalidate>
<input type="hidden" name="Id" class="hiddenValue" value="" />
<button class="btn btn-primary">Sure to Delete</button>
</form>
</div>
</div>
</div>
</div>
When you will click on dropbtn button then you can get attribute name as title and set this value into hidden input type.
<script type="text/javascript">
$(document).ready(function(){
$('.dropbtn').click(function(){
var title = $('.dropbtn').attr('title')
$('.hiddenValue').val(title);
})
})
</script>
This is my HTML code for the first modal. The submit button is not functioning to open another modal.
<div class="modal fade" id="newModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">New record</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">
<input type="text" class="form-control" name="name"
placeholder="Input name of client">
</div>
</div>
<div class="modal-footer">
<button type="submit" onclick="submitForm()" class="btn
btn-primary">Submit</button>
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This is the HTML code for the second modal when you click the submit button on the first one.
<div class="modal fade" id="confirmationModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<form action="php/insert_client.php" method="post">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
Are you sure you want to add this client?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary" onclick="validateForm()">Save</button>
</div>
</form>
</div>
</div>
This is the javascript for the newModal and confirmationModal
function submitForm() {
document.getElementById("newModal").submit();
}
function validateForm(e) {
$("#confirmationModal").modal("show");
}
Based on the JS code you've shown, this function will need to be called in order for your second modal to be displayed:
function validateForm(e) {
$("#confirmationModal").modal("show");
}
Right now, it's not being called until the second modal's Save button is clicked.
I used fade dialog to display a form, and it can submit the form via ajax to create a new record in database.
And I am trying to refresh my page after ajax success. However, the page do not refresh with using Javascript(E.g. location.replace etc).
Ajax:
function callDatabase(action)
{
var pn = $('#PN').val();
var pp = $('#PP').val();
$.ajax({
type:"POST",
url:"databaseFunction.php",
data:{action: action, pn: pn, pp: pp},
success:function(msg){
window.location.reload();
}
});
}
HTML:
p>
<button class="btn btn-primary" data-toggle="modal" data-target="#addData">Insert Data</button>
</p>
<!-- Modal -->
<div class="modal fade" id="addData" tabindex="-1" role="dialog" aria-labelledby="addLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="addLabel">Insert Data</h4>
</div>
<form id="insertForm" >
<div class="modal-body">
<div class="form-group">
<label for="PN">ProductName</label>
<input type="string" class="form-control" id="PN" placeholder="ProductName">
</div>
<div class="form-group">
<label for="PP">ProductPrice</label>
<input type="string" class="form-control" id="PP" placeholder="ProductPrice">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" onclick="callDatabase('insert')" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
How can I refresh the page after I submitted the form?
You can change 'type=submit' to 'type=button'. Because a form will call submit-Event of form, if you already call ajax to submit, you should cancel submit of form.
when I click modal button is like this.
<button class="btn btn-danger" name="button" title="Hapus" method="get" data-toggle="modal" data-target="#deleteModal{{$objek->id}}" onclick="javascript: {{url('/admin/objek/'.$objek->id)}}"><i class="fa fa-trash-o fa-lg"></i>
</button>
and my modal like this.
<div class="modal fade" id="deleteModal{{$objek->id}}" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">Hapus Objek Wisata</h4>
</div>
<div class="modal-body">
<p>
Hapus data objek wisata dengan nama {{$objek->nama_objek}}?
</p>
</div>
<div class="modal-footer">
<form class="" action="{{url('/admin/objek', $objek->id)}}" method="post">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Tidak">
<input type="hidden" name="_method" value="delete">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="submit" class="btn btn-danger" name="name" value="Hapus">
</form>
</div>
</div>
</div>
</div>
the problem is how to show modal bootstrap with alert message after page reload?
alert message like this, but I want to make this in modal bootstrap like when I click modal delete button.
<script type="text/javascript">alert("Data has been submitted");</script>
thank for your attention.
You can use session data to make the modal open on the page reload.
After submitting the request just add some variable to session like this:
return redirect('route')->with('show_modal', true);
In view.blade.php:
<scirpt>
$(function(){
var show_modal = "{{ session()->pull('show_modal') }}";
if(typeof show_modal !== 'undefined' && show_modal) {
$('#modalId').modal('show');
// This will open up the modal if the variable is present in session as true
// OR you can simply show an alert message!
alert("Data has been submitted");
}
});
</script>
Hope this helps!