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>
Related
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>
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.
So the input in the form has the id "fname" and when i press submit, the function values() try to store the value in a var but it doesn't.
var fname = "sss";
function values() {
fname = document.getElementById("fname").value;
}
<form action="javascript:values()" method="GET">
<fieldset>
<legend>Personal Informations</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname">
</fieldset>
<input type="submit" class="formbtn">
</form>
<script src="javascript/cv_script.js"></script>
I have no idea why it's not working.
I have a proof that calling the function is working
and there is no errors like (can't store null value)
any solutions would be great
Thank you for your help!
here is the whole code↓
<!DOCTYPE html>
<html>
<head>
<title>Information Page</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/general.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
fieldset {
border: 2px solid #007bff88;
border-radius: 7px;
width: 800px;
margin-top: 10px;
padding: 8px;
}
legend {
width: auto;
margin-left: 7px;
font-size: 14px;
}
select, textarea {
background: none;
border: 1px solid #007bff;
}
.formbtn {
background: #007bff;
color: #fff;
border-radius: 5px;
margin: 8px;
}
</style>
</head>
<body>
<nav>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
</nav>
<form action="javascript:values()" method="GET">
<fieldset>
<legend>Personal Informations</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname">
<br><br>
<label for="lname">Last Name:</label>
<input type="text" id="lname">
<br><br>
<label for="address">Address:</label>
<input type="text" id="address">
<br><br>
<label for="mobile">Mobile Number:</label>
<input type="text" id="mobile">
<br><br>
<label for="birth">Birthday:</label>
<input type="date" id="birth">
<br><br>
<label for="gen">Gender:</label>
<select name="gender" id="gen">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</fieldset>
<fieldset>
<legend>Education & Hobbies</legend>
<label for="level">Educational Level:</label>
<input type="text" id="level">
<br><br>
<label for="place">University/School Name:</label>
<input type="text" id="place">
<br><br>
<label for="sec">Section:</label>
<input type="text" id="sec">
<br><br>
<label>Hobbies & More:</label>
<br>
<textarea id="hobbies" cols="40" rows="4"></textarea>
</fieldset>
<input type="submit" class="formbtn">
<input type="reset" class="formbtn">
</form>
<script src="javascript/cv_script.js"></script>
</body>
</html>
I have a form which is using CSS to "reveal" some additional options if a radio button is selected.
This works fine but on mobile, the additional options cover the submit button and the text is hard to read.
the HTML form:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>MooWoos Stall Booking</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--build:css css/styles.min.css-->
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/style.css">
<!--endbuild-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<a class="logo"><img src="assets/logo_opt.png"></a>
</nav>
<hr>
<div class="modal fade" id="redirect_page" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 bookingform">
<h1>Stall Booking Form</h1>
<p class="lead">
Fill out the form to book and pay for your stall!
</p>
<form id="bookingForm">
<div class="form-group">
<label for="name">Name </label>
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
</div>
<div class="form-group">
<label for="address">Address </label>
<textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea>
</div>
<div class="form-group">
<label for="phone">Telephone Number </label>
<input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/>
</div>
<div class="form-group">
<label for="email">Email </label>
<input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/>
</div>
<div class="form-group">
<label for="date">Which date would you like to book? </label>
<p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p>
<p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
</div>
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail? </label>
<input type="radio" id=c-rail-yes name="c-rail" value="Yes" /> Yes
<input type="radio" id=c-rail-no name="c-rail" value="No" /> No
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
<label for="insurance">Do you have Public Liability Insurance?</label>
<input type="radio" id="insurance-yes" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
<input type="radio" id="insurance-no" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
</div>
</div>
</div>
<input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>
<p></p>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © MooWoos 2018. Booking Form by Luke Brewerton</p>
</div>
</div>
</footer>
</div>
<!--build:js js/mwbookings-min.js -->
<script src="js/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.serialize-object.min.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
</body>
</html>
The radio buttons stallType group are the ones, using the CSS class reveal-if-active on the labels and require-if-active on the form inputs.
CSS:
.reveal-if-active {
opacity: 0;
max-height: 0;
overflow: hidden;
transform: scale(0.8);
transition: 0.5s;
input[type="radio"]:checked ~ &,
input[type="checkbox"]:checked ~ & {
opacity: 1;
max-height: 100px;
overflow: visible;
padding: 10px 20px;
transform: scale(1);
}
}
My JS file:
var $form = $('form#bookingForm'),
url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'
function disableAll() {
$('#c-rail-yes').attr('required', false).attr('disabled', true);
$('#c-rail-no').attr('required', false).attr('disabled', true);
$('#craftName').attr('required', false).attr('disabled', true);
$('#bizName').attr('required', false).attr('disabled', true);
$('#insurance-yes').attr('required', false).attr('disabled', true);
$('#insurance-no').attr('required', false).attr('disabled', true);
}
$('#stallType-Preloved').change(function () {
if(this.checked) {
disableAll();
$('#c-rail-yes').attr('required', true).attr('disabled', false);
$('#c-rail-no').attr('required', true).attr('disabled', false);
}
});
$('#stallType-Craft').change(function () {
if(this.checked) {
disableAll();
$('#craftName').attr('required', true).attr('disabled', false);
}
});
$('#stallType-Business').change(function () {
if(this.checked) {
disableAll();
$('#bizName').attr('required', true).attr('disabled', false);
$('#insurance-yes').attr('required', true).attr('disabled', false);
$('#insurance-no').attr('required', true).attr('disabled', false);
}
});
$('#submit-form').on('click', function(e) {
var valid = this.form.checkValidity();
if (valid) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
dataType: "json",
data: $form.serializeObject(),
success: function () {
$('#redirect_page').modal('show');
window.setTimeout(function () {
location.reload()
}, 3000);
}
});
}
});
Would this be better done via jQuery? If so, how?
Replace those nonsensical max-height declarations for height:0 and height:auto.
.reveal-if-active {
opacity: 0;
height:0;
overflow: hidden;
transform: scale(0.8);
transition: 0.5s;
input[type="radio"]:checked ~ &,
input[type="checkbox"]:checked ~ & {
opacity: 1;
height:auto;
overflow: visible;
padding: 10px 20px;
transform: scale(1);
}
}
The jquery function required is as follows
HTML
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail? </label>
<input type="radio" id=c-rail-yes name="c-rail" value="Yes" /> Yes
<input type="radio" id=c-rail-no name="c-rail" value="No" /> No
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
<label for="insurance">Do you have Public Liability Insurance?</label>
<input type="radio" id="insurance-yes" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
<input type="radio" id="insurance-no" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
</div>
</div>
</div>
jQuery
$(document ).ready(function() {
$("input:radio[name='stallType']").change(function (e) {
$(".reveal-if-active").hide();
$(e.currentTarget).parent().find(".reveal-if-active").show();
});
});
Codepen link for reference
https://codepen.io/YasirKamdar/pen/vpMayq
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