Input field "placeholder" not working/showing - javascript

I'm a newbie front-end dev, I'm having trouble understanding why the placeholder is not working, I tried using LABEL tag but it won't disappear as I start typing into the text input. I am serving the HTML with express to heroku.
here's the code:
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
edit:
I am using bootstrap for styling and Express and NodeJs for serving files to the frontend.
here is the overall code for signup page:
<link href="../css/styles.css" rel="stylesheet" />
</head>
<body class="text-center">
<main class="form-signin">
<form method="post" action="/">
<img
class="mb-4"
src="../images/example.png"
alt=""
width="72"
height="57"
/>
<h1 class="h3 mb-3 fw-normal">Sign up to my newsletter</h1>
<div class="form-floating">
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
</form>
</main>
</body>
and minimal styling used in stylesheet:
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin #firstName {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin #lastName {
margin-bottom: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.form-signin input[type="email"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
This is how it is displayed on the web app

As Phil said in the comment to your post the issue is that you're using Bootstrap Floating Labels (by wrapping your inputs with a .form-floating) but you're not supplying labels (yours are commented out).
<div class="form-floating">
<label for="firstname">FirstName</label>
<input
type="text"
class="form-control"
id="firstName"
name="firstname"
placeholder="FirstName"
required
autofocus/>
</div>
Alternatively you can remove the .form-floating surrounding div and use the placeholders as normal
<div>
<label for="firstname">FirstName</label>
<input
type="text"
class="form-control"
id="firstName"
name="firstname"
placeholder="FirstName"
required
autofocus/>
</div>
Here they are uncommented and working correctly: on codepen

Remove class form-floating from div tag it will work.

Related

Text input field "PLACEHOLDER" not appearing

I'm a newbie, I'm having trouble understanding why the placeholder is not working, I tried using LABEL tag but it won't disappear as I start typing into the text input.
I am serving the HTML with express to heroku.
here's the code:
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
edit:
I am using bootstrap for styling and Express and NodeJs for serving files to the frontend.
here is the overall code for signup page:
<link href="../css/styles.css" rel="stylesheet" />
</head>
<body class="text-center">
<main class="form-signin">
<form method="post" action="/">
<img
class="mb-4"
src="../images/example.png"
alt=""
width="72"
height="57"
/>
<h1 class="h3 mb-3 fw-normal">Sign up to my newsletter</h1>
<div class="form-floating">
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
</form>
</main>
</body>
and minimal styling used in stylesheet:
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin #firstName {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin #lastName {
margin-bottom: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.form-signin input[type="email"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
This is how it is displayed on the web app
can you share some more info, looks like the above is simple HTML, The placeholder will disappear when you edit the input.
Not sure why it wouldn't, perhaps share your code online.
Like this,
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
where we can inspect and debug it.
As of now, your question is too generic to find the issue. And by looks of class names, you are using some sort of library to style your page. share that info too
you have to replace form-floating by form-group
<body class="text-center">
<main class="form-signin">
<form method="post" action="/">
<img class="mb-4" src="../images/example.png" alt="" width="72" height="57" />
<h1 class="h3 mb-3 fw-normal">Sign up to my newsletter</h1>
<div class="form-group">
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-group">
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
</form>
</main>
</body>

Client Side Form Validation not happening + can't edit form elements

I am not able to perform client-side form validation. It's a simple check. I wanna make sure that the passwords are the same. This is the javascript code snippet that I am using for the same.
$(document).ready(function(e) {
$("#reg-form").submit(function(event)) {
let $password = $('#password');
let $confirm = $('#confirmPass');
let $error = $('#confirmError');
if ($password.val() === $confirm.val()) {
return true;
} else {
$error.text("Passwords don't match");
event.preventDefault();
}
}
})
Although, I don't think the problem is in the javascript code because I tried to style some items in the form and that didn't work either so I think it's an HTML issue. However, I can't pinpoint the issue. This is my HTML Code.
<div class="d-flex justify-content-center">
<form class="reg-form" id="reg-form" enctype="multipart/form-data" action="register.php" method="post">
<div class="form-row">
<div class="col">
<input type="text" name="firstName" id="firstName" class="form-control" value="" placeholder="First Name*" required>
</div>
<div class="col">
<input type="text" name="lastName" id="lastName" class="form-control" value="" placeholder="Last Name*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="email" name="email" id="email" class="form-control" value="" placeholder="Email*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="password" id="password" class="form-control" value="" placeholder="Password*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="confirmPass" id="confirmPass" class="form-control" value="" placeholder="Confirm Password*" required>
<small id="confirmError" class="text-danger"></small>
</div>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="agreement" class="form-check-input" value="" required>
<label for="agreement" class="form-check-label font-ubuntu text-black-50"> I agree to the Terms and Conditions*</label>
</div>
<div class="submit-btn text-center my-5">
<button type="submit" class="btn btn-warning rounded-pill text-dark px-5" name="button">Continue</button>
</div>
</form>
The following is the CSS code that I tried to work with.
#reg-form input[type="text"],
#reg-form input[type="email"] {
border-radius: unset;
border: none;
border-bottom: 1px solid var(--color-border);
font-family: var(--font-ubuntu);
font-size: 18px;
}
I found some issues with the JavaScript markup, had a few closing brackets missing and closing parentheses declared too early in the code; but your code itself looks like it works with the correct markup on the JS, please see below:
$(document).ready(function() {
$("#reg-form").submit(function(e) {
let $password = $('#password');
let $confirm = $('#confirmPass');
let $error = $('#confirmError');
if ($password.val() === $confirm.val()) {
console.log(true);
return true
} else {
e.preventDefault();
$error.text("Passwords don't match");
}
})
})
#reg-form input[type="text"],
#reg-form input[type="email"] {
border-radius: unset;
border: none;
border-bottom: 1px solid var(--color-border);
font-family: var(--font-ubuntu);
font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex justify-content-center">
<form class="reg-form" id="reg-form" enctype="multipart/form-data" action="register.php" method="post">
<div class="form-row">
<div class="col">
<input type="text" name="firstName" id="firstName" class="form-control" value="" placeholder="First Name*" required>
</div>
<div class="col">
<input type="text" name="lastName" id="lastName" class="form-control" value="" placeholder="Last Name*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="email" name="email" id="email" class="form-control" value="" placeholder="Email*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="password" id="password" class="form-control" value="" placeholder="Password*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="confirmPass" id="confirmPass" class="form-control" value="" placeholder="Confirm Password*" required>
<small id="confirmError" class="text-danger"></small>
</div>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="agreement" class="form-check-input" value="" required>
<label for="agreement" class="form-check-label font-ubuntu text-black-50"> I agree to the Terms and Conditions*</label>
</div>
<div class="submit-btn text-center my-5">
<button type="submit" class="btn btn-warning rounded-pill text-dark px-5" name="button">Continue</button>
</div>
</form>
</div>

Hiding billing section when "same as shipping address" checkbox is clicked?

How would I make it so that when the "Same as shipping address" checkbox is clicked, the billing address section will be hidden? I've been stuck on this for awhile now and decided to come here for help. Thank you very much in advance!
(posting some words here since I can't post due to having more code than text so ignore this part)
I attached a snipped below of my code so hopefully this helps:
.checkbox-custom, .radio-custom {
margin: 0 auto;
width: 40%;
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 1px solid #717171;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
<form class="form1">
<h6>Shipping Address</h6>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
<form class="form2">
<h6>Billing Address</h6>
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
I would recommend removing the div you have around the checkbox in the billing address. After this, you should be able to target .input-box when the checkbox has been checked. I have added a small example to help. You can add display: none or take the route I have depending on your accessibility needs. If you are wondering the ~ you see in the example it targets all siblings following the checkbox. I hope this helps :)
.checkbox-custom:checked ~.input-box {
visibility: hidden;
opacity: 0;
}
<form class="form2">
<h6>Billing Address</h6>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name" />
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name" />
<label for="first-name"><p>First Name</p></label>
</div>
</form>
1.the dom 'Same as shipping address' isn't inside 'form2',it should between 'form1' and 'form2',like this,'....'same as shipping adress''.otherwise ,u can not toggle show the content.
2. add onChange event on the 'same as shipping address' checkbox, if the value is checked,u can add class on the '' ,the class content is 'display:none'

Jquery close issue for popup

I have created a popup box with a form inside that is intended to open on page load. My issue is that when I create a button to close page on click using js nothing is happening. I have tried hide and fadeout. Please help!
Below is my most recent code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Visitor.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<style>
.pop-outer{
background-color: rgba(0,0,0,0.5);
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
}
.pop-inner{
background-color: #fff;
width: 500px;
height: 500px;
padding: 25px;
margin: 15% auto;
}
</style>
<script>
$("document").ready(function(){
$(function() {
$(".pop-outer").fadeIn('normal');
});
$(document).ready(function(){
$("close").click(function(event){
event.preventDefault();
});
});
});</script>
<script>
</script>
</head>
<body>
<div class="pop-outer" >
<div class="pop-inner ui-btn-icon-notext ui-btn-right">
<button onclick="close">X</button>
<form action="visitor.php" method="post">
<div class="section"><span>1</span>Basic Information
<div class="inner-wrap ">
First Name <input type="text" placeholder="First Name">
Last Name <input type="text" placeholder="Last Name">
</div>
</div>
<div class="section"><span>2</span>Contact Information
<div class="inner-wrap">
Email Address <input type="email" placeholder="Email Address">
Telephone Number <input type="number" placeholder="Phone Number">
</div>
</div>
<div class="section"><span>3</span>Visit Us
<div class="inner-wrap">
When do you plan on visiting?<input type="date" placeholder="Select a date">
</div>
</div>
<div class="section"><span>4</span>Stay Connected
<div class="inner-wrap">
Would you like to added to our email list?<br>
<input type="radio" name="emailblast" value="Yes"> Yes! I would love to be connected with Hopewell!
<input type="radio" name="emailblast" value="No"> No. I am not interested.</label>
</div>
</div>
<div class="button-section">
<input type="submit">
</div>
</form>
</div>
</div>
<div class="pop-outer hidden" >
<div class="pop-inner ui-btn-icon-notext ui-btn-right">
<button class="close">X</button>
<form action="visitor.php" method="post">
<div class="section"><span>1</span>Basic Information
<div class="inner-wrap ">
First Name <input type="text" placeholder="First Name">
Last Name <input type="text" placeholder="Last Name">
</div>
</div>
<div class="section"><span>2</span>Contact Information
<div class="inner-wrap">
Email Address <input type="email" placeholder="Email Address">
Telephone Number <input type="number" placeholder="Phone Number">
</div>
</div>
<div class="section"><span>3</span>Visit Us
<div class="inner-wrap">
When do you plan on visiting?<input type="date" placeholder="Select a date">
</div>
</div>
<div class="section"><span>4</span>Stay Connected
<div class="inner-wrap">
Would you like to added to our email list?<br>
<input type="radio" name="emailblast" value="Yes"> Yes! I would love to be connected with Hopewell!
<input type="radio" name="emailblast" value="No"> No. I am not interested.</label>
</div>
</div>
<div class="button-section">
<input type="submit">
</div>
</form>
</div>
css -->
.hidden {
display:none;
}
js-->
$("document").ready(function(){
$(".pop-outer").show();
$(".close").click(function(event){
$(".pop-outer").hide();
});
});
changed your close function by adding a selector(id#)
$("document").ready(function(){
$(function() {
$(".pop-outer").fadeIn('normal');
});
$(document).ready(function(){
$("#close").click(function(event){
event.preventDefault();
$(".pop-outer").toggle();
});
});
});
.pop-outer{
background-color: rgba(0,0,0,0.5);
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
}
.pop-inner{
background-color: #fff;
width: 500px;
height: 500px;
padding: 25px;
margin: 15% auto;
}
<script src="jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="pop-outer" >
<div class="pop-inner ui-btn-icon-notext ui-btn-right">
<button id="close">X</button>
<form action="visitor.php" method="post">
<div class="section"><span>1</span>Basic Information
<div class="inner-wrap ">
First Name <input type="text" placeholder="First Name">
Last Name <input type="text" placeholder="Last Name">
</div>
</div>
<div class="section"><span>2</span>Contact Information
<div class="inner-wrap">
Email Address <input type="email" placeholder="Email Address">
Telephone Number <input type="number" placeholder="Phone Number">
</div>
</div>
<div class="section"><span>3</span>Visit Us
<div class="inner-wrap">
When do you plan on visiting?<input type="date" placeholder="Select a date">
</div>
</div>
<div class="section"><span>4</span>Stay Connected
<div class="inner-wrap">
Would you like to added to our email list?<br>
<input type="radio" name="emailblast" value="Yes"> Yes! I would love to be connected with Hopewell!
<input type="radio" name="emailblast" value="No"> No. I am not interested.</label>
</div>
</div>
<div class="button-section">
<input type="submit">
</div>
</form>
</div>
</div>
Try Following:
You have written onclick "close".
it should be like: class="close" or id="close".
Following is change made in HTML
<button class="close">X</button>
Next thing you need to write code to close popup outer:
change made in JS is :
$("document").ready(function(){
$(function() {
$(".pop-outer").fadeIn('normal');
});
$(document).ready(function(){
$(".close").click(function(event){
event.preventDefault();
$(".pop-outer").hide();
});
});
});
You are missing .(dot) for class and there is also you are not used fadeOut for hide the modal (popup). I hope you can find what is error in your code.
$("document").ready(function(){
$(".pop-outer").fadeIn();
});
$(document).ready(function(){
$(".close").click(function(event){
event.preventDefault();
$(".pop-outer").fadeOut();
});
});
.pop-outer{
background-color: rgba(0,0,0,0.5);
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
}
.pop-inner{
background-color: #fff;
width: 500px;
height: 500px;
padding: 25px;
margin: 5% auto;
}
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="pop-outer">
<div class="pop-inner ui-btn-icon-notext ui-btn-right">
<button class="close">X</button>
<form action="visitor.php" method="post">
<div class="section"><span>1</span>Basic Information
<div class="inner-wrap ">
First Name <input type="text" placeholder="First Name">
Last Name <input type="text" placeholder="Last Name">
</div>
</div>
<div class="section"><span>2</span>Contact Information
<div class="inner-wrap">
Email Address <input type="email" placeholder="Email Address">
Telephone Number <input type="number" placeholder="Phone Number">
</div>
</div>
<div class="section"><span>3</span>Visit Us
<div class="inner-wrap">
When do you plan on visiting?<input type="date" placeholder="Select a date">
</div>
</div>
<div class="section"><span>4</span>Stay Connected
<div class="inner-wrap">
Would you like to added to our email list?<br>
<input type="radio" name="emailblast" value="Yes"> Yes! I would love to be connected with Hopewell!
<input type="radio" name="emailblast" value="No"> No. I am not interested.
</div>
</div>
<div class="button-section">
<input type="submit">
</div>
</form>
</div>
</div>
use this code your fadein and fadeout open and close popup issue resolve
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="Visitor.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<style>
.pop-outer{
background-color: rgba(0,0,0,0.5);
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
}
.pop-inner{
background-color: #fff;
width: 500px;
height: 500px;
padding: 25px;
margin: 15% auto;
}
</style>
<script>
$("document").ready(function(){
$(function() {
$(".pop-outer").fadeIn('normal');
});
$(document).ready(function(){
$("#close").click(function(event){
event.preventDefault();
$(".pop-outer").fadeOut('normal');
});
});
});</script>
<script>
</script>
</head>
<body>
<div class="pop-outer" >
<div class="pop-inner ui-btn-icon-notext ui-btn-right">
<button id="close">X</button>
<form action="visitor.php" method="post">
<div class="section"><span>1</span>Basic Information
<div class="inner-wrap ">
First Name <input type="text" placeholder="First Name">
Last Name <input type="text" placeholder="Last Name">
</div>
</div>
<div class="section"><span>2</span>Contact Information
<div class="inner-wrap">
Email Address <input type="email" placeholder="Email Address">
Telephone Number <input type="number" placeholder="Phone Number">
</div>
</div>
<div class="section"><span>3</span>Visit Us
<div class="inner-wrap">
When do you plan on visiting?<input type="date" placeholder="Select a date">
</div>
</div>
<div class="section"><span>4</span>Stay Connected
<div class="inner-wrap">
Would you like to added to our email list?<br>
<input type="radio" name="emailblast" value="Yes"> Yes! I would love to be connected with Hopewell!
<input type="radio" name="emailblast" value="No"> No. I am not interested.</label>
</div>
</div>
<div class="button-section">
<input type="submit">
</div>
</form>
</div>
</div>
</body></html>
Thanks everyone for the input. I was able to get it to work by using the following code.
<script src="jquery-3.0.0.min.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-
1.4.5.min.js"></script>
<style>
.pop-outer{
background-color: rgba(0,0,0,0.5);
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
}
.pop-inner{
background-color: #fff;
width: 500px;
height: 500px;
padding: 25px;
margin: 15% auto;
}
</style>
<script>
$("document").ready(function(){
$(".pop-outer").fadeIn('normal');
$(".close").click(function(event){
event.preventDefault();
$(".pop-outer").hide();
});
});
</script>
<body>
<div class="pop-outer">
<div class="pop-inner ui-btn-icon-notext ui-btn-right">
<button class="close">X</button>
<form action="visitor.php" method="post">
<div class="section"><span>1</span>Basic Information
<div class="inner-wrap ">
First Name <input type="text" placeholder="First Name">
Last Name <input type="text" placeholder="Last Name">
</div>
</div>
<div class="section"><span>2</span>Contact Information
<div class="inner-wrap">
Email Address <input type="email" placeholder="Email Address">
Telephone Number <input type="number" placeholder="Phone Number">
</div>
</div>
<div class="section"><span>3</span>Visit Us
<div class="inner-wrap">
When do you plan on visiting?<input type="date" placeholder="Select a date">
</div>
</div>
<div class="section"><span>4</span>Stay Connected
<div class="inner-wrap">
Would you like to added to our email list?<br>
<input type="radio" name="emailblast" value="Yes"> Yes! I would love to be connected with Hopewell!
<input type="radio" name="emailblast" value="No"> No. I am not interested.</label>
</div>
</div>
<div class="button-section">
<input type="submit">
</div>
</form>
</div>
</div>

Failed to Produce Result in Html5 and CSS?

Here is my html code and css code but i am failed to format this code all textboxes should align vertically but its not giving me proper result.Can someone please help me to correct this code:
<div id="wrapper" class="wrapperClass">
<fieldset>
<legend class="regLagendClass">Registration Form</legend>
<form id="registrationForm" method="Post" action="https://www.google.com.pk/">
<div class="divClass">
<label for="firstName" class="labelClass">First Name:</label>
<input type="text" name="fName" class="textboxClass" id="firstName" placeholder="Your First Name"/>
</div>
<div class="divClass">
<label for="lastName" class="labelClass">Last Name:</label>
<input type="text" name="lName" id="lastName" class="textboxClass" placeholder="Your Last Name"/><br>
</div>
<div class="divClass">
<label for="userName" class="labelClass">User Name:</label><br>
<input type="text" name="userName" id="userName" class="textboxClass" placeholder="Your User Name" required/><br>
</div>
<div class="divClass">
<label for="password" class="labelClass">Password:</label><br>
<input type="password" id="password" name="password" class="textboxClass" placeholder="Type Password" required/><br>
</div>
<div class="divClass">
<label for="cPassword" class="labelClass">Confirm Password:</label><br>
<input type="password" id="cPassword" name="cPassword" class="textboxClass" placeholder="Retype Password"/><br>
</div>
<div class="divClass">
<label for="gender" class="labelClass">Choose Gender:</label>
<select name="gender" class="textboxClass">
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class="divClass">
<label class="labelClass" for="dob">Date of Birth:</label><br>
<input type="datetime" id="dob" class="textboxClass" placeholder="Your Date of Birth"/><br>
</div>
<div class="divClass">
<label for="country" class="labelClass">Country:</label><br>
<input type="text" id="country" class="textboxClass"/><br>
</div>
<div class="divClass">
<input type="submit" value="Sign Up">
</div>
</form>
</fieldset>
</div>
CSS:
.wrapperClass
{
width:650px;
height: 700px;
margin-left: 300px;
margin-right: 300px;
}
.divClass
{
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
}
.labelClass
{
width: 75px;
display: inline;
}
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
margin-left: 100px;
display: inline;
}
My code should work as this image :
Check this out http://jsfiddle.net/kabeer182010/gd4Xe/.
If you just replace 'display: inline' with 'display: inline-block' and remove all <br> tags this works fine.
display: inline
causes your element to become wrappable. The width and height properties are disregarded in this context. If you do want to use them, you basically want a boxed display. You can either use block (which can not flow next to eachother) or inline-block (which can).
So basically change your last 2 CSS classes to:
.labelClass
{
width: 75px;
display: inline-block;
}
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
margin-left: 100px;
display: inline-block;
}
Give .textboxClass a float right
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
display: inline;
float:right;
}
Should do the trick

Categories

Resources