I have used bootstrap form but submit button is not getting aligned below Name and Number field in form. I tried to use various css styles but could not align it. See screenshot submit button is not aligned properly.
In app.js:
function editContact(id) {
document.getElementById("search").style.display = 'none';
document.getElementById("contactlist").style.display = 'none';
document.getElementById("editcontact").style.display = '';
document.getElementById("editcontact").innerHTML =
`
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
`;
}
In index.css:
.form-group{
padding-left: 30px;
padding-right: 30px;
}
.form .btn-primary{
padding-left: 30px;
}
I also tried to wrap submit button inside div tag but still no effect.
form .btn-primary{
margin-left: 30px;
}
not .form this should also be margin otherwise the text would be shifted 30 pixels but the button remain in the same place
Instead of adding padding to .form-group and .btn what you can do is add padding to the form itself, just add a class to the form and add css against it.
Working example -
function editContact(id) {
document.getElementById("editcontact").innerHTML =
`
<form class="form">
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
`;
}
editContact(1);
.form{
padding: 0 30px;
}
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="editcontact">
</div>
</body>
</html>
Notice, I added .form class, and adding to it.
Here is a plunker of the above snippet https://plnkr.co/edit/R2ku3opNtn3KsBDYKYr3?p=preview
wrap button inside form-group div (new ) P.S try this snippet in expanded snippet view
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<form>
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" class="form-control" id="inputName" aria-describedby="namehelp" placeholder="Enter Name ">
</div>
<div class="form-group">
<label for="InputNumber">Number</label>
<input type="text" class="form-control" id="inputNumber" placeholder="Enter Number">
</div>
<div class="form-group">
<label for="InputGroup">Group</label>
<input type="text" class="form-control" id="inputGroup" placeholder="Enter Group">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Related
Team,
I am trying to redirect after success form validation. If it is not success it has to be there in same page if it is success it has to redirect other page
I have added below line after was class validated code
$(location).attr('href', 'data.html');
it is redirecting to next page but I am not seeing any error message I am missing some valdiation.
Here is my entire code.
$(function () {
'use strict'
$('#data_input').on('submit', function (event) {
if (!event.target.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
$(this).addClass('was-validated')
$(location).attr('href', 'data.html');
return true;
});
$("#resetbtn").on("click", function (event) {
event.preventDefault();
$('#data_input')
.trigger("reset")
.removeClass('was-validated')
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.4/css/fontawesome.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<form class="requires-validation" id="data_input" method="post" novalidate>
<div class="form-group row">
<div class="col">
<label> Name</label> <input type="text" class="form-control" name="projectName" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="col">
<label>Code</label> <input type="text" class="form-control" name="projectCode" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
</div>
<div class="form-group row">
<div class="col">
<label>Number</label> <input class="form-control" type="text" name="sprintNumber" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
</div>
<div class="form-group row">
<div class="col"> <label>Start Date:</label> <input type="text" class="form-control has-feedback-left" id="fromdate" placeholder="Please Enter Start Date" name="fromdate" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="col"> <label>End Date:</label> <input type="text" class="form-control has-feedback-left" id="todate" placeholder="Please Enter End Date" name="todate" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
</div>
<!--<div class="form-group row">
<div class="col">
<label>Total Days</label> <input type="text" class="form-control has-feedback-left"
name="numberdays" id="numberdays" disabled>
</div>
</div>-->
<br />
<button id="submit" type="submit" class="btn btn-primary">Next</button>
<button id="resetbtn" type="button" class="btn btn-secondary">Clear</button>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
Please let me know what I am doing wrong here
in your event submit. You use a validation if statement (checkvalidity).
$('#data_input').on('submit', function (event) {
**if (!event.target.checkValidity()) {**
event.preventDefault()
event.stopPropagation()
}
$(this).addClass('was-validated')
**$(location).attr('href', 'data.html');**
return true; ...
but whether it is valid or not you still perform the location redirect afterwards.
the redirect should be placed in a if instead you will always be redirected before any validation.
How it will work? I want to know how javascript connect with html and div tag is correct. I didn't get which code is doing mistake.
<script type="text/javascript">
function validate()
{
if (document.myForm.name.value="") {
alert("should be fill");
document.myForm.name.focus();
return false;
}
return(true);
}
</script>
.container{background-color:gray;
width:550px;
height:650px;
align-content:center;
background: rgba(255, 255, 255, 0.1);}
h1{text-align:center;
color:darkslategray;
text-decoration-line:underline;}
input{width:100%}
#button{text-align:right;}
body {background-image:url("bg1.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css\custom.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<title>
login form
</title>
</head>
<body>
<div class="container">
<form method="post" name="myForm" onsubmit="return(validate());" data-toggle="validator">
<div class="form-group">
<h1><b><u>
Create an account
</u>
</h1>
<div class="row">
<div class="col-md-6">
First Name:
<input type="text" name="name" id="" value="" placeholder="First Name">
<span id="fnameerror" class="text-danger">
</span>
</div>
<div class="col-md-6">
Last Name:
<input type="text" name="lastname" id="lastname" placeholder="Last Name" >
<span id="lnameerror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
Company Name:
<input type="text" name="companyname" id="" placeholder="Company Name">
<span id="" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
Street address:
<input type="text" name="streetaddress" id="address" placeholder="Street address">
<span id="adderror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
Town/City:
<input type="text" name="city" id="city" placeholder="Town/City">
<span id="cityerror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
State/Country:
<input type="text" name="state" id="state" placeholder="State/Country">
<span id="stateerror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
Postcode/Zip:
<input type="text" name="zip" id="zip" placeholder="Postcode/Zip">
<span id="ziperror" class="text-danger">
</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
Phone:
<input type="text" name="Phone" id="phone" placeholder="Phone">
<span id="pherror" class="text-danger">
</span>
</div>
<div class="col-md-6">
Email:
<input type="emaill" name="Email" id="email" placeholder="Email">
<span id="emailerror" class="text-danger">
</span>
</div>
</div>
<div class="row">
<div class="col-md-1">
<input type="checkbox" name="checkbox" id="box" placeholder="">
<span id="boxerror" class="text-danger">
</span>
</div>
<div class="col-md-11">
Create an account
</div>
</div>
<div class="row" id="button">
<div class="col-md-12">
<button type="submit" value="submit">
<b>SignUp</b>
</button>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
you are using assignment operator in if (document.myForm.name.value = "")
Try with this code
function validate() {
if (document.forms["myForm"]["name"].value == "") {
alert("should be fill");
document.myForm.name.focus();
return false;
}
return (true);
}
You have missed equals to == in your comparison. For comparison is should be == double equals. Change it and it should work.
if (document.myForm.name.value == "") {
...
}
It seems that you haven't added the js file in the html file. Add the js file just above ending the body tag.
<script type="text/javascript" src="location to the file"><script>
Moreover in update the js code with:
function validate(e) {
e.preventDefault();
console.log(document.myForm.name.value);
if (document.myForm.name.value == "") {
alert("should be fill");
document.myForm.name.focus();
}
}
You also need to modify the form element.
<form method="post" name="myForm" onsubmit="validate(event);" data-toggle="validator">
This is my html file where I'm trying to use the autocomplete function where I want to use the data which I get from MySQL query which is first_name and last_name. I'm passing this data using flask but I'm unable to use it for autocomplete function.
Data format:
first_name: [["Steven"], ["Stephany"], ["Sonia"], ["Sambit"], ["Chowta"]]
<html>
<head>
<title>Autocomplete</title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-darkness/jquery-ui.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<style>
.fixed-height {
padding: 1px;
max-height: 200px;
overflow: auto;
}
</style>
</head>
<link rel="stylesheet" href="/static/style.css" type="text/css">
<form action="/login" method="POST">
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Search</h1>
</div>
<div class="login-form">
<div class="control-group">
<input id="firstname" type="text" class="login-field" value="" placeholder="FirstName" name="First Name">
<label class="login-field-icon fui-user" for="login-name"></label>
</div>
<div class="control-group">
<input id="lastname" type="text" class="login-field" value="" placeholder="LastName" name="Last Name">
<label class="login-field-icon fui-lock" for="login-pass"></label>
</div>
<input type="submit" value="Search" class="btn btn-primary btn-large btn-block" >
<br>
<script>
var first = {{ first|tojson }}
var last = {{ last|tojson }}
console.log(first)
$(function() {
$("#firstname").autocomplete({
source: first
});
$("#lastname").autocomplete({
source: last
}).autocomplete("widget").addClass("fixed-height");
});
</script>
</div>
</div>
</div>
</form>
</html>
The data format of your:
first_name: [["Steven"], ["Stephany"], ["Sonia"], ["Sambit"], ["Chowta"]]
is wrong. For details see option source.
If you cannot change the array on your server you can always flatten it on the client:
[].concat.apply([], first)
var first = [["Steven"], ["Stephany"], ["Sonia"], ["Sambit"], ["Chowta"]];
$(function() {
$("#firstname").autocomplete({
source: [].concat.apply([], first)
});
$("#lastname").autocomplete({
source: [].concat.apply([], first)
}).autocomplete("widget").addClass("fixed-height");
});
.fixed-height {
padding: 1px;
max-height: 200px;
overflow: auto;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<form action="/login" method="POST">
<div class="login">
<div class="login-screen">
<div class="app-title">
<h1>Search</h1>
</div>
<div class="login-form">
<div class="control-group">
<input id="firstname" type="text" class="login-field" value="" placeholder="FirstName" name="First Name">
<label class="login-field-icon fui-user" for="firstname"></label>
</div>
<div class="control-group">
<input id="lastname" type="text" class="login-field" value="" placeholder="LastName" name="Last Name">
<label class="login-field-icon fui-lock" for="lastname"></label>
</div>
<input type="submit" value="Search" class="btn btn-primary btn-large btn-block" >
<br>
</div>
</div>
</div>
</form>
I am working on a Registration Form. I have applied Jquery with the help of ID of the element. When I click the submit button I also got glyphicon-ok at submit button, whick i dont want to happen. Simply copy the code and past it in html file on your PC....
<html>
<head>
<title>Form Validation</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
function validateText(id)
{
if($("#"+id).val()==null || $("#"+id).val()=="")
{
var div = $("#"+id).closest("div");
div.removeClass("has-success");
$("#glypcn"+id).remove();
div.addClass("has-error has-feedback");
div.append('<span id="glypcn'+id+'" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>')
return false;
}
else
{
var div = $("#"+id).closest("div");
div.removeClass("has-error");
div.addClass("has-feedback has-success");
$("#glypcn"+id).remove();
div.append('<span id="glypcn'+id+'" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>')
return true;
}
}
$(document).ready(function ()
{
$("#btn1").click(function ()
{
validateText("firstname");
validateText("lastname");
validateText("username");
validateText("password");
validateText("cpassword");
validateText("date");
validateText("male");
validateText("female");
$("register-form").submit();
});
}
);
</script>
<!-- Latest compiled and minified CSS -->
<script src="static/jquery-3.1.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!--<script src="C:/Users/DA_YALS/Desktop/fv/static/combodate.js" type="text/javascript"></script>-->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6" style="height:auto; border:solid black;">
<form method="post" role="form" id="register-form" autocomplete="off">
<div class="form-group">
<label for="firstname">First Name:</label>
<input class="form-control" id="firstname" placeholder="First Name" type="text" required="required">
</div>
<div class="form-group">
<label for="lastname">Last Name:</label>
<input class="form-control" id="lastname" placeholder="Last Name" type="text" name="lastname" required="required" >
</div>
<div class="form-group">
<label for="username">Username:</label>
<input class="form-control" placeholder="Username" type="text" id="username" name="username" required="required">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input class="form-control" placeholder="Password" type="password" id="password" name="password" required="required">
</div>
<div class="form-group">
<label for="cpassword">Confirm Password:</label>
<input class="form-control" placeholder="Password" type="password" id="cpassword" name="cpassword" required="required">
</div>
<div class="form-group">
<label for="date" id="text">Date of Birth:</label>
<input class="form-control" type="text" id="date" name="date" data-format="DD-MM-YYYY" data-template="D MMM YYYY" name="date" value="09-01-2013" required="required">
</div>
<div class="form-group" style="border: solid;">
<label id="gender">Gender:</label>
<label class="radio-inline"><input id="male" type="radio" name="Male" checked>Male</label>
<label class="radio-inline"><input id="female" type="radio" name="Female">Female</label>
</div>
<div class="form-group" >
<button class="btn btn-success" id="btn1" type="submit">Submit</button>
</div>
</form>
</div>
<div class="col-lg-3">
</div>
</div>
</div>
</body>
</html>
The icon is not applied on the submit buttons but on the radios.
So you have to modify your validateText function to not add the icon on radio buttons:
function validateText(id)
{
if($("#"+id).val()==null || $("#"+id).val()=="")
{
var div = $("#"+id).closest("div");
div.removeClass("has-success");
$("#glypcn"+id).remove();
div.addClass("has-error has-feedback");
if (!($("#"+id).is(':checkbox') || $("#"+id).is(':radio'))) {
div.append('<span id="glypcn'+id+'" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>');
}
return false;
}
else
{
var div = $("#"+id).closest("div");
div.removeClass("has-error");
div.addClass("has-feedback has-success");
$("#glypcn"+id).remove();
if (!($("#"+id).is(':checkbox') || $("#"+id).is(':radio'))) {
div.append('<span id="glypcn'+id+'" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>');
}
return true;
}
}
I have two includes in the HTML view listed below. I wait for the view to load before manipulating some elements but it fails because the includes have not yet finished loading. I check the existence of the elements using the console while debugging. In my controller:
wtApp.controller('createAccountController', function ($scope) {
resetNavbar();
$("a[href$='create-account']").css({ color: navbarSelectedColor });
$scope.$on('$viewContentLoaded', function () {
getCountries();
setupAccountsForm();
var form = $("#form-accounts");
if (form.length) {
form.get(0).reset();
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Writer's Tryst</title>
<link href='css/accounts.css' rel='stylesheet' type='text/css' />
</head>
<body data-ng-app="">
<div>
<form id="form-accounts" class="form-horizontal well center-form-small">
<h1>Create Account</h1>
<div class="capatcha">
<div id="recaptcha-elements" style="display: inline-block" data-sitekey=""></div>
</div>
<div id="oauth-login" class="form-group row text-center">
<p>
<button id="facebook-login" class="btn btn-custom-primary" formnovalidate>Login with Facebook</button>
<button id="google-login" class="btn btn-custom-primary" formnovalidate>Login with Google</button><br/>
</p>
<p class="text-center">
<button class="btn btn-custom-success" formnovalidate>- OR ENTER -</button>
</p>
</div>
<div id="passwords">
<div class="form-group row">
<label for="pwd" class="col-sm-2 form-control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" required id="pwd" name="pwd" placeholder="Password - 6 characters minimum (will be encrypted)" />
<button id="show-pwd" class="btn btn-custom-primary" formnovalidate tabindex="-1">show</button>
</div>
</div>
<div class="form-group row">
<label for="confirm-pwd" class="col-sm-2 form-control-label">Confirm Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" required id="confirm-pwd" placeholder="Confirm password" />
<button id="show-confirm-pwd" class="btn btn-custom-primary" tabindex="-1">show</button>
</div>
</div>
</div>
<div data-ng-include="'pages/snippets/work-type.html'"></div>
<div data-ng-include="'pages/snippets/account-info.html'"></div>
<button type="submit" id="submit" class="btn btn-custom-warrning btn-block">Send Verification Email</button>
<input type="hidden" id="subject" name="subject" />
<input type="hidden" id="msg" name="msg" />
<input type="hidden" id="userid" name="userid"/>
</form>
<form id="form-verify" class="form-horizontal well center-form-small">
<div id="verify">
<div class="form-group">
<input id="ver-email-msg" name="ver-email-msg" readonly="true" />
</div>
<div class="form-group center-div">
<label for="ver-code">Verification Code</label>
<input id="ver-code" name="ver-code" required autofocus="true" placeholder="Paste verification code" />
</div>
<div class="form-group">
<input id="code" name="code" type="hidden" />
<button id="but-register" name="but-register" class="btn btn-custom-success btn-block">Create Account</button>
</div>
</div>
<input id="account-id" name="account-id" type="hidden" />
</form>
</div>
<script src="js/recaptcha.js"></script>
<script src="js/accounts.js"></script>
</body>
</html>
Try using,
$rootScope.$on('$includeContentLoaded',function(event,url){
if (url == 'YourDesiredPath') {
// do something
}
});
From angular docs:
Emitted every time the ngInclude content is requested.