I want to create a sign in - signup form, using html <form> and bootstrap4 modal. Every thing is okay but when I click the submit button, the modal is dismissed, so the error of data validate format can not be show for clients. Now how can I keep the modal displayed when I click submit button?
<a class='nav-link account-active' href='#' data-toggle="modal" data-target="#my_account"></a>
<div class="modal fade" id="my_account" style='height: auto' tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="flase">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<ul class="nav nav-tabs w-100" role="tablist">
<li class="nav-item w-50">
LOGIN
</li>
<li class="nav-item w-50">
SIGN UP
</li>
</ul>
</div>
<div class="tab-content" style="font-size: 14px;">
<div id="login" class="tab-pane active" style='height: 550px'>
<form method='post' action=''>
<h4 class="modal-title text-center mt-4 mb-3" id="eModalLabel">WELCOME BACK!</h4>
<h6 class="text-center text-muted">Login to your account</h6>
<div class="error" id='signin_err'>{signin_err}</div>
<div class='section-input'>
<div class="mt-2">Email</div>
<input type="text" class="form-control w-100 my-2" name="" autofocus>
</div>
<div class='section-input'>
<div class="mt-2">Password</div>
<input type="text" class="form-control w-100 my-2" name="">
</div>
<div class='section-input'>
<button class="btn btn-primary w-100 my-3" type="submit" name="signin_btn">LOGIN</button>
</div>
</form>
<div class="forgot text-center mb-3">forgot your password?</div>
</div>
<div id="register" class="tab-pane" style='height: auto'>
<h4 class="modal-title text-center mt-4 mb-3" id="eModalLabel" style='text-transform: uppercase;'>It's as easy as sunday morning</h4>
<h6 class="text-center text-muted">Sign up now</h6>
<div class='error' id='signup_err'>{signup_err}</div>
<div class='section-input' style="margin-top: 70px">
<div class="mt-2" id='signUp_name'>Name</div>
<input type="text" class="form-control w-100 my-2" name="name" autofocus >
</div>
<div class='section-input'>
<div class="mt-2" id='signUp_mail'>Email</div>
<input type="text" class="form-control w-100 my-2" name="mail" id='mail' >
</div>
<div class='section-input'>
<div class="mt-2" id='signUp_psd'>Password</div>
<input type="text" class="form-control w-100 my-2" name="psd" >
</div>
<div class='section-input'>
<div class="mt-2" id='confirm_psd'>Confirm password</div>
<input type="text" class="form-control w-100 my-2" name="psd_cf" >
</div>
<div class='section-input'>
<button class="btn btn-primary w-100 my-3" style='height:48px;margin-bottom:100px;border-radius: 0' type="" name="signup_btn">SIGN UP</button>
</div>
<div style='height:70px'></div>
</div>
</div>
</div>
</div>
</div>
I have no idea how your backend is being implemented, but based on your code, my guess is that your page is being refreshed every time you click submit because of the empty action. I see no other way that the modal will close.
You'll need to submit via AJAX if you want to display any validation without refreshing.
Related
I'm using bootstrap 5 i have one modal for login and register but but there is two bootstrap tabs inside one modal and i want to display tab as per button click but this is not working.
When i click on login button then inside modal login tab should be active and if i click on register button then inside modal register tab should be active.
Giving this error in console:-
Uncaught TypeError: Cannot read property 'show' of null
My Code:
$('.register-btn').click(function() {
$('#loginModal').modal('show');
var triggerEl = document.querySelector('[data-bs-target="#register"]')
bootstrap.Tab.getInstance(triggerEl).show()
})
$('.login-btn').click(function() {
$('#loginModal').modal('show');
var triggerE2 = document.querySelector('[data-bs-target="#login"]')
bootstrap.Tab.getInstance(triggerE2).show()
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary register-btn">
Register
</button>
<button type="button" class="btn btn-primary login-btn">
Login
</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleloginModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="row m-0">
<div class="col-md-6 p-0">
<img src="images/login-img.png" class="img-fluid" alt="">
</div>
<div class="col-md-6">
<div class="login-right-body">
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab" aria-controls="register" aria-selected="false">Register</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form>
<div class="form-group custom-form-group">
<label>Mobile Number</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Login</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<form>
<div class="form-group custom-form-group">
<label>Full Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks for your efforts!
You can trigger the click to simulate clicking the tab.
$(".register-btn").click(function () {
$("#register-tab").trigger("click");
$("#loginModal").modal("show");
});
$(".login-btn").click(function () {
$("#login-tab").trigger("click");
$("#loginModal").modal("show");
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary register-btn">
Register
</button>
<button type="button" class="btn btn-primary login-btn">
Login
</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleloginModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="row m-0">
<div class="col-md-6 p-0">
<img src="images/login-img.png" class="img-fluid" alt="">
</div>
<div class="col-md-6">
<div class="login-right-body">
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab" aria-controls="register" aria-selected="false">Register</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form>
<div class="form-group custom-form-group">
<label>Mobile Number</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Login</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<form>
<div class="form-group custom-form-group">
<label>Full Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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 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.
change your html like
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a onclick="openModal('GeneralModal')" class="dropdown-item" href="#">General Report </a>
<a onclick="openModal('VehicleModal')" class="dropdown-item" href="#">Vehicle Report</a>
<a onclick="openModal('WarrantylModal')" class="dropdown-item" href="#">Warranty Report</a>
</div>
and give your form id so we can change thier attribute using javascript like
<form action="" id="modalForm" role="form" method="post">
then in script
function openModal(modalName){
if(modalName == 'GeneralModal'){
$("#modalForm").attr("action",'/Export/ExportGeneral');
$("#modalId").modal('show');
}
else if(modalName == 'VehicleModal'){
$("#modalForm").attr("action",'/Export/ExportVehicle');
$("#modalId").modal('show');
}
else if(modalName == 'WarrantylModal'){
$("#modalForm").attr("action",'/Export/ExportWarranty');
$("#modalId").modal('show');
}
}
i think it might solved your problem and optimized your code. :)
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I'm trying to change my modal through a link click event after I already changed its html, but unfortunately it's not working, I'm just a new student, so I'd like to know why this isn't working...
OBS: I'm Brazilian, so some parts of the code will be in Portuguese.
HTML CODE
<div id="modais" class="mt-5 row">
<div class="modal fade text-dark mx-auto" id="loginModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Faça login</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body text-center">
<form class=" mx-auto col-10 border rounded py-3 px-4">
<div class="form-group row">
<label for="loginEmail">E-mail de login</label>
<input class="form-control " type="email" name="loginEmail" id="loginEmail" />
</div>
<div class="form-group row">
<label for="loginSenha">Senha</label>
<!--HERE IS THE LINK ########## --><input class="form-control " type="password" name="loginSenha" id="loginSenha" />
</div>
<p class="small">Não tem uma conta? Cadastre-se clicando <a id="linkModal" href="#">aqui</a></p>
</form>
<p class="small"><span class="text-danger">*</span>Para cadastrar quaisquer atividades é necessário ter uma conta admnistrativa.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Entrar</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sair</button>
</div>
</div>
</div>
</div>
</div>
JQUERY CODE
$(document).ready( function(){
var modal = "login";
$("#linkModal").click(function(){
if(modal == "login"){
$("#modais").fadeOut("fast");
$(".modal-title").html("Sing up");
$(".modal-body").html('<div class="modal-body text-center"> <form class=" mx-auto col-10 border rounded py-3 px-4"> <div class="form-group row"> <label for="cadastroEmail">E-mail para cadastro</label> <input class="form-control " type="email" name="cadastroEmail" id="cadastroEmail" /> </div> <div class="form-group row"> <label for="cadastroSenha">Senha</label> <input class="form-control " type="password" name="cadastroSenha" id="cadastroSenha" /> </div> <p class="small">Sing in clicking <a id="linkModal" href="#">here</a></p> </form> <p class="small"><span class="text-danger">*</span>Para cadastrar quaisquer atividades é necessário ter uma conta admnistrativa.</p> </div>');
$("#modais").fadeIn("fast");
modal = "cadastro";
}
else{
$("#modais").fadeOut("fast");
$(".modal-title").html("Sing in");
$(".modal-body").html('<div class="modal-body text-center"> <form class=" mx-auto col-10 border rounded py-3 px-4"> <div class="form-group row"> <label for="loginEmail">E-mail de login</label> <input class="form-control " type="email" name="loginEmail" id="loginEmail" /> </div> <div class="form-group row"> <label for="loginSenha">Senha</label> <input class="form-control " type="password" name="loginSenha" id="loginSenha" /> </div> <p class="small">Don\'t you have a account? Sing up clicking <a id="linkModal" href="#">here</a></p> </form> <p class="small"><span class="text-danger">*</span>Para cadastrar quaisquer atividades é necessário ter uma conta admnistrativa.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Entrar</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Sair</button> </div> </div>');
$("#modais").fadeIn("fast");
modal = "login";
}
});
});
If you're saying that you click to change it once and then, it seems that the click event doesn't register to the #linkModal, it may be because you need to change
$("#linkModal").click(function(){
to
$(document).on("click","#linkModal",function(){
it's hard to tell what's going on here, because you don't have any elements with the ID "#linkModal" in the code that you shared.
I am working on a normal login page. I would like to add different icons around the username and password text box.I have added a picture below. I am working on core UI template with Angular 4.
I could not able to get the sequence right.
<div class="app flex-row align-items-center">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card-group mb-0">
<div class="card p-4">
<div class="card-block">
<h1>Login</h1>
<p class="text-muted">Sign In to your account</p>
<form (submit)="loginUser($event)">
<div class="input-group mb-3">
<span class="input-group-addon"><i class="icon-user"></i></span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group mb-4">
<span class="input-group-addon"><i class="icon-lock"></i></span>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="row">
<div class="col-lg-6">
<button type="submit" class="btn btn-primary px-4">Login</button>
</div>
<div class="col-lg-6 text-right">
<button type="button" class="btn btn-link px-0">Forgot password?</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
If you just want to change the icon, then choose your icon here:
http://fontawesome.io/3.2.1/icons/
and just change the class
<span class="input-group-addon"> <i class="icon-user"> </i></span> //Here
<span class="input-group-addon"> <i class="icon-lock"> </i></span> // andHere