I have a form with a disabled button at first and if you leave an input empty or fill it with anything but numbers it will raise an error and if you insert number the error will be removed. My question is how can I remove disable attribute from the button after all inputs are error free.
Here what I've tried so far:
$("input").blur(function () {
if (!Number($(this).val()) || $(this).val() === "") {
$(this).addClass("raise-error");
} else {
$(this).removeClass("raise-error");
}
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
text-align: center;
overflow-x: hidden;
color: #08085c;
background-color: #111;
}
.container {
width: 80%;
height: 50vh;
background-color: #fff;
margin: auto;
display: flex;
}
.team {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
}
.team-a {
background-color: bisque;
}
.error {
text-align: right;
color: red;
opacity: 0;
}
.raise-error + .error {
opacity: 1;
}
input.raise-error {
border: 1px solid red;
}
.record-box {
margin-top: 20px;
}
label {
margin-right: 10px;
}
.btn {
margin-top: 20px;
padding: 10px 20px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team team-a">
<h2>Team A Records</h2>
<div class="record-box">
<div class="input-field">
<label for="record-1"> Record 1</label>
<input type="text" id="record-1" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-2"> Record 2</label>
<input type="text" id="record-2" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-3"> Record 3</label>
<input type="text" id="record-3" />
<div class="error">number please</div>
</div>
</div>
</div>
<button class="btn" disabled>Submit</button>
You can give the inputs a default attribute like data-valid="false".
When a field is blurred, you can change the attribute's value to true after successfully validating it.
You can then enable the button if all the data-valid="false" are changed to data-valid="true"
Try this
$("input").blur(function() {
if (!Number($(this).val()) || $(this).val() === "") {
$(this).addClass("raise-error");
$(this).attr('data-valid', 'false');
} else {
$(this).removeClass("raise-error");
$(this).attr('data-valid', 'true');
}
$('.btn')[$('[data-valid="false"]').length > 0 ? 'attr' : 'removeAttr']('disabled', 'disabled');
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
text-align: center;
overflow-x: hidden;
color: #08085c;
background-color: #111;
}
.container {
width: 80%;
height: 50vh;
background-color: #fff;
margin: auto;
display: flex;
}
.team {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
}
.team-a {
background-color: bisque;
}
.error {
text-align: right;
color: red;
opacity: 0;
}
.raise-error+.error {
opacity: 1;
}
input.raise-error {
border: 1px solid red;
}
.record-box {
margin-top: 20px;
}
label {
margin-right: 10px;
}
.btn {
margin-top: 20px;
padding: 10px 20px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="some-container">
<div class="team team-a">
<h2>Team A Records</h2>
<div class="record-box">
<div class="input-field">
<label for="record-1"> Record 1</label>
<input type="text" id="record-1" data-valid="false" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-2"> Record 2</label>
<input type="text" id="record-2" data-valid="false" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-3"> Record 3</label>
<input type="text" id="record-3" data-valid="false" />
<div class="error">number please</div>
</div>
</div>
</div>
<button class="btn" disabled>Submit</button>
</div>
The most straight forward way and safest is to reuse your validation function for testing both if the input is valid, and testing if all inputs are valid.
The example below puts the inputs where blur is attached to in the allInputs variable, and the button is disabled if not all inputs are valid (with the every function calling the same isValid functionality)
const allInputs = $("input").blur(function () {
const isValid = val => val !== "" && Number(val);
$(this).toggleClass("raise-error",!isValid(this.value));
$('.btn')[0].disabled = !allInputs.toArray().every(i=>isValid(i.value));
});
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Montserrat", sans-serif;
scroll-behavior: smooth;
text-align: center;
overflow-x: hidden;
color: #08085c;
background-color: #111;
}
.container {
width: 80%;
height: 50vh;
background-color: #fff;
margin: auto;
display: flex;
}
.team {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
justify-content: center;
align-items: center;
}
.team-a {
background-color: bisque;
}
.error {
text-align: right;
color: red;
opacity: 0;
}
.raise-error + .error {
opacity: 1;
}
input.raise-error {
border: 1px solid red;
}
.record-box {
margin-top: 20px;
}
label {
margin-right: 10px;
}
.btn {
margin-top: 20px;
padding: 10px 20px;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="team team-a">
<h2>Team A Records</h2>
<div class="record-box">
<div class="input-field">
<label for="record-1"> Record 1</label>
<input type="text" id="record-1" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-2"> Record 2</label>
<input type="text" id="record-2" />
<div class="error">number please</div>
</div>
<div class="input-field">
<label for="record-3"> Record 3</label>
<input type="text" id="record-3" />
<div class="error">number please</div>
</div>
</div>
</div>
<button class="btn" disabled>Submit</button>
If below code doesn't work:
if ($('.raise-error').length > 0) {
$('.btn').attr( 'disabled', true );
return true;
}
Then please try to change the button tag with:
<input type="button" class="btn">
Related
I created 2 Modals.The first modal, which is class = "modal" appears as it should when add button is clicked, but when I click the "+" sign on the form to display the next Modal which is the class = "category-modal that modal goes back to display none for some reason.
I made a runable code:
//get HTML elements username
let arrow = document.querySelector(".next");
let profSetting = document.querySelector(".prof-settings ul");
let asset = document.querySelector(".nav-side-asset");
//click event for username drop-down
arrow.addEventListener("click", () => {
arrow.classList.toggle('rotate-90');
profSetting.classList.toggle('transform');
asset.classList.toggle('position');
modal.classList.toggle('modal-position');
});
//get HTML elements assets
let arrowAsset = document.querySelector(".next-asset");
let assets = document.querySelector(".assets ul");
//click event for asset drop-down
arrowAsset.addEventListener("click", () => {
arrowAsset.classList.toggle('rotate-90');
assets.classList.toggle('transform');
})
//Generate tag ID
//get HTML elements modal
let modal = document.querySelector(".modal");
let addbtn = document.querySelector(".add-button");
let close = document.querySelector(".close");
let background = document.querySelector(".greyback")
//click event for modal pop up
addbtn.addEventListener("click", () => {
modal.style.display = "block";
genID()
background.style.display = "block";
})
//click event for modal remove itself
close.addEventListener("click", () => {
modal.style.display = "none";
})
function genID() {
let minNum = 0;
let maxNum = 1000;
let randomNum = Math.floor(Math.random() * (maxNum + 1) + minNum)
document.querySelector(".id").innerHTML = randomNum;
}
//get modal for category and department
let categoryModal = document.querySelector(".category-modal");
let categoryAdd = document.querySelector(".category-add");
let cancel = document.querySelector(".cancel");
categoryAdd.addEventListener("click", () => {
categoryModal.style.display = "block";
})
body {
margin: 0;
box-sizing: border-box;
font-family: sans-serif;
background-color: var(--light-purplr);
}
:root {
--dark-purple: #3B3F8C;
--light-purplr: #4449A6;
--light-green: #6BBF54;
--darkish-green: #6FA656;
--lighter-white: #F2F2F2;
--light-white: #e9e9e9;
}
.greyback {
background-color: rgb(128, 128, 128, 0.7);
width: 120em;
height: 60.55em;
position: absolute;
display: none;
z-index: 1;
}
.nav-top {
background-color: var(--lighter-white);
display: grid;
grid-template-columns: 15em 70em 0em;
margin-left: -1em;
}
.nav-top ul {
display: flex;
width: 20vw;
margin-top: 1.5em;
}
.nav-top li {
list-style-type: none;
margin-left: 1em;
display: flex;
cursor: pointer;
padding: 8px 8px 8px 8px;
}
.nav-top li:hover {
background-color: var(--light-white);
}
.nav-banner img {
margin-left: 2em;
margin-top: 1em;
width: 14em;
height: 3em;
}
.nav-top ul img {
width: 1em;
height: 1em;
}
.profile {
width: 2em !important;
height: 2em !important;
margin-top: -0.5em;
}
.nav-side,
.nav-side-asset {
background-color: var(--lighter-white);
width: 13em;
height: 2.5em;
}
.nav-side ul,
.nav-side-asset ul {
background-color: var(--lighter-white);
position: absolute;
height: 2.5em;
margin-top: 8px;
width: 10.5em;
}
.nav-side li,
.nav-side-asset li {
list-style-type: none;
margin-top: 10px;
margin-left: 5px;
}
.profile-side,
.asset-side {
display: flex;
}
.profile-side img,
.asset-side img {
width: 1.5em;
height: 1.5em;
margin-left: 1em;
margin-top: 0.5em;
}
.profile-side p,
.asset-side p {
margin-left: 3em;
margin-top: 0.8em;
position: absolute;
}
.next,
.next-asset {
margin: 1em 11em !important;
width: 10px !important;
height: 10px !important;
position: absolute;
cursor: pointer;
transition: .2s transform ease;
}
.prof-settings ul,
.assets ul {
background-color: var(--lighter-white);
padding-bottom: 3em;
cursor: pointer;
display: none;
}
.assets li {
display: flex;
}
.assets img {
padding-right: 1em;
}
.list {
width: 1em;
}
.add-asset {
width: 1em;
margin-left: -1px;
}
.in,
.out {
width: 1.3em;
margin-left: -4px;
}
.assets ul {
padding-bottom: 6em !important;
}
.prof-settings li:hover,
.assets li:hover {
color: var(--light-green);
}
.rotate-90 {
transform: rotate(90deg);
}
.transform {
display: block !important;
}
.position {
margin-top: 5em;
}
.modal {
position: absolute;
/*display: none;*/
z-index: 2
}
.asset-modal-box {
background-color: var(--light-white);
width: 40em;
height: 40em;
margin-left: 40em;
}
.modal-position {
margin-top: -5em;
}
.form {
padding: 1em;
}
.section-left {
position: absolute;
width: 7em;
}
.section-right {
position: relative;
margin-left: 20em;
margin-top: 2.1em;
}
.brand-container,
.model-container,
.serial-container {
margin-bottom: 1em;
}
.item-container,
.date-purchased-container,
.cost-container,
.tag-container,
.tag-container {
margin-bottom: 1em;
}
.description-container,
.model-container,
.serial-container,
.brand-container,
.item-container,
.date-purchased-container,
.tag-container,
.cost-container {
display: grid;
}
.description-container {
margin-top: 3em;
margin-bottom: 1em;
}
.tag-container {
display: flex;
}
.item {
width: 20em;
}
.l-purchased {
width: 8em;
}
.currency {
background-color: var(--darkish-green);
width: 2em;
}
.rand {
display: flex;
height: 2em;
padding-left: 1em;
}
.rand p {
margin-top: 7px;
margin-left: -6px;
}
.cost {
margin-left: 1em;
position: absolute;
}
.item,
.brand,
.model,
.serial,
.date,
.cost,
.description,
.purchased,
.tag {
height: 26px;
}
.buttons {
margin: 0em 1em;
padding-top: 12em;
}
.submit,
.close {
margin-left: 6em;
padding: 1em 2em;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
border: none;
background-color: var(--light-green);
}
.close:hover {
background-color: red;
}
.department {
margin-left: 4.3em;
}
select {
width: 10em;
}
.category-modal {
background-color: var(--light-green);
width: 37em;
padding: 7px;
position: absolute;
margin-top: -32em;
display: none;
}
.category-modal h3 {
color: var(--dark-purple);
}
.line,
.line-bottom {
border-top: 1px solid black;
}
.line-bottom {
margin-top: 1em;
}
.category-input {
padding: 5px;
margin-left: 28.8em;
margin-top: 1em;
}
.add,
.cancel {
width: 4em;
border: none;
background-color: var(--dark-purple);
border-radius: 3px;
cursor: pointer;
margin-top: 1em;
color: var(--light-white);
padding: 5px;
}
.add {
margin-left: 33em;
}
.cancel {
margin-left: 1em;
}
.close-category {
position: absolute;
margin-top: -2.5em;
margin-left: 35em;
cursor: pointer;
}
<div class="greyback"></div>
<header>
<nav class="nav-top">
<div class="nav-banner">
<img src="./references/images/CS247-Pastel-Logo (1).jpg" alt="CS247 Logo">
</div>
<ul class="left">
<li><img src="./references/images/List icon.png" alt="list icon">List of Assets</li>
<li class="add-button"><img src="./references/images/add icon.png" alt="Add button">Add an Asset</li>
<li><img src="./references/images/Search.png" alt="Search">Search</li>
</ul>
<ul class="right">
<li><img src="./references/images/clock.png" alt="clock">Changelog</li>
<li><img src="./references/images/tag.png" alt="clock">Buy Asset Tags</li>
<li><img class="profile" src="./references/images/profile pic.png" alt="profile pic"></li>
</ul>
</nav>
</header>
<main>
<aside>
<nav class="nav-side">
<div class="profile-side">
<img src="./references/images/profile pic.png" alt="profile pic">
<img class="next" src="./references/images/next.png" alt="next">
<p>Username</p>
</div>
<div class="prof-settings">
<ul>
<li>My Profile</li>
<li>Change Password</li>
<li>Log out</li>
</ul>
</div>
</nav>
<nav class="nav-side-asset">
<div class="asset-side">
<img src="./references/images/asset-management.png" alt="Asset icon">
<img class="next-asset" src="./references/images/next.png" alt="next">
<p>Assets</p>
</div>
<div class="assets">
<ul>
<li><img class="list" src="./references/images/List icon.png" alt="list icon">List of Assets</li>
<li><img class="add-asset" src="./references/images/add icon.png" alt="Add button">Add an Asset</li>
<li><img class="in" src="./references/images/checkbox-in.png" alt="in icon">Assets In</li>
<li><img class="out" src="./references/images/X-out.png" alt="out icon">Assets Out</li>
</ul>
</div>
</nav>
</aside>
<div class="modal">
<div class="asset-modal-box">
<form class="form">
<!--Left of form inputs and labels-->
<div class="section-left">
<div class="tag-container">
<label for="tag" class="l-tag">Tag ID:</label>
<label class="id"></label>
</div>
<div class="item-container">
<label for="item" class="l-item">Item</label>
<input type="text" name="item" class="item">
</div>
<div class="date-purchased-container">
<label for="item" class="l-purchased">Date of Purchase</label>
<input type="date" name="item" class="purchased">
</div>
<div class="cost-container">
<label for="item" class="l-cost">Cost</label>
<div class="currency">
<div class="rand">
<p>R</p>
<input type="text" name="item" class="cost">
</div>
</div>
</div>
</div>
<!--Right of form inputs and labels-->
<div class="section-right">
<div class="brand-container">
<label for="brand" class="l-brand">Brand</label>
<input type="text" name="brand" class="brand">
</div>
<div class="model-container">
<label for="model" class="l-model">Model</label>
<input type="text" name="Model" class="model">
</div>
<div class="serial-container">
<label for="serial" class="l-serial">Serial No</label>
<input type="text" name="serial" class="serial">
</div>
</div>
<div class="description-container">
<label for="description" class="l-description">Description</label>
<input type="text" name="serial" class="description">
</div>
<!--Selections-->
<div class="options">
<label class="category" for="category">Category
<select name="category" id="category" class="category">
</select>
<button class="category-add">+</button>
</label>
<label class="department" for="department">Department
<select name="department" id="department" class="department-select"></select>
<button class="department-add">+</button>
</label>
<!--Modal for select options input-->
<div class="category-modal">
<h3>Add Catagory</h3>
<div class="close-category">X</div>
<div class="line"></div>
<p>If you want to add a new category of assets, you're in the right spot. Add a category for computer equipment, wireless keyboards, or any assets you're working with.
</p>
<input type="text" class="category-input">
<div class="line-bottom"></div>
<button class="add">Add</button>
<button class="cancel">Cancel</button>
</div>
</div>
<!--Form Buttons-->
<div class="buttons">
<button class="submit">Add Item</button>
<button class="close">Close</button>
</div>
</form>
</div>
</div>
</main>
I have attached a screenshot on what buttons to press to get to the issue:
I installed the code you have given and played with it. I noticed that the issue you are facing is due to the page being refreshed, the normal behaviour when you click on a button inside a form, which you can prevent with e.preventDefault(). For categoryAdd as an example:
categoryAdd.addEventListener("click", (e) => {
e.preventDefault();
categoryModal.style.display = "block";
});
Add e.preventDefault() for each button that don't need to refresh the page, after passing the event e as parameter like I did above.
I was trying to create a button(on bottom right) which will open a form after clicking or hovering on it. The form will slide(slowly) open and close after clicking on login, my code is making the button going down as the form is opening.
Also the button should be on the right side, I've tried float:right; and right:0; to fix the button to right but it's not working.
Here's my code:
function showForm(){
document.getElementById('loginForm').style.display = "block";
}
function hideForm(){
document.getElementById('loginForm').style.display = "none";
}
*{
margin: 0;
padding: 0;
box-sizing: border-box
}
.no-show{display:none;}
.form-container {
position:absolute;
bottom:0;
right:0;
float: right;
width:100%;
}
body { font-family: tahoma; }
#loginForm {
display: none;
background: #ccc;
width: 250px;
height: 100px;
padding: 20px;
color: #333;
}
.label {
cursor: pointer;
display:block;
padding: 5px 15px;
font-size: 16px;
font-weight: bold;
}
.form-label {
width: 70px;
font-size: 12px;
font-weight: bold;
}
.form-field {
width: 180px;
}
.form-elements {
font-size: 0px;
margin: 10px 0 0 0;
display: block;
}
.form-label, .form-field {
display: inline-block;
}
.form-field input {
padding: 3px 5px;
}
.submit-btn input {
margin-left: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-container">
<form>
<p id="login" onmouseover="showForm();" onmouseout="hideForm();">
<span class="label">Login</span>
<span id="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name" /></span>
</span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password" /></span>
</span>
</span>
</p>
</form>
</div>
Here's the working fiddle- https://jsfiddle.net/d5L8bywk/1/
Form should open(up side) slowly with ease and should close after click on login button.
It should look like this:
Check this code. No jQuery needed, you can achieve this with pure css transition in combination with height property.
function showForm() {
document.getElementById('loginForm').classList.add('show');
}
function hideForm() {
document.getElementById('loginForm').classList.remove('show');
}
*{
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
font-family: tahoma;
height: 100vh;
}
.no-show{
display:none;
}
.form-container {
position: absolute;
bottom: 40px;
right: 80px;
left: auto;
top: auto;
width: 230px;
}
#loginForm {
background: #ccc;
width: 250px;
color: #333;
height: 0;
overflow: hidden;
transition: all 0.5s;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#loginForm.show {
height: 150px;
}
.label {
cursor: pointer;
display:block;
padding: 5px 15px;
font-size: 16px;
font-weight: bold;
}
.form-label {
width: 70px;
font-size: 12px;
font-weight: bold;
}
.form-field {
width: 180px;
}
.form-elements {
font-size: 0px;
margin-bottom: 10px;
display: flex;
flex-direction: column;
}
.form-label, .form-field {
display: inline-block;
width: 100%;
}
.form-field input {
padding: 3px 5px;
}
.submit-btn input {
margin-left: 70px;
}
#login {
text-align: center;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-container">
<form>
<div id="loginForm" onmouseleave="hideForm();">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name" /></span>
</span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password" /></span>
</span>
</div>
</form>
<span id="login" class="label" onmouseover="showForm();">Login</span>
</div>
#login{
float:right
}
<div class="form-container">
<form>
<p id="login" onmouseover="showForm();" onmouseout="hideForm()">
<span id="loginForm">
<span class="form-elements">
<span class="form-label">Name:</span>
<span class="form-field"><input type="name"></span>
</span>
<span class="form-elements">
<span class="form-label">Password:</span>
<span class="form-field"><input type="password"></span>
</span>
</span>
<span class="label">Login</span></p>
</form>
</div>
I'm currently experiencing something rather strange. I'm building a website for a client which includes a horizontal nav bar that dynamically changes the page content without reloading via javascript. Three of the four tabs function correctly, however when I select the last tab, the side bar dramatically increases in width, pushing my service form out of it's background and off the page - even though the javascript shouldn't be affecting that element at all. I've been playing with it all day and cannot figure out what's causing this.
My JavaScript is:
var jsOverview = document.getElementById('overview');
var jsQuote = document.getElementById('quote');
function changeTextQuote() {
if (jsOverview.style.display === 'none') {
jsOverview.style.display = 'block';
jsQuote.style.display = 'none';
} else {
jsOverview.style.display = 'none';
jsQuote.style.display = 'block';
}
}
<!-- begin snippet: js hide: false console: true babel: false -->
/*Service Pages CSS*/
.services {
display: grid;
width: 100%;
margin: 0 600px;
margin-bottom: 10px;
}
.side-bar {
grid-column: 1;
grid-row: 1;
background: black;
border-bottom: 5px solid white;
border-left: 5px solid white;
border-top: 5px solid white;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
width: 100%;
height: 258px;
margin: 30px 0;
margin-right: 25px;
}
ul.side-bar-list {
text-align: left;
padding: 0;
width: 100%;
}
.side-bar-list li {
margin-bottom: 10px;
margin-top: 10px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 10px;
width: 100%;
}
.side-bar-list li:hover {
color: white;
text-decoration: none;
background-color: darkred;
}
.side-bar-list li:focus {
color: white;
text-decoration: none;
background-color: darkred;
}
.side-bar ul {
list-style-type: none;
}
.side-bar-item {
color: white;
text-align: left;
text-decoration: none;
}
.side-bar-item:hover {
color: white;
text-decoration: none;
}
.side-bar-item:focus {
color: white;
text-decoration: none;
}
.services-content {
grid-column: 2;
grid-row: 1;
background: rgba(90, 90, 90, 0.6);
border: 5px solid black;
border-radius: 5px;
padding-left: 10px;
width: 30%;
margin-bottom: 5px;
}
.serviceForm {
background: rgba(90, 90, 90, 0.6);
border: 5px solid black;
border-radius: 5px;
grid-column: 2;
grid-row: 1;
display: grid;
grid-column-gap: 20px;
width: 30%;
margin: 20px auto;
padding: 10px;
padding-left: 20px;
}
.col-left {
grid-column: 1;
grid-row: 1;
}
.col-right {
grid-column: 3;
grid-row: 1;
}
.commentText {
grid-column-start: 1;
grid-column-end: 4;
}
label {
color: black;
}
span {
color: white;
}
textarea[name=comments] {
resize: none;
padding: 0;
margin: 0;
width: 100%;
max-width: 520px;
height: 150px;
}
HTML:
<body>
<div class="services">
<div class="side-bar">
<ul class="side-bar-list">
<li><a class="side-bar-item" href="#" onclick="changeTextOverview(); return false;">Overview</a></li>
<li><a class="side-bar-item" href="#" onclick="changeTextInterior(); return false;">Interior Lighting</a></li>
<li><a class="side-bar-item" href="#" onclick="changeTextExterior(); return false;">Exterior Lighitng</a></li>
<li><a class="side-bar-item" href="#" onclick="changeTextQuote(); return false;">Request a Quote</a></li>
</ul>
</div>
<div class="services-content">
<div id="overview">
<h1>Lighting Service:</h1><br />
<p>Text removed for sake of business entity.</p>
</div>
<div id="quote" style="display: none;" <h1>Request a Quote</h1>
<form class="serviceForm" action="mailto:companyemail" method="post" enctype="text/plain">
<div class="col-left">
<label>
<span>* Name:</span><br />
<input type="text" name="LightingRequestName" required />
</label><br />
<label>
<span>* Email:</span><br />
<input type="text" name="LightingRequestEmail" required />
</label><br />
<label>
<span>Company:</span><br />
<input type="text" name="LightingRequestCompany" />
</label><br />
<label>
<span>Address:</span><br />
<input type="text" name="LightingRequestAddress" />
</label><br />
</div>
<div class="col-right">
<label>
<span>City:</span><br />
<input type="text" name="LightingRequestCity" />
</label><br />
<label>
<span>State:</span><br />
<input type="text" name="LightingRequestState" />
</label><br />
<label>
<span>Zip Code:</span><br />
<input type="text" name="LightingRequestZip" />
</label><br />
<label>
<span>Phone Number:</span><br />
<input type="text" name="LightingRequestNumber" />
</label><br />
</div>
<label class="commentText">
<span>Comments:</span><br />
<textarea name="comments"></textarea><br />
</label>
<div class="formSubmitButton">
<input type="submit" value="Submit" /><br />
<br />
</div>
</form>
</div>
</div>
</div>
<script src="~/Content/LightingPageText.js"></script>
<script src="~/Content/ServicesQuote.js"></script>
</body>
I'm sure it's probably something really stupid I overlooked, but any help is appreciated!
EDIT: I was looking around in the inspect window on chrome, whenever I click the button to display the form, the actual grid column the side bar is in expands, pushing the rest of the content off of the screen. Not sure why this is happening. I'm still playing with it, but hopefully this revelation will help lead to some answers.
If this is a direct copy-paste from your source, you forgot the closing angle bracket on #quote.
Yours: <div id="quote" style="display: none;" <h1>Request a Quote</h1>
Updated: <div id="quote" style="display: none;"> <h1>Request a Quote</h1>
Note the > before opening <h1>.
I not able to validate a multiple step form - I want a validation for each field instead of now it validates sets of fields
My code
function show_next(id, nextid, bar) {
var ele = document.getElementById(id).getElementsByTagName("input");
var error = 0;
for (var i = 0; i < ele.length; i++) {
if (ele[i].type == "text" && ele[i].value == "") {
error++;
}
}
if (error == 0) {
document.getElementById("account_details").style.display = "none";
document.getElementById("user_details").style.display = "none";
document.getElementById("qualification").style.display = "none";
$("#" + nextid).fadeIn();
document.getElementById(bar).style.backgroundColor = "#38610B";
} else {
alert("Fill All The details");
}
}
function show_prev(previd, bar) {
document.getElementById("account_details").style.display = "none";
document.getElementById("user_details").style.display = "none";
document.getElementById("qualification").style.display = "none";
$("#" + previd).fadeIn();
document.getElementById(bar).style.backgroundColor = "#D8D8D8";
}
body {
margin: 0 auto;
padding: 0;
text-align: center;
background-color: #D8D8D8;
}
#wrapper {
width: 995px;
padding: 0px;
margin: 0px auto;
font-family: helvetica;
position: relative;
}
#wrapper .baricon {
display: inline-block;
border-radius: 100%;
padding: 12px;
background-color: #38610B;
color: white;
}
#wrapper .progress_bar {
width: 200px;
height: 5px;
border-radius: 20px;
background-color: #D8D8D8;
display: inline-block;
}
#wrapper form div {
margin-left: 340px;
padding: 10px;
box-sizing: border-box;
width: 300px;
margin-top: 50px;
background-color: #585858;
}
#wrapper form div p {
color: #F2F2F2;
margin: 0px;
margin-top: 10px;
font-weight: bold;
}
#wrapper form div .form_head {
font-size: 22px;
font-weight: bold;
margin-bottom: 30px;
}
#wrapper form div input[type="text"] {
width: 200px;
height: 40px;
padding: 5px;
border-radius: 5px;
border: none;
margin-top: 10px;
}
#wrapper form div input[type="button"],
input[type="submit"] {
width: 80px;
height: 40px;
border-radius: 5px;
border: 2px solid white;
background: none;
color: white;
margin: 5px;
margin-top: 10px;
}
#user_details,
#qualification {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapper">
<br>
<span class='baricon'>1</span>
<span id="bar1" class='progress_bar'></span>
<span class='baricon'>2</span>
<span id="bar2" class='progress_bar'></span>
<span class='baricon'>3</span>
<form method="post" action="">
<div id="account_details">
<p class='form_head'>Account Details</p>
<p>Email Address</p>
<input type="text" placeholder='Email Address'>
<p>Password</p>
<input type="text" placeholder='Password'>
<br>
<input type="button" value="Next" onclick="show_next('account_details','user_details','bar1');">
</div>
<div id="user_details">
<p class='form_head'>User Details</p>
<p>First Name</p>
<input type="text" placeholder='First Name'>
<p>Last Name</p>
<input type="text" placeholder='Last Name'>
<p>Gender</p>
<input type="text" placeholder='Gender'>
<br>
<input type="button" value="Previous" onclick="show_prev('account_details','bar1');">
<input type="button" value="Next" onclick="show_next('user_details','qualification','bar2');">
</div>
<div id="qualification">
<p class='form_head'>Qualification</p>
<p>Qualification</p>
<input type="text" placeholder='Qualification'>
<p>Hobbies</p>
<input type="text" placeholder='Hobbies'>
<br>
<input type="button" value="Previous" onclick="show_prev('user_details','bar2');">
<input type="Submit" value="Submit">
</div>
</form>
</div>
Here is a version that will not go to the next page if there are errors
Let me know what you think
I added two validations. You can change the rest. The code is vastly simplified
function isEmail(str) { // simple email validation
return /(.+)#(.+){2,}\.(.+){2,}/.test($.trim(str));
}
function isEmpty(str) { // test for empty string
return $.trim(str) === "";
}
function validate($div) { // validates any div - will not let you leave the div if error
var $fields = $div.find("input"), hasError = false;
$fields.each(function() {
$(this).removeClass("error")
hasError = this.name=="pword" && isEmpty(this.value);
if (hasError) {
$("#pword").addClass("error").focus();
return false;
}
hasError = this.name=="email" && (isEmpty(this.value) || !isEmail(this.value));
if (hasError) {
$("#email").addClass("error").focus();
return false;
}
hasError = isEmpty(this.value); // the rest of the fields
if (hasError) {
$(this).addClass("error").focus();
return false;
}
})
return hasError?false:true;
}
$(function() {
// validate all divs on submit, but actually only necessary to validate thediv the submit is on
$("#myForm").on("submit",function(e) {
$(".page").each(function() {
if (!validate($(this))) {
e.preventDefault(); // stop submission
return false;
}
});
});
$(".nav").on("click", function() {
var $parent = $(this).closest("div");
var $nextDiv = $(this).hasClass("next") ? $parent.next() : $parent.prev();
if (validate($parent)) { // is the div this button is on valid?
$parent.fadeOut(function() { // fade it out and fade the next one in
if ($nextDiv.length) {
$nextDiv.fadeIn()
for (var i=$(".page").length;i> $nextDiv.index(); i--) {
$("#bar" + i).css({"background-color": "#D8D8D8"}); // we are going backwards
}
$("#bar" + $nextDiv.index()).css({"background-color": "#38610B"});
}
});
}
});
});
body {
margin: 0 auto;
padding: 0;
text-align: center;
background-color: #D8D8D8;
}
#wrapper {
width: 995px;
padding: 0px;
margin: 0px auto;
font-family: helvetica;
position: relative;
}
#wrapper .baricon {
display: inline-block;
border-radius: 100%;
padding: 12px;
background-color: #38610B;
color: white;
}
#wrapper .progress_bar {
width: 200px;
height: 5px;
border-radius: 20px;
background-color: #D8D8D8;
display: inline-block;
}
#wrapper form div {
margin-left: 340px;
padding: 10px;
box-sizing: border-box;
width: 300px;
margin-top: 50px;
background-color: #585858;
}
#wrapper form div p {
color: #F2F2F2;
margin: 0px;
margin-top: 10px;
font-weight: bold;
}
#wrapper form div .form_head {
font-size: 22px;
font-weight: bold;
margin-bottom: 30px;
}
#wrapper form div input[type="text"] {
width: 200px;
height: 40px;
padding: 5px;
border-radius: 5px;
border: none;
margin-top: 10px;
}
#wrapper form div input[type="button"],
input[type="submit"] {
width: 80px;
height: 40px;
border-radius: 5px;
border: 2px solid white;
background: none;
color: white;
margin: 5px;
margin-top: 10px;
}
#user_details,
#qualification {
display: none;
}
.error { background-color:pink !important}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapper">
<br>
<span class='baricon'>1</span>
<span id="bar1" class='progress_bar'> </span>
<span class='baricon'>2</span>
<span id="bar2" class='progress_bar'> </span>
<span class='baricon'>3</span>
<form method="post" action="" id="myForm">
<div id="account_details" class="page">
<p class='form_head'>Account Details</p>
<p>Email Address</p>
<input type="text" name="email" id="email" placeholder='Email Address'>
<p>Password</p>
<input type="text" name="pword" id="pword" placeholder='Password'>
<br>
<input type="button" value="Next" class="nav next" />
</div>
<div id="user_details" class="page">
<p class='form_head'>User Details</p>
<p>First Name</p>
<input type="text" name="fname" id="fname" placeholder='First Name'>
<p>Last Name</p>
<input type="text" name="lname" is="lname" placeholder='Last Name'>
<p>Gender</p>
<input type="text" name="gender" id="gender" placeholder='Gender'>
<br>
<input type="button" value="Prev" class="nav prev" />
<input type="button" value="Next" class="nav next" />
</div>
<div id="qualification" class="page">
<p class='form_head'>Qualification</p>
<p>Qualification</p>
<input type="text" placeholder='Qualification'>
<p>Hobbies</p>
<input type="text" placeholder='Hobbies'>
<br>
<input type="button" value="Prev" class="nav prev" />
<input type="Submit" value="Submit">
</div>
</form>
</div>
My Images are not appending from Left to right on click event ..I found that variable sources$ was not getting any data from a div with data-module attribute
Button Click event
$('#executeButton').click(function () {
var sources$ = $('#sourcePane input:checked~img');
});
It shows Blank object array
this is the particular div with data-module
<div data-module="Sources" data-module-id="sourcePane">
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source1.png" alt="source 1" title="Source 1" id="xyz"/>
</div>
</div>
in Demo HTML Page
http://www.bibeault.org/jqia2/chapter3/lab.move.and.copy.html
sources$ has is value stored as "img#xyz source1.png"
It is just not working on my local IIS
this is the complete code
<!DOCTYPE html>
<html>
<head>
<title>Move and Copy Lab Page</title>
<link rel="stylesheet" type="text/css" href="../styles/core.css">
<style type="text/css">
div#sourcePane {
float: left;
width: 40%;
}
div#sourcePane img {
margin-bottom: 8px;
}
div#targetPane {
float: right;
width: 55%;
}
div.target {
border: 1px solid maroon;
background-color: #ffffcc;
margin-bottom: 8px;
}
#controls div {
margin-bottom: 4px;
}
#restoreButton {
display: none;
}
.done input[type=checkbox], .done #executeButton {
display: none;
}
.done #restoreButton {
display: inline;
}
</style>
<script type="text/javascript" src="../Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="../Scripts/jqia2.support.js"></script>
<script type="text/javascript" >
$(function () {
$('#restoreButton').click(function () {
window.location = 'lab.move.and.copy.html';
});
$('#executeButton').click(function () {
$('body').addClass('done');
$('.done #controls :radio').attr('disabled', true);
var sources$ = $('#sourcePane input:checked~img');
if ($('[name=clone]:checked').val() == 'yes') sources$ = sources$.clone();
var targets$ = $('#targetPane input:checkbox:checked').parents('.target');
var operation = $('[name=operations]:checked').val();
targets$[operation](sources$);
});
});
</script>
</head>
<body class="fancy">
<div id="pageContainer">
<div id="pageContent">
<h1>jQuery Move and Copy Lab Page</h1>
<div data-module="Sources" data-module-id="sourcePane">
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source1.png" alt="source 1" title="Source 1" id="xyz"/>
</div>
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source2.png" alt="source 2" title="Source 2"/>
</div>
<div>
<input type="checkbox" name="sources"/><br/>
<img src="images/source3.png" alt="source 3" title="Source 3"/>
</div>
</div>
<div data-module="Target Areas" data-module-id="targetPane">
<div id="target1" class="target">
<div><input type="checkbox" name="targets"/> Target 1</div>
</div>
<div id="target2" class="target">
<div><input type="checkbox" name="targets"/> Target 2</div>
</div>
<div id="target3" class="target">
<div><input type="checkbox" name="targets"/> Target 3</div>
</div>
<div id="controls">
<div>
<label>Operation:</label><br/>
<input type="radio" name="operations" value="append" checked="checked"/> append
<input type="radio" name="operations" value="prepend"/> prepend
<input type="radio" name="operations" value="before"/> before
<input type="radio" name="operations" value="after"/> after
</div>
<div>
<label>Clone?:</label><br/>
<input type="radio" name="clone" value="no" checked="checked"/> no
<input type="radio" name="clone" value="yes"/> yes
</div>
</div>
<div>
<button type="button" class="green90x24" id="executeButton">Execute</button>
<button type="button" class="green90x24" id="restoreButton">Restore</button>
</div>
</div>
<div class="footer">jQuery in Action, 2nd edition, sample code<br/>Bear Bibeault and Yehuda Katz</div>
</div>
</div>
</body>
</html>
Core.css
body {
background: #f5ffe8 none;
}
body.fancy {
background: #cccccc url('../images/backg.png');
}
body,th,td {
font-family: 'Verdana',sans-serif;
font-size: 9pt;
color: #444444;
}
#pageContainer {
width: 752px;
margin: 8px auto;
border: 3px #4a6074 solid;
background-color: white;
}
#pageContent {
padding: 16px;
}
h1 {
width: auto;
height: auto;
background-image: none;
padding: 0;
color: #4a6074;
font-size: 1.4em;
}
body.fancy h1 {
width: 640px;
height: 41px;
font-size: 1.2em;
background: url('../images/banner.h1.png') no-repeat;
padding: 24px 0 0 80px;
margin: 0 0 16px 0;
}
label {
font-weight: bold;
}
button {
text-align: center;
border: 0;
cursor: pointer;
}
button.green90x24 {
background: url('../images/button.90x24.green.png');
width: 90px;
height: 24px;
color: #444444;
font-weight: bold;
padding: 0;
}
div.module {
margin-bottom: 12px;
}
div.banner {
background-color: #a1c772;
}
div.banner h2 {
height: 23px;
background: url("../images/module.slice.png") repeat-x #a1c772;
color: white;
font-size: 1.1em;
font-weight: bold;
margin: 0 4px 0 4px;
padding: 7px 0 0 8px;
}
div.module div.body {
padding: 8px;
border: solid 2px #a1c772;
background-color: #f5ffe8;
}
div.module h3 {
color: #6b8150;
margin: 3px 0 3px 0;
font-size: 1.2em;
font-weight: bold;
}
p {
margin: 0 0 8px 0;
}
div.footer {
text-align: center;
clear: both;
font-size: 0.8em;
color: silver;
}
div.separator {
clear: both;
}
img[src="example.jpg"] {
background-color: white;
border: 1px black solid;
padding: 12px 12px 16px 12px;
border-bottom-width: 2px;
border-right-width: 2px;
}
.leftCap {
float: left;
width: 8px;
height: 30px;
background: no-repeat url("../images/module.left.cap.png");
}
.rightCap {
float: right;
width: 8px;
height: 30px;
background: no-repeat url("../images/module.right.cap.png");
}
I couldn't find the reason ...
Any suggestion will be helpful