I am making a form which will have 3 inputs (firstname , lastname and email). There should be an option to add additional groups of inputs.
The 3 fields and button should be a single line and properly arranged. However, they are appearing one below another. not sure where's the mistake.
This is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Customer Query</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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
//group add limit
var maxGroup = 5;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
</script>
</head>
<body>
<form method="post" action="submit.php" style="widows: 500px; margin:auto">
<div class="form-group fieldGroup">
<div class="input-group">
<input type="text" name="FirstName[]" class="form-control" placeholder="Enter First Name" size="10"/>
<input type="text" name="LastName[]" class="form-control" placeholder="Enter Last Name" size="10"/>
<input type="text" name="Email[]" class="form-control" placeholder="Enter Email" size="10"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />
</form>
<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<input type="text" name="FirstName[]" class="form-control" placeholder="Enter First Name" size="10"/>
<input type="text" name="LastName[]" class="form-control" placeholder="Enter Last Name" size="10"/>
<input type="text" name="Email[]" class="form-control" placeholder="Enter Email" size="10"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
</div>
</div>
</body>
</html>
any help would be great
I was able to fix the problem. sharing the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>L</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
//group add limit
var maxGroup = 5;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
</script>
<style>
form {
padding: 40px 40px 30px !important;
background: #ebeff2;
}
.mt32 {
margin-top: 32px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="mt32"> Customer Query</h2>
<form class="form-inline mt32" action="#">
<div class="form-group fieldGroup">
<div class="input-group">
<label for="FirstName">FirstName</label>
<input type="text" class="form-control" id="FirstName"
placeholder="FirstName">
<label for="LastName">LastName</label>
<input type="text" class="form-control" id="LastName"
placeholder="LastName">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Your email">
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-success addMore"><span
class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
</div>
<br/>
<br/>
</div>
</div>
</form>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<label for="FirstName">FirstName</label>
<input type="text" class="form-control" id="FirstName"
placeholder="FirstName">
<label for="LastName">LastName</label>
<input type="text" class="form-control" id="LastName"
placeholder="LastName">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Your email">
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
<br/>
<br/>
</div>
</div>
</div>
</body>
</html>
It can be done using form-inline.
Refer bootstrap link : https://getbootstrap.com/docs/4.0/components/forms/
Related
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>
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>
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>
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();});
I'm trying to make a simple controll with jquery that should show an alert onclick if username and password are not empty.
Actually i've tryed the following code for jquery but it has no effect, no any response in console, nothing.
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />
<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#loginbtn').click(function() {
if (!$('#username').val() && !$('#password').val()) {
alert("VAI!");
}
});
</script>
EDIT:
here is full code of the page, in codebehind there is nothing, seems that the javascript just dies when executing the function click.
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="auth.aspx.vb" Inherits="servizigab.auth" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="icon" type="image/png" href="assets/img/favicon.ico" />
<title>Gab Servizi: Login</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link href="/assets/css/bootstrap.min.css" type="text/css" runat="server" rel="stylesheet" />
<link href="/assets/css/modalstyle.css" type="text/css" runat="server" rel="stylesheet" />
<link href="/assets/css/login.css" type="text/css" runat="server" rel="stylesheet" />
</head>
<body class="text-center fade-in">
<form class="form-signin" runat="server">
<img class="mb-2" draggable="false" src="assets/img/gabservizi.png" alt="" width="160" height="160" />
<h1 class="h3 mb-3 font-weight-normal" translate="yes">Accedi a Gab Servizi!</h1>
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />
<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login"/>
<p class="text-muted mt-2 mb-3">Non hai un profilo? Richiedilo!</p>
<div class="myAlert-bottom alert alert-danger">
×
<strong>Password o nome utente errati!</strong> Riprovare!
</div>
<iframe id="log" class="d-none"/>
</form>
<!-- librerie js -->
<script src="/assets/js/core/jquery.3.2.1.min.js"></script>
<script src="/assets/js/core/popper.min.js"></script>
<script src="/assets/js/core/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#loginbtn').click(function() {
if ($('#username').val() && $('#password').val()) {
alert("VAI!");
}
});
</script>
</body>
</html>
Problem 1 Your logic is backwards
! means not.
So you are testing if they are both empty (i.e. There is not a value for username and there is not a value for password) and not that they both have values.
Remove the !s.
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />
<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#loginbtn').click(function() {
if ($('#username').val() && $('#password').val()) {
alert("VAI!");
}
});
</script>
Problem 2: Your HTML is invalid
Use a validator. It will tell you that your <iframe> is missing its end tag. This puts all the content that follows it (including the script) inside the iframe so the script is treated as alternative content for browsers that don't support iframes and is not executed.
Use strings length property:
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />
<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#loginbtn').click(function() {
//check if both the username and password values have
// lengths grater then zero
if ($('#username').val().length > 0 && $('#password').val().length > 0) {
alert("VAI!");
}
});
</script>
Or just delete the ! (not) sign from your own code.
It is a good idea to bind your events in $(document).ready if you have lots of other javascript code on page. your code works perfectly if there is no other javascript code.
Just bind click event in $(document).ready as shown below
$(document).ready(function() {
$('#loginbtn').click(function() {
if ($('#username').val() && $('#password').val()) {
alert("VAI!");
}
});
})
<label for="username" class="sr-only">Username</label>
<input type="text" id="username" runat="server" class="form-control" placeholder="Username..." autofocus="autofocus" />
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="password" runat="server" class="form-control" placeholder="Password..." />
<input type="button" id="loginbtn" class="btn btn-primary btn-fill btn-block mb-3" value="Login" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
it will work.
if ($('#username').val() && $('#password').val()) {