I want to show a bootstrap modal in my JSP login page when the password is wrong. Otherwise the user is redirected (through faces-config.xml) to another JSP page. The username and password are validated in a managedbean that calls a remote bean.
I tried this with JavaScript but cannot get the desired result. This is my JSP login:
<%-- BEGIN: Modal window --%>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<%-- END : Modal window --%>
<br>
<div class="container-fluid">
<div class="row">
<div class="panel-heading" align="center" style="opacity: 0.5;">
<h2><b><font color="white">RedCine<small><font color="white">Administrativo</font></small></font></b></h2>
</div>
</div>
<div class="row">
<div class="panel-body col-md-4 col-sm-6 col-xs-12 col-md-offset-4 col-sm-offset-3 " align="center">
<div class="container-fluid" style="margin-top: 1%; margin-bottom: 40%;">
<div class="panel panel-success" align="left">
<div class="panel-heading form-group">
<b><font color="white">
Ingrese usuario y contraseña</font> </b>
</div>
<div class="panel-body" >
<h:form id="PersonaBean">
<div class="form-group">
<label for="username">Usuario</label>
<h:inputText value="#{persona.userName}" required="required" styleClass="form-control" />
</div>
<div class="form-group">
<label for="password">Contraseña</label>
<h:inputSecret value="#{persona.password}" required="required" styleClass="form-control" />
</div>
<h:commandButton id="btn_entrar" value="Entrar" action="#{persona.login()}" styleClass="btn btn-large btn btn-success btn-lg btn-block" style="width: 100%; font-size:1.1em;"/>
</h:form>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer" align="center"><font style="color: #111">Copyright #2014 example.com, All Rights Reserved. </font></div>
</div>
</body>
<script>
$(document).ready(function(){
$('#btn_entrar').click(function(){
var resultado;
if(resultado = 0)
{
$("#myModal").modal("show");
}
});
});
</script>
</html>
How can I do that?
your variable "resultado" is not getting set to any value, set the "debugger" keyword above "if(resultado = 0)" and check for that value.
Related
I hope everyone had good holidays.
I need to add rows to my datatable inside a modal window(partial view). This modal window basically has a form for various fields and a datatable, together with two inputs and a button.
My idea was to fill the two input fields and when the button is pressed a new row is created in the table, with the values inserted in the two input fields. But for some reason, when I click the button the values in the input fields are empty.
The information on the table would very likely be stringified and sent, for example, to the field asp-for="test". So far this was what I thought.
Is this logic possible within a partial view? Do I need an additional form to receive data from my two inputs? I'm already inside another form and I know HTML5 doesn't allow for form nesting, but I get the nagging feeling that I would need an additional form for this logic.
Here is the code:
(js)
$(document).ready(function () {
$('#AddProdBtn').click(function () {
$('#returnLinesGrid').dataTable().fnAddData( [
$('#prodId').val(), $('#prodQty').val()] );
});
});
(cshtml)
<div id="return-edition-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content white-box white-box--lblreset">
<div class="modal-header">
<h5 class="modal-title create" style="display:none;">#TitleResource.ReturnCreate</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form asp-controller="Returns" asp-action="Create" method="post" autocomplete="off">
<div asp-validation-summary="ModelOnly"></div>
<a hidden id="create-url" asp-action="Create" asp-controller="Returns"></a>
<input type="hidden" value="#Guid.NewGuid()" asp-for="Id" />
<div class="modal-body row">
<div class="md-form col-6 create-only row">
<select asp-for="ReturnType" asp-items="Html.GetEnumSelectList<OrderReturnTypeEnum>()" required class="form-control" selectpicker>
<option value="">#LabelResource.SelectReturnType</option>
</select>
<span asp-validation-for="ReturnType"></span>
</div>
<div class="md-form col-6 create-only" id="ReturnMotivePlaceholder" style="margin-top: 6px">
<select disabled selectpicker>
<option value="">#LabelResource.SelectReturnMotive</option>
</select>
</div>
<div class="md-form col-6 create-only" data-dependency="#((int)OrderReturnTypeEnum.Recall)" style="margin-top:6px">
<select asp-for="ReturnMotive" asp-items="Html.GetEnumSelectList<OrderReturnMotiveEnumRecall>()" required class="form-control" selectpicker>
<option value="">#LabelResource.SelectReturnMotive</option>
</select>
<span asp-validation-for="ReturnMotive"></span>
</div>
<div class="md-form col-6 create-only" data-dependency="#((int)OrderReturnTypeEnum.Daily)" style="margin-top:6px">
<select asp-for="ReturnMotiveAux" asp-items="Html.GetEnumSelectList<OrderReturnMotiveEnumDaily>()" required class="form-control" selectpicker>
<option value="">#LabelResource.SelectReturnMotive</option>
</select>
<span asp-validation-for="ReturnMotiveAux"></span>
</div>
</div>
<div class="modal-body row">
<div class="md-form col-6 create-only" data-dependency="#((int)OrderReturnTypeEnum.Daily)">
<input type="number" value="" asp-for="InvoiceNumber" class="form-control" required placeholder="#LabelResource.SelectReturnInvoiceNumber" />
</div>
<div class="md-form col-6 create-only">
<input type="text" value="" asp-for="ClientReturnNumber" placeholder="#LabelResource.SelectClientReturnNumber" class="form-control" />
</div>
</div>
<div class="md-form col-3 create-only">
<input type="number" value="" id="prodId" placeholder="#LabelResource.SelectProdId" />
</div>
<div class="md-form col-3 create-only">
<input type="text" value="" id="prodQty" placeholder="#LabelResource.SelectProdQuantity" />
</div>
<div class="col-6>
<button type="button" id="AddProdBtn">#ButtonResource.AddProduct</button>
</div>
<div class="row">
<div class="col-12">
<div class="row">
<table class="dataTable" id="returnLinesGrid" asp-for="ReturnLines">
<thead>
<tr>
<th>#Html.Raw(LabelResource.ProductId)</th>
<th>#Html.Raw(LabelResource.Quantity)</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="row modal-footer message-footer pr-5">
<div class=" mr-md-0">
<a data-dismiss="modal" class="btn btn-danger w-100">#ButtonResource.Cancel</a>
</div>
<div class=" ml-3">
<button type="submit" class="btn btn-primary w-100">#ButtonResource.Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
But the value of "prodId" and "prodQty" is always empty when I click the "AddProdBtn" button. Almost as if it never. I have no idea what to do..
Thank you for any and all help.
Pictures
Modal window
Main window, modal is called by pressing "Nova devolução" button
You should add the js to the main view. Below is a working demo:
Main View:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#return-edition-modal">
Create
</button>
#await Html.PartialAsync("_ProductPartial")
#section scripts{
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<script>
$(document).ready(function () {
var datatable = $('#returnLinesGrid').dataTable();
$('#AddProdBtn').click(function () {
datatable.fnAddData([
$('#prodId').val(), $('#prodQty').val()]);
});
});
</script>
}
Partial View:
<div id="return-edition-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-controller="Returns" asp-action="Create" method="post" autocomplete="off">
<div asp-validation-summary="ModelOnly"></div>
<div class="md-form col-3 create-only">
<input type="number" value="" id="prodId" placeholder="SelectProdId" />
</div>
<div class="md-form col-3 create-only">
<input type="text" value="" id="prodQty" placeholder="SelectProdQuantity" />
</div>
<div class="col-6">
<button type="button" id="AddProdBtn">AddProduct</button>
</div>
<table id="returnLinesGrid">
<thead>
<tr>
<th>#Html.Raw("ProductId")</th>
<th>#Html.Raw("Quantity")</th>
</tr>
</thead>
</table>
<div class="modal-footer">
<div class="mr-md-0">
<a data-dismiss="modal" class="btn btn-danger">Cancel</a>
</div>
<div class=" ml-3">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Result:
I finally got it! There is a typescript part of the code, which I had no idea would have a completely different behaviour than the javascript code, in the modal window, for some reason. I basically just had to put my jquery code in the .ts file associated(in this case Return.Index.ts) and then it finally recognized the values in my inputs!
Thank you so much, everyone, and early happy new year!
I have a button name Assign agent button when i click on button a loader will appear for 3 second(with timeInterval function) and then after 3 second a modal will appear.
The issue is when i click on assign button the loader appear and then disappear after 3 second but on second time when I click on assign button the loader appear but suddenly disappear in 1 or 2 second.
Why the loader is not taking 3 second same as first click?
<button type="button" value="edit" name="edit-btn" class="spin-modal clear-cookie"
onclick="spiner();"> Assign
Agent</button> <div class="loader-spiner-outer class-none-view">
<div class="loader-box">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div> <div class="modal" id="myModal" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Assign Lead</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<form action="#" class="custom-add-form" method="post" style="padding:22px 0px 5px 0px;">
<div class="col-12">
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Assign Agent</label>
<select class="form-control" id="sel1">
<option>First</option>
<option>Second</option>
<option>Third</option>
<option>Four</option>
</select>
</div>
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Other</label>
<input type="text" class="form-control" id="name">
</div>
<div class="col-12 no-pad-left-right">
<div class="form-group text-right">
<div class="submit-m-div">
<input type="submit" value="Submit" name="submit" class="add-cm-btn no-margin-top-btm">
<span class="skip-icon" style="bottom: 0px;"><i class="fas fa-angle-double-right"></i></span>
</div>
</div>
</div>
</div>
</form>
<!-- Modal footer -->
<!-- <div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
javascript/jquery code
function spiner() {
$(".loader-spiner-outer.class-none-view").removeClass("class-none-view");
setInterval(function() {
$(".loader-spiner-outer").addClass("class-none-view");
}, 800);
setTimeout(function() {
$("#myModal").show();
}, 900);
};
$(".close").click(function() {
$("#myModal").hide();
});
Try this:
$(".close").click(function ()
{
$("#myModal").hide();
});
function spiner()
{
$(".loader-spiner-outer").addClass("class-none-view");
setTimeout(function ()
{
$(".loader-spiner-outer").removeClass("class-none-view");
setTimeout(function ()
{
$("#myModal").show();
}, 3000);
}, 3000);
}
.loader-spiner-outer
{
display: none;
}
.loader-spiner-outer.class-none-view
{
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" value="edit" name="edit-btn" class="spin-modal clear-cookie"
onclick="spiner();"> Assign
Agent</button> <div class="loader-spiner-outer">
<div class="loader-box">
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
</div> <div class="modal" id="myModal" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Assign Lead</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<form action="#" class="custom-add-form" method="post" style="padding:22px 0px 5px 0px;">
<div class="col-12">
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Assign Agent</label>
<select class="form-control" id="sel1">
<option>First</option>
<option>Second</option>
<option>Third</option>
<option>Four</option>
</select>
</div>
<div class="form-group custom-form-group" style="width: 100%;">
<label for="name">Other</label>
<input type="text" class="form-control" id="name">
</div>
<div class="col-12 no-pad-left-right">
<div class="form-group text-right">
<div class="submit-m-div">
<input type="submit" value="Submit" name="submit" class="add-cm-btn no-margin-top-btm">
<span class="skip-icon" style="bottom: 0px;"><i class="fas fa-angle-double-right"></i></span>
</div>
</div>
</div>
</div>
</form>
<!-- Modal footer -->
<!-- <div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
And don't use setInterval(() => {}), because it is a repeating timer.
Use setTimeout(() => {}), because this will only run once.
'setInterval' vs 'setTimeout'
I am working on a web app using bootstrap and angular. I have a button that I would like to show a modal with data from another html page (employee.function.add.html). All files are under the root employee folder
Here is the modal content within employee.function.add.html
<div class="modal fade" id="addModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">X</button>
<h1>Lab 6</h1>
</div>
<div class="modal-body">
<div class="panel panel-default">
<div class="panel-heading text-center">
Employee Information
</div>
<div class="panel-body">
<div class="row">
<div class="text-right col-xs-2">Title:</div>
<div class="text-left col-xs-3" id="title"></div>
<div class="text-right col-xs-2">First:</div>
<div class="text-left col-xs-3" id="firstname"></div>
</div>
<div class="row">
<div class="text-right col-xs-2">Phone#</div>
<div class="text-left col-xs-3" id="phone"></div>
<div class="text-right col-xs-2">Email</div>
<div class="text-left col-xs-3" id="email"></div>
</div>
<div class="row">
<div class="text-right col-xs-2">Dept:</div>
<div class="text-left col-xs-3" id="departmentname"></div>
<div class="text-left col-xs-2">Surname:</div>
<div class="text-left col-xs-4">
<input type="text" placeholder="enter last name" id="TextBoxLastName" class="form-control" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="panel-footer">
<input type="button" value="Find Employee" id="empbutton" />
<div class="col-xs-10" id="lblstatus"></div>
</div>
</div>
</div>
</div>
</div>
</div>
The button is created within employee.function.html here
<div class="animated fadeIn">
<div class="row">
<!--<div class="col-md-6">-->
<div class="col-md-12">
<div class="card">
<div>
<div class="panel panel-default">
<div class="panel-heading" style="background-color:#e0e9f5">
<h2 class="panel-title">Employee Functions</h2>
</div>
<br />
<div class="col-sm-12">
<div align="right" style="padding-bottom:10px">
<!--<button type="button" class="btn btn-info btn-default btn-lg" href="employee.function.add.html" data-toggle="modal" data-target="#addModal">Add Function</button>-->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
</div>
</div>
<div class="panel-body">
<jqxGrid
[width]="'100%'" [theme]='"energyblue"' [source]='functionAdapter' [pageable]='true' [height]='500' [altrows]='true'
[editable]='true' [columns]='columns'>
</jqxGrid>
</div>
</div>
</div>
</div>
</div>
<!--/.col-->
</div>
<!--/.row-->
</div>
I keep getting this error in the console.
Uncaught Error: Bootstrap's Javascript requires Jquery
In the index.html file I already declared all the needed styles and links for bootstrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
How can I get the modal to work?
and would like something clarified. I am using bootstrap and angular for the project. Within the employee folder and the other folders are html files and ts files. Am I getting this error because I should write the modal using angular? and not bootstrap? I assumed I would make the modal using bootstrap, but that error appears. Some clarification would be helpful. Thank you for the help.
Seems like you forgot to add jQuery to your project. Bootstrap needs jQuery in order to work. Add this line to your code before including bootstrap.min.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
I hope that helps! :)
Bootstrap requires Jquery for its widgets to work. If you want angular versions I would look into angular ui bootstrap here: Angular UI Bootstrap
I want to build Modal Window with cookie to display only once . I follow this tutorial http://calebserna.com/bootstrap-modal-email-subscription-form/ but still not working ? can anyone tell me how to fix it ? thanks .
here my website.http://cloudsblack.com/modalwindow.html
here my code .
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="heading heading-v1 margin-bottom-10">
<h2><strong><span class="color-orange">Modal Window</strong></span></h2>
</div>
</div>
<div class="modal-body">
<a class="btn btn-link" data-dismiss="modal">Close</a>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if ($.cookie(‘pop’) == null) {
$(‘#myModal’).modal(‘show’);
$.cookie(‘pop’, ’7′);
}
});
</script>
Hi I'm here to answer my own question , I found these code its work ! thanks .
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Subscription Form Demo</h4>
<p>This is Bootstrap Modal popup example.</p>
</div>
<div class="modal-body">
<!--End mc_embed_signup-->
<!-- Begin MailChimp Signup Form -->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL"/>
</div>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_9e279011b21a23e1aed5e4868_cca4394bc9" value=""/></div>
<div class="form-group remove-bottom">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-default"/>
</div>
</div>
</form>
<!--End mc_embed_signup-->
</div>
<div class="modal-footer remove-top">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!--============================================================= MODAL WINDOW END=================================================================-->
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bs-docs-sidebar').affix({
offset: {
top: 10
}
})
if ($.cookie('pop') == null) {
$('#myModal').modal('show');
$.cookie('pop', '7');
}
});
$(function($) {
$('#deleteCookie').click(function() {
$.cookie('pop', null);
window.location.reload();
});
});
</script>
I'm using Bootstrap framework v3.3.0 for my website.
I'm dealing with multiple modal dialog boxes. In one dialog there is one form having one textfield, one date control and one file control. After submitting the form successfully I hide this modal and show another modal with success message. On this modal there is one button having text "Submit another form". When user clicks on this button the dialog containing success message get close and the modal dialog containing form opens but it contains the previous values that I filled in. I don't want these values again. I want to clear these fields. How should I do this?
Following is the code:
HTML code:
<div class="modal fade" id="newModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Submit Form</h4>
</div>
<div class="modal-body" style="max-height: 300px; overflow-y: auto;">
<br/>
<!-- The form is placed inside the body of modal -->
<form id="request_form" method="post" class="form-horizontal" enctype="multipart/form-data" action="">
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Reg ID <span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<input type="text" class="form-control" name="reg_id" id="reg_id"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Reg Date<span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<input type="text" class="form-control date_control" id="reg_date" name="reg_date" value="" placeholder="yyyy-mm-dd">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 col-sm-offset-1 control-label">Upload Image<span style="color:#FF0000">*</span> :</label>
<div class="col-sm-5">
<input type="file" name="reg_image" id="reg_image" accept="image/*" capture="camera" />
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-5">
<button type="submit" class="btn btn-success" id="btn_receipt_submit">Submit</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="successModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Your Request Uploaded Successfully</h4>
</div>
<div class="modal-body" style="max-height: 300px; overflow-y: auto;">
<h4 style="font-weight:bold;text-align: center;">Thank you!</h4>
<p style="text-align: justify;">Your request has been successfully submitted.</p>
<div class="modal-footer" style="text-align:center;">
<button type="button" class="btn btn-danger" id="btn_exit">Exit</button>
<button type="button" class="btn btn-success" data-dismiss="modal" id="btn_scan_another">Scan Another Receipt</button>
</div>
</div>
</div>
</div>
</div>
The jQuery code :
$(document).ready(function() {
$("#btn_scan_another").on("click", function(event){
event.preventDefault();
$('#successModal').modal('hide');
$('#newModal').modal('show');
});
});
Thanks.
You could add something like:
$('#newModal').find('form')[0].reset();
before showing it
You actually don't have any JS code that does what you want.
Have you tried anything?
How about this:
$('#newModal').on('hidden.bs.modal', function(){
$(this).find('form')[0].reset();
});