Enable tabs one after the other on form submission - javascript

There are 4 tabs and in that 4 tabs there are 4 forms, I want to write a jQuery program such that if I submit Form1 in tab1 then the tab2 containing form should be enabled and when I submit form2, tab3 containing form 3 should be enabled that goes on until I reach form4.
I wrote the code but it is enabling all tabs instead of next one.
I am a beginner in jQuery, please comment below for any query.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" id="myLinks">
<li class="active"><a data-toggle="tab" href="#home">Tab1</a></li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
<div class="tab-content" id="myTabs">
<div id="home" class="tab-pane fade in active">
<h1>Form 1</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div id="menu1" class="tab-pane fade">
<h1>Form 2</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div id="menu2" class="tab-pane fade">
<h1>Form 3</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div id="menu3" class="tab-pane fade">
<h1>Form 4</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#myTabs form").on('submit',function() {
$('#myLinks li a').each(function(){
$(this).attr('data-toggle','tab');
});
});
</script>
</body>
</html>

Working fiddle.
You could check on submit if the current active tab is the last or not, if not move to the next tab using the .next() and .tab('show'):
$('.nav-tabs li.active').next('li').find('a').attr('data-toggle','tab').tab('show');
I think that what you looking for :
$("#myTabs form").on('submit',function(e) {
e.preventDefault();
var li_count = $('.nav-tabs li').length;
var current_active = $('.nav-tabs li.active').index();
if(current_active<li_count){
$('.nav-tabs li.active').next('li').find('a').attr('data-toggle','tab').tab('show');
}else{
alert('Last Step');
}
});
Hope this helps.

Here is another solution: Working fiddle
When you submit the form,you need to show next tab. For that, you should to identify current li ,then, set data-toggle="tab" for next li.
$("#myTabs form").on('submit',function(e) {
e.preventDefault();
var linkHref=$(this).parents('.tab-pane').attr('id');
$('#myLinks li')
.find('a[href="#'+linkHref+'"]')
.parent()
.next()
.find('a').tab('show')
.attr('data-toggle','tab');
});

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" id="myLinks">
<li class="active"><a data-toggle="tab" href="#home">Tab1</a></li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
<div class="tab-content" id="myTabs">
<div id="home" class="tab-pane fade in active">
<h1>Form 1</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div id="menu1" class="tab-pane fade">
<h1>Form 2</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div id="menu2" class="tab-pane fade">
<h1>Form 3</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div id="menu3" class="tab-pane fade">
<h1>Form 4</h1>
<form>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$("#myTabs form").on('submit',function() {
$('#myLinks li a').each(function(){
$(this).attr('data-toggle','tab');
});
});
</script>
</body>
</html>

Related

I create a login page..But when i clicked on that login button..Login page isn't showing ..I am not able to understand why?

I wrote a html code for login page and when I clicked on login button it is not showing any login page. I am very much confused
document.querySelector("#show-login").addEventListner("click", function() {
document.querySelector("popup").classList.add("active")
});
document.querySelector(".popup.close-btn").addEventListner("click", function() {
document.querySelector("popup").classList.remove("active")
});
<div class="center">
<button id="show-login">Login</button>
</div>
<div class="popup">
<div class="close-btn">×</div>
<div class="form">
<h2>Log in</h2>
<div class="form-element">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
</div>
<div class="form-element">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password">
</div>
<div class="form-element">
<input type="checkbox" id="remember-me">
<label for="remember-me">Remember me</label>
</div>
<div class="form-element">
<button>Sign in </button>
</div>
<div class="form-element">
Forgot password?
</div>
</div>
you can try this logic :
document
.querySelector("#show-login")
.addEventListener("click", function () {
document.querySelector(".popup").classList.add("active");
});
document
.querySelector(".popup .close-btn")
.addEventListener("click", function () {
document.querySelector(".popup").classList.remove("active");
});
.popup {
display: none;
}
.popup.active {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="center">
<button id="show-login">Login</button>
</div>
<div class="popup">
<div class="close-btn">×</div>
<div class="form">
<h2>Log in</h2>
<div class="form-element">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email" />
</div>
<div class="form-element">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Enter password" />
</div>
<div class="form-element">
<input type="checkbox" id="remember-me" />
<label for="remember_me">Remember me</label>
</div>
<div class="form-element">
<button>Sign in</button>
</div>
<div class="form-element">
Forgot password?
</div>
</div>
</div>
</body>
</html>

X out and other button doesn't work in pop up

so im trying to create a popup to input email and name for a subscription but the button to open the popup and close the popup don't work. The first subscription button should open the popup and there is an x that should close the popup could anyone try to debug it?
my code:
<div class="center">
<button id="show-login">Subscribe</button>
</div>
<div class="popup">
<div class="close-btn">×</div>
<div class="form">
<h2>Subscribe for more quizzes!</h2>
<div class="form-element">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
</div>
<div class="form-element">
<label for="password">Name</label>
<input type="password" id="password" placeholder="Enter name">
</div>
<div class="form-element">
<input type="checkbox" id="remember-me">
<label for="remember-me">Click for email notifications!</label>
</div>
<div class="form-element">
<button>Subscribe</button>
</div>
</div>
</div>
js.:
document.querySelector("#show-login").addEventListener("click", function(){
document.querySelector(".popup").classList.add("active");
});
document.querySelector(".popup .close-btn").addEventListener("click", function(){
document.querySelector(".popup").classList.remove("active");
});
I hope the below answer is suitable for you.
i am just add css like below
document.querySelector("#show-login").addEventListener("click", function(){
document.querySelector(".popup").classList.add("active");
});
document.querySelector(".popup .close-btn").addEventListener("click", function(){
document.querySelector(".popup").classList.remove("active");
});
.popup{
display:none;
}
.active{
display:block;
}
<div class="center">
<button id="show-login">Subscribe</button>
</div>
<div class="popup">
<div class="close-btn">×</div>
<div class="form">
<h2>Subscribe for more quizzes!</h2>
<div class="form-element">
<label for="email">Email</label>
<input type="text" id="email" placeholder="Enter email">
</div>
<div class="form-element">
<label for="password">Name</label>
<input type="password" id="password" placeholder="Enter name">
</div>
<div class="form-element">
<input type="checkbox" id="remember-me">
<label for="remember-me">Click for email notifications!</label>
</div>
<div class="form-element">
<button>Subscribe</button>
</div>
</div>
</div>
Thank you...!

Adding a search field in html form

I have a basic Html form . I am trying to build a search bar that would highlight a label which matches that content . Here is my JSFiddle Link. The search is not perfect. For eg when trying to search keyword First it highlights all the labels that starts with F.
$("#searchbox").keydown(function() {
var content = $('#searchbox').val();
if(content!== ""){
if ($("label:contains('"+content+"')"))
{
$("label:contains('"+content+"')").addClass("highlight");
} else {
$("label:contains('"+content+"')").removeClass("highlight");
}
}
else{
$("label:contains('"+content+"')").removeClass("highlight");
}
});
.highlight{
border: red;
background-color: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<br/>
<input id="searchbox" placeholder="Enter your search term">
<h2>Vertical (basic) form</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<div class="form-group"><label for="first">First</label><input type="text"></div>
<div class="form-group"><label for="second">Second</label><input type="text"></div>
<div class="form-group"><label for="third">Third</label><input type="text"></div>
<div class="form-group"><label for="fourth">Fourth</label><input type="text"></div>
<div class="form-group"><label for="fifth">Fifth</label><input type="text"></div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
I am new to JQuery and I know this is not a clean code. This is what I tried by referring other examples.
You could iterate through label elements on keyup and check if the text includes the value of the search field and based on that add or remove a class.
$("#searchbox").keyup(function() {
const content = $('#searchbox').val().toLowerCase();
const labels = $('label');
labels.each(function() {
const check = $(this).text().toLowerCase().includes(content)
if (content.length && check) $(this).addClass('highlight')
else $(this).removeClass('highlight')
})
});
.highlight {
border: red;
background-color: yellow;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="container">
<br />
<input id="searchbox" placeholder="Enter your search term">
<h2>Vertical (basic) form</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> Remember me</label>
</div>
<div class="form-group"><label for="first">First</label><input type="text"></div>
<div class="form-group"><label for="second">Second</label><input type="text"></div>
<div class="form-group"><label for="third">Third</label><input type="text"></div>
<div class="form-group"><label for="fourth">Fourth</label><input type="text"></div>
<div class="form-group"><label for="fifth">Fifth</label><input type="text"></div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

Boostrap validator: why space-only values do not show errors?

I'm using bootstrap validator for the form validation.
If the value of input are just spaces it doesn't show errors even though input is required.
E.g name field in example gets validating when hitting space couple of times, twitter has a pattern so doesn't allow space-only values).
http://jsbin.com/roxasen/1/edit?html,js,output
it is working fine.
You have just forgotten to include bootstrap
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<form data-toggle="validator" role="form">
<div class="form-group">
<label for="inputName" class="control-label">Name</label>
<input type="text" class="form-control" id="inputName" pattern="^[a-zA-Z]+(([',. -][a-zA-Z ])?[a-zA-Z]*)*$" placeholder="Cina Saffary" required>
</div>
<div class="form-group has-feedback">
<label for="inputTwitter" class="control-label">Twitter</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" pattern="^[_A-z0-9]{1,}$" maxlength="15" class="form-control" id="inputTwitter" placeholder="1000hz" required>
</div>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
<div class="help-block with-errors">Hey look, this one has feedback icons!</div>
</div>
<div class="form-group">
<label for="inputEmail" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="inputPassword" class="control-label">Password</label>
<div class="form-inline row">
<div class="form-group col-sm-6">
<input type="password" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
<div class="help-block">Minimum of 6 characters</div>
</div>
<div class="form-group col-sm-6">
<input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Boxers
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="underwear" required>
Briefs
</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" id="terms" data-error="Before you wreck yourself" required>
Check yourself
</label>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.js"></script>
</body>
</html>

Focus going out of the popup page to the parent page

I have a popup page loading on signin button click. The problem is when I keep pressing tabs, the focus is going out to the parent page. I want the focus to keep looping on the popup on tab press until it is closed
http://jsfiddle.net/2EXL5/
HTML Code
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Css/bootstrap.min.css" rel="stylesheet" />
<link href="Css/bootstrap.css" rel="stylesheet" />
<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/jquery.bpopup.min.js"></script>
<link href="Css/style.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<div class="row header">
<div class="col-md-6 col-md-offset-3">
<div class="row">
<div class="col-md-4">
<img src="Css/Images/Logo.png" />
</div>
<div class="col-md-8 quickbuttons">
<button type="button" class="btn btn-link" tabindex="1" id="btnSignin"><span class="glyphicon glyphicon-user"></span> Sign in</button>
<button type="button" class="btn btn-link" tabindex="2"><span class="glyphicon glyphicon-info-sign"></span> Help</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3 style="margin-top:50px;">Signup</h3>
<form class="form">
<div class="form-group">
<label class="sr-only" for="txtFirstName">First Name</label>
<input type="text" name="First Name" value="" id="txtFirstName" class="form-control" placeholder="First Name" required="" tabindex="3" />
</div>
<div class="form-group">
<label class="sr-only" for="txtLastName">Last Name</label>
<input type="text" name="Last Name" value="" id="txtLastName" class="form-control" placeholder="Last Name" required="" tabindex="4" />
</div>
<div class="form-group">
<label class="sr-only" for="txtEmailId">Email Id</label>
<input type="email" name="Email ID" value="" id="txtEmailId" class="form-control" placeholder="example#yahoo.com" required="" tabindex="5" />
</div>
<div class="form-group">
<label class="sr-only" for="txtPassword">Password</label>
<input type="password" name="Password" value="" id="txtPassword" class="form-control" placeholder="Password" required="" tabindex="6" />
</div>
<button class="btn btn-primary pull-right" tabindex="7" id="btnSingUp"><span class="glyphicon glyphicon-plus"></span> Sign Up</button>
</form>
</div>
</div>
<div id="element_to_pop_up">
<a class="b-close">
X
<br />
</a>
<h3>Login</h3>
<form class="form">
<div class="form-group">
<label class="sr-only" for="txtLoginEmailId">Email Id</label>
<input type="email" name="Email ID" value="" id="txtLoginEmailId" class="form-control" placeholder="example#yahoo.com" required="" tabindex="1" />
</div>
<div class="form-group">
<label class="sr-only" for="txtLoginPassword">Password</label>
<input type="password" name="Password" value="" id="txtLoginPassword" class="form-control" placeholder="Password" required="" tabindex="2" />
</div>
<button class="btn btn-primary pull-right" tabindex="3"><span class="glyphicon glyphicon-off"></span> Sign In</button>
</form>
</div>
</div>
<script>
$("#btnSignin").click(function () {
$('#element_to_pop_up').bPopup();
});
</script>
</body>
</html>
You can capture the focusOut event of the last focusable item in the popup and when that happens just send the focus to the first focusable element in your pop-up.
You can see it working in this JSfiddle (needs setting tabindexes right).
I added an ID to the button to find it easily and then just add this to the click function:
$('#signin-button').focusout(function() {$(this).closest('form').find('input').first().focus();});

Categories

Resources