jQuery onclick modal - javascript

I have created a form modal using jQuery:
<ul class="loginbar pull-right">
<li class="hoverSelector">
<i class="fa fa-globe"></i>
Help
</li>
<li class="topbar-devider">
</li>
<li id="id1 ">
Register
</li>
<li class="topbar-devider">
</li>
<li>
<a>Login</a>
</li>
</ul>
Form code
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color: #f4a742">Register a new account</h4>
</div>
<div class="modal-body">
<div class="container content">
<div class="row">
<div class="col-md-6 ">
<form class="reg-page" id="RegID">
<div class="form-group">
<div class="form-group internal">
<label>First Name</label> <input type="text" name="fname"
class="form-control margin-bottom-20">
</div>
</div>
<div class="form-group">
<div class="form-group internal">
<label>Last Name</label> <input type="text" name="lname"
class="form-control margin-bottom-20">
</div>
</div>
<div class="form-group">
<div class="form-group internal">
<label>Email Address <span class="color-red">*</span></label>
<input type="text" name="email"
class="form-control margin-bottom-20">
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6 checkbox">
<label> <input type="checkbox"> I read <a
href="page_terms.html" class="color-green">Terms and
Conditions</a>
</label>
</div>
<div class="col-lg-6 text-right">
<button class="btn-u" type="submit">Register</button>
</div>
</div>
</form>
</div>
</div>
</div> <!-- end content -->
</div> <!-- end modal-body -->
</div> <!-- end modal-content -->
</div> <!-- end modal-dialog -->
</div> <!-- end modal -->
</div> <!-- end container -->
<script>
$( "#id1" ).click(function() {
$( "#myModal" ).click();
});
</script>
It seems everything is okay for me, initial it was work but suddenly it is giving trouble, so what would be the mistake.
When ever I have click on register it is not pop-up the form, could you please let me know what mistake I have done.


$( "#id1" ).click(function(ev) {
ev.stopImmediatePropagation(); // sometimes click event fires twice in jQuery you can prevent it by this method.
$( "#myModal" ).modal(); // you should use native function of Bootstrap.
});


You dont need to add any jquery or js for that at first place.
So you need to add data-target attribute to target your myModal,
<li id="id1 "> Register</li>
So you markup should look like,
<ul class="loginbar pull-right">
<li class="hoverSelector"><i class="fa fa-globe"></i>
Help</li>
<li class="topbar-devider"></li>
<li id="id1 "> Register</li>
<li class="topbar-devider"></li>
<li><a>Login</a></li>
</ul>
Alternate to your js requirement you could do it on click of a tag,
$('ul.loginbar').on('click', 'li#id1 > a', function(){
$('div#myModal').modal('show');
});

Related

Dynamically creating tabs in bootstrap, with each new tab having the same default content?

I want to make a page such that I start off with Landing Page and Add Tab[+]. Then if I click add tab, I get a New Tab, with a blank version of the Landing Page Template. I'm using Bootstrap for front end and Python for back end.
https://jsfiddle.net/ub9m4ayq/1/
<form method="post">
<input type="hidden" name="campaign_key" value="{{campaign.campaign}}">
<input type="hidden" name="new" value="{{new}}">
<fieldset>
<div class="nav flex-column nav-pills" id="page-tabs" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="landing-tab" data-toggle="pill" href="#v-pills-landing" role="tab"
aria-controls="v-pills-home" aria-selected="true">Landing Page</a>
<a class="nav-link" id="add-new-tab" data-toggle="pill" href="#v-pills-add-new" role="tab"
aria-controls="v-pills-profile" aria-selected="false">[+] Add Page</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-landing" role="tabpanel" aria-labelledby="v-pills-landing">
<div class="row">
<div class="col">
<div class="mb-3">
<label class="form-label">Page Title</label>
<input class="form-control" placeholder="Landing Page">
</div>
</div>
<div class="col">
<div class="mb-3">
<label class="form-label">URL</label>
<input class="form-control" type="text" name="page_url" placeholder="/index.html">
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">Page template (preview)</label>
<textarea id="email_template" name="email_template">{}</textarea>
<div id="email_template_editor" style="height: 300px; width: 100%">
</div>
<script src="/static/ace-builds/src-min-noconflict/ace.js" type="text/javascript"
charset="utf-8"></script>
<script>
var editor_textarea = document.getElementById('email_template');
var editor_elem = document.getElementById('email_template_editor');
editor_textarea.style.display = 'none';
editor_elem.style.border = '1px solid #ccc';
var editor = ace.edit(editor_elem, { wrap: true });
editor.session.setMode("ace/mode/html");
//editor.setTheme("ace/theme/twilight");
editor.session.on('change', function () {
editor_textarea.value = editor.session.getValue();
});
</script>
</div>
</div>
<div class="tab-pane fade" id="v-pills-add-new" role="tabpanel" aria-labelledby="v-pills-add-new">
<p>Hi</p>
</div>
</div>
</fieldset>
<div class="mb-3">
<button class="btn btn-primary">Save</button>
</div>
</form>
Thanks!

How To Use JavaScript To Copy Text From One Field To Another Tab Menu's Field?

I am trying to copy text from textfield to another Tab Menu's textfield by a checkbox.
The javascript works if the textfield copy in the SAME Tab Menu with the following sample code from: https://www.htmlgoodies.com/tutorials/forms/article.php/3898101/How-To-Use-JavaScript-To-Copy-Text-From-One-Field-To-Another.htm
But how could I make the Tab 1 textfield copy to Tab 2 textfield with the checkbox?
This is what I ever tried c.frm_DQ.poc_person1.value = c.frm_ID.poc_person.value;
<script>
function ContactCopy(c) {
if(c.frm_contactCopy.checked == true) {
c.poc_person1.value = c.poc_person.value;
}
}
<script>
function ContactCopy(c) {
if(c.frm_contactCopy.checked == true) {
c.poc_person1.value = c.poc_person.value;
}
}
</script>
<div class="container">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#menu1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Tab 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="menu1" class="container tab-pane active"><br>
<!-- beginning -->
<div class="container py-3">
<div class="row">
<div class="mx-auto col-sm-12">
<!-- form user info -->
<form class="form" role="form" autocomplete="off" name="frm_ID">
<div class="card">
<div class="card-header">
<b style="color:#C02E93">Section A</b>
</div>
<div class="card-body " style="background-color:#F8F9F9">
<p><b> Contact Information </b></p>
<div class="form-group row pl-3 my-2">
<label class="col-lg-3 col-form-label form-control-label">Contact Person</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" name="poc_person">
</div>
</div>
<input type="checkbox" name="frm_contactCopy" onclick="ContactCopy(this.form)">
<em>Check this box if Contact Details are the same as above.</em>
<div class="form-group row pl-3 my-2">
<label class="col-lg-3 col-form-label form-control-label">Contact Person 2</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" name="poc_person1">
</div>
</div>
</div>
</div>
</form>
<!-- /form user info -->
</div>
</div>
</div>
<!-- end -->
<!--menu1 -->
</div>
<div id="menu2" class="container tab-pane fade"><br>
<!-- beginning -->
<div class="container py-3">
<div class="row">
<div class="mx-auto col-sm-12">
<!-- form user info -->
<form class="form" role="form" autocomplete="off" name="frm_DQ">
<br>
<div class="card">
<div class="card-header">
<b style="color:#C02E93">Section B</b>
</div>
<div class="card-body " style="background-color:#F8F9F9">
<div class="form-group row pl-3 my-2" >
<label class="col-lg-3 col-form-label form-control-label"><b>Process Contact Information</b></label>
</div>
<input type="checkbox" name="frm_contactCopy" onclick="ContactCopy(this.form)">
<em>Check this box if Contact Details are the same as Section A.</em>
<div class="form-group row pl-3 my-2">
<label class="col-lg-3 col-form-label form-control-label">Contact Person</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" name="poc_person1">
</div>
</div>
</div>
<br>
</form>
<!-- /form user info -->
</div>
</div>
</div>
<!-- end -->
</div>

When you click the input with type checkbox from second form, the parameter c will refer to the form with name frm_DQ and your input with name poc_person is present within the form with name property frm_ID. So your statement c.poc_person1.value = c.poc_person.value; will fail. Instead you can directly grab the input poc_person with querySelector.
function ContactCopy(c) {
if(c.frm_contactCopy.checked == true) {
c.poc_person1.value = document.querySelector('input[name="poc_person"]').value;
}
}
<div class="container">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#menu1">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Tab 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="menu1" class="container tab-pane active"><br>
<!-- beginning -->
<div class="container py-3">
<div class="row">
<div class="mx-auto col-sm-12">
<!-- form user info -->
<form class="form" role="form" autocomplete="off" name="frm_ID">
<div class="card">
<div class="card-header">
<b style="color:#C02E93">Section A</b>
</div>
<div class="card-body " style="background-color:#F8F9F9">
<p><b> Contact Information </b></p>
<div class="form-group row pl-3 my-2">
<label class="col-lg-3 col-form-label form-control-label">Contact Person</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" name="poc_person">
</div>
</div>
<input type="checkbox" name="frm_contactCopy" onclick="ContactCopy(this.form)">
<em>Check this box if Contact Details are the same as above.</em>
<div class="form-group row pl-3 my-2">
<label class="col-lg-3 col-form-label form-control-label">Contact Person 2</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" name="poc_person1">
</div>
</div>
</div>
</div>
</form>
<!-- /form user info -->
</div>
</div>
</div>
<!-- end -->
<!--menu1 -->
</div>
<div id="menu2" class="container tab-pane fade active show"><br>
<!-- beginning -->
<div class="container py-3">
<div class="row">
<div class="mx-auto col-sm-12">
<!-- form user info -->
<form class="form" role="form" autocomplete="off" name="frm_DQ">
<br>
<div class="card">
<div class="card-header">
<b style="color:#C02E93">Section B</b>
</div>
<div class="card-body " style="background-color:#F8F9F9">
<div class="form-group row pl-3 my-2">
<label class="col-lg-3 col-form-label form-control-label"><b>Process Contact Information</b></label>
</div>
<input type="checkbox" name="frm_contactCopy" onclick="ContactCopy(this.form)">
<em>Check this box if Contact Details are the same as Section A.</em>
<div class="form-group row pl-3 my-2">
<label class="col-lg-3 col-form-label form-control-label">Contact Person</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" name="poc_person1">
</div>
</div>
</div>
<br>
</form>
<!-- /form user info -->
</div>
</div>
</div>
<!-- end -->
</div>

Disable first form and open another form to insert data.. all this i have to do in same page?

Disable first form and open another form to insert data.. all this i have to do in same page how to do that ?
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
<!-- JQUERY DATATABLES
<small>Taken from datatables.net</small> -->
</h2>
</div>
<!-- Basic Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
Add Amigo
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<!-- last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="City Id" id="city_id">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="Country Id" id="country_id">
</div>
</div>
</div>
</div>
</div>
<!-- end of last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<button type="submit" id="submit" class="btn btn-primary" value="submit" name="">Submit Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
here is the another section of same page
<section class="content">
<div class="container-fluid">
<div class="block-header">
<h2>
<!-- JQUERY DATATABLES
<small>Taken from datatables.net</small> -->
</h2>
</div>
<!-- Basic Examples -->
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>
Add Amigo
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="material-icons">more_vert</i>
</a>
<ul class="dropdown-menu pull-right">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<!-- last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="City Id" id="city_id">
</div>
</div>
</div>
<div class="col-lg-4 col-md-4">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">person</i>
</span>
<div class="form-line">
<input type="text" class="form-control date" placeholder="Country Id" id="country_id">
</div>
</div>
</div>
</div>
</div>
<!-- end of last row -->
<div class="row">
<div class="col-sm-12">
<div class="col-lg-4 col-md-4">
<button type="submit" id="submit" class="btn btn-primary" value="submit" name="">Submit Details</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
here is the code.....when i successfully insert data after clicking submit button in first form ..i want the first form to be disable and 2 form should be enabled for inserting data !

Here is a simple way to do so using jquery :
First set the second form to be display:none by default then detect the function submit of the first form then show the second and hide the first using jQuery Effects - Fading :
With jQuery you can fade elements in and out of visibility.
jQuery fadeIn()
jQuery fadeOut()
jQuery fadeToggle()
jQuery fadeTo()
$(function(){
$('#first button').on('click',function(){
/* your code */
$('#first').css('pointer-events','none');
$('#second').fadeIn();
});
$('#second button').on('click',function(){
/* your code */
$('#second').css('pointer-events','none');
$('#first').fadeIn();
})
})
section {
Width:100%;
height:200px;
}
#first {
background-color:blue;
}
#second{
background-color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<section id="first">
<div>
<button>Submit</button>
</div>
</section>
<section id="second" style="display:none">
<div>
<button>Submit</button>
</div>
</section>

Toggle Disabled to Unable Text Fields in Sections

I am working on a new concept to allow Users to made update their account profile without the need to reload the screen to allow for updates.
Currently, I have two sections that will display the information they already submitted. By default, all field are disabled. Each section contain an "Edit" button to allow for modifications.
The problem that I am facing is that my "Edit" buttons are enabling editing on all sections, not their own section.
Toggle Disabled fields for editing in Sections
Here's the HTML code:
<div class="container">
<p>User should use the "Edit" button to correct any information separated in the form sections, individually.
User should be allowed to submit individual sections with updated information.</p>
<br />
<form name="ReviewInformation" method="post" class="clearfix">
<section id="NameConfirmation" style="background-color: #F1F3F2; border-radius: 8px; clear: both;" class="border-gray">
<!-- FIRST AND NAME SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-users"></i> First & Last Name Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserEmail" name="UserEmail" class="form-control" placeholder="First Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserPhone" name="UserPhone" class="form-control" placeholder="Last Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- /FIRST AND LAST NAME SECTION/ -->
</section>
<div class="col-lg-12 spacer"></div>
<hr class="horizontal-line" />
<div class="spacer"></div>
<section id="EmailPhoneConfirmation" style="background-color: #E5F2F5; border-radius: 8px; clear: both;" class="border-gray">
<!-- EMAIL AND PHONE SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-envelope"></i> Email & Phone# Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="emailaccount#isp.com" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="801-999-9999" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- EMAIL AND PHONE SECTION -->
</section>
<div class="clearfix"></div>
<hr />
<div class="clearfix"></div>
<div class="align-text-center">
<button type="sumbit" id="myForm" class="btn btn-success">Submit Form</button>
</div>
</form>
</div>
Here's the JS:
<script>
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled');
else $this.attr('disabled', 'disabled');
});
};
})(jQuery);
$(function() {
//$('input:editlink').click(function() {
$('input:button').click(function() {
$('input:text').toggleDisabled();
});
});
</script>
Here's the DEMO: https://jsfiddle.net/UXEngineer/7tft16pt/35/
So, I am trying to get individual editing enable only the section they are associated with.
Can anyone help with this issue? I would appreciate any help, thanks!

You can use:
$(function() {
$('input:button').click(function() {
$(this).closest('.col-lg-12').next().find('input:text').toggleDisabled();
});
});
Demo: https://jsfiddle.net/7tft16pt/38/
Use closest() -> https://api.jquery.com/closest/ , and next() -> https://api.jquery.com/next/

Viewing bootstrap pane when link is clicked

I want to be able view my pane when I click on the link "Forgot your password?".
Right now what I have done is that I've created a tab for the specific pane. When I click on the tab or the link, I am able to view the pane. I created a JS function that will "click" the tab and display the pane when I click the "Forgot your password?" link.
I do not want the tab to be displayed. So I want to view the pane only when clicking the "Forgot your password?" link. I think I can achieve this by hiding the tab but the logic still exists. I believe I can also achieve this without using the tab, however I am not sure how to do this.
JSFIDDLE:
http://jsfiddle.net/essnm8bd/1/
JS:
$(document).ready(function() {
var join_btn = document.getElementById("join-btn"),
signin_btn = document.getElementById("signin-btn"),
reset_password_link = document.getElementsByClassName("reset-password-link")[0];
join_btn.addEventListener("click", joinSelected);
signin_btn.addEventListener("click", signInSelected);
reset_password_link.addEventListener("click", resetPasswordSelected);
function joinSelected() {
$('[href="#signup-pane"]').trigger('click');
}
function signInSelected() {
$('[href="#signin-pane"]').trigger('click');
}
function resetPasswordSelected() {
$('[href="#reset-password-pane"]').trigger('click');
}
});
HTML:
<nav class="navbar nav-default navbar-fixed-top">
<div class="container">
<ul class="navbar-left">
<li><a>LOGO</a></li>
</ul>
<ul class="logged-out-nav nav navbar-nav navbar-right">
<li><a id="join-btn" data-toggle="modal" data-target="#modal" class="btn">Join Spark</a></li>
<li><a id="signin-btn" data-toggle="modal" data-target="#modal" class="btn">Sign in</a></li>
</ul>
</div>
</nav>
<!-- Modal -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<!-- tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="signin-tab">Sign in</li>
<li role="presentation" id="new-account-tab">New Account</li>
<li role="presentation" id="reset-password-tab">test</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in" id="signup-pane">
<form class="signup-form" method="post">
{% csrf_token %}
<input id="signup-firstname" type="text" placeholder="First Name">
<input id="signup-lastname" type="text" placeholder="Last Name">
<input id="signup-email" type="email" placeholder="Email">
<input id="signup-password" placeholder="Password">
<input id="signup-confirm-password" placeholder="Confirm Password">
</form>
</div>
<div role="tabpanel" class="tab-pane fade in" id="signin-pane">
<form class="signin-form" method="post">
{% csrf_token %}
<input id="signin-email" type="email" placeholder="Email">
<input id="signin-password" type="password" placeholder="Password">
</form>
<p>
<a href="#reset-password-pane" class="reset-password-link">
Forgot your password?
</a>
</p>
</div>
<div role="tabpanel" class="tab-pane fade in" id="reset-password-pane">
<input id="forgot-email" type="email" placeholder="Email">
</div>
</div>
</div>
</div>
</div>
</div>

You can show/hide the tab using bootstrap X.bs.tab events:
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
$("#reset-password-pane, #reset-password-tab").show();
}).not('#reset-password-tab a[data-toggle="tab"]').on('show.bs.tab', function (e) {
$("#reset-password-pane, #reset-password-tab").hide();
});
JSFiddle
Or you can wrap your form into a div, make another form inside another div and toggle these divs on click:
<div role="tabpanel" class="tab-pane fade in" id="signin-pane">
<div class="login-tab-container">
<form>
... login fields ...
</form>
</div>
<div class="login-tab-container" style="display:none;">
<form>
... reset password field ...
</form>
</div>
<p>
Forgot your password?
</p>
</div>
Script:
$(".reset-password-link").click( function() {
$('.login-tab-container').slideToggle(200);
$.trim($(this).text()) === 'Close' ? $(this).text('Forgot your password?') : $(this).text('Close')
});
JSFiddle

Categories

Resources