Input doesn't have value to store in a var - javascript

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>

Related

how to use preventDefault() for specified form fields?

I have a task to use preventDefault() on a form I created before using HTML and CSS. I am not sure how to use preventDefault() and how to use it only for the fields my task asks.
The fields which need to go through the preventDefault() process are name, email address, address and postcode, the 'keep me informed' box is not checked.
form{
background-color: rgb(190, 231, 190);
padding: 5pt;
margin: 0 auto;
width:30%;
border: 1pt solid black;
}
legend{
background-color: rgb(134, 97, 28);
margin: auto;
padding-inline: 20%;
padding-top: 2pt;
padding-bottom: 2pt;
color: white;
}
fieldset{
padding: 10pt;
}
#p1, #p3{
background-color: white;
padding: 5pt;
}
#p3{
padding-left: 30%;
padding-right: 25%;
}
#p3 input{
background-color: rgb(134, 97, 28);
border-radius: 7pt;
color: white;
padding: 5pt;
width: 75pt;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Topic 4, Exercise 4 (Miguel Divo)</title>
</head>
<body>
<form>
<fieldset>
<legend>Shirt Order Form</legend>
<p>
<label>Shirt Size</label>
</p>
<p>
<select name="shirt_size" >
<option>Choose Size</option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
</p>
<p>
<label>Sleeves</label>
</p>
<p>
<input type="radio" name="sleeve" value="1" >Short<br>
<input type="radio" name="sleeve" value="2" >Long<br>
</p>
<p>
<label>Choose Shirt Colour</label>
</p>
<p>
<input type="color" name="colourChoice" >
</p>
<p>
<label>Quantity</label>
</p>
<p>
<input type="number" name="quantity" >
</p>
<p>
<label>Date Requested</label>
</p>
<p>
<input type="date" name="date" >
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Name</label>
</p>
<p>
<input type="text" name="name" >
</p>
<p>
<label>Email</label>
</p>
<p>
<input type="email" name="email" >
</p>
<p>Telephone Number</p>
<p>
<input type="text" name="phone"
pattern="[4]{2}[-][0-9]{3}[-][0-9]{3}[-][0-9]{4}" > Example: 44-207-882-1234
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Address</label>
</p>
<p>
<input type="text" name="address" >
</p>
<p>
<label>City</label>
</p>
<p>
<input type="text" name="city" list="cities" >
<datalist id="cities">
<option>Birmingham</option>
<option>Glasgow</option>
<option>London</option>
<option>Manchester</option>
</datalist>
</input>
</p>
<p>
<label>Postcode</label>
</p>
<p>
<input type="text" name="postcode" >
</p>
</fieldset>
<br>
<p id="p1">
Please keep me informed about future shirt designs<input type="checkbox" name="accept">
</p>
<p id="p3">
<input type="submit">
<input type="reset" value="Clear Form">
</p>
</form>
<script src="preventDefault.js"></script>
</body>
</html>
If you want to prevent form submission using preventDefault when the specific fields are not filled out
window.addEventListener("load", function() {
const orderForm = document.getElementById("orderForm")
orderForm.addEventListener("submit", function(event) {
if (orderForm.querySelector("[name=accept]").checked) {
const valid = ["name", "email", "address", "address", "postcode"]
.filter(fieldName => orderForm.querySelector("[name=" + fieldName + "]").value === "").length === 0; // count empty
if (!valid) {
console.log("empty fields")
event.preventDefault()
}
}
})
})
form {
background-color: rgb(190, 231, 190);
padding: 5pt;
margin: 0 auto;
width: 30%;
border: 1pt solid black;
}
legend {
background-color: rgb(134, 97, 28);
margin: auto;
padding-inline: 20%;
padding-top: 2pt;
padding-bottom: 2pt;
color: white;
}
fieldset {
padding: 10pt;
}
#p1,
#p3 {
background-color: white;
padding: 5pt;
}
#p3 {
padding-left: 30%;
padding-right: 25%;
}
#p3 input {
background-color: rgb(134, 97, 28);
border-radius: 7pt;
color: white;
padding: 5pt;
width: 75pt;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Topic 4, Exercise 4 (Miguel Divo)</title>
</head>
<body>
<form id="orderForm">
<fieldset>
<legend>Shirt Order Form</legend>
<p>
<label>Shirt Size</label>
</p>
<p>
<select name="shirt_size">
<option>Choose Size</option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
</p>
<p>
<label>Sleeves</label>
</p>
<p>
<input type="radio" name="sleeve" value="1">Short<br>
<input type="radio" name="sleeve" value="2">Long<br>
</p>
<p>
<label>Choose Shirt Colour</label>
</p>
<p>
<input type="color" name="colourChoice">
</p>
<p>
<label>Quantity</label>
</p>
<p>
<input type="number" name="quantity">
</p>
<p>
<label>Date Requested</label>
</p>
<p>
<input type="date" name="date">
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Name</label>
</p>
<p>
<input type="text" name="name">
</p>
<p>
<label>Email</label>
</p>
<p>
<input type="email" name="email">
</p>
<p>Telephone Number</p>
<p>
<input type="text" name="phone" pattern="[4]{2}[-][0-9]{3}[-][0-9]{3}[-][0-9]{4}"> Example: 44-207-882-1234
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Address</label>
</p>
<p>
<input type="text" name="address">
</p>
<p>
<label>City</label>
</p>
<p>
<input type="text" name="city" list="cities">
<datalist id="cities">
<option>Birmingham</option>
<option>Glasgow</option>
<option>London</option>
<option>Manchester</option>
</datalist>
</input>
</p>
<p>
<label>Postcode</label>
</p>
<p>
<input type="text" name="postcode">
</p>
</fieldset>
<br>
<p id="p1">
Please keep me informed about future shirt designs<input type="checkbox" name="accept">
</p>
<p id="p3">
<input type="submit">
<input type="reset" value="Clear Form">
</p>
</form>
<script src="preventDefault.js"></script>
</body>
</html>
this can also be achieved by simply adding required on each of the tags in question
window.addEventListener("load", function() {
const orderForm = document.getElementById("orderForm")
orderForm.querySelector("[name=accept]").addEventListener("change", function() {
const req = this.checked;
["name", "email", "address", "address", "postcode"].forEach(fieldName =>
orderForm.querySelector("[name=" + fieldName + "]").required = req);
})
})
form {
background-color: rgb(190, 231, 190);
padding: 5pt;
margin: 0 auto;
width: 30%;
border: 1pt solid black;
}
legend {
background-color: rgb(134, 97, 28);
margin: auto;
padding-inline: 20%;
padding-top: 2pt;
padding-bottom: 2pt;
color: white;
}
fieldset {
padding: 10pt;
}
#p1,
#p3 {
background-color: white;
padding: 5pt;
}
#p3 {
padding-left: 30%;
padding-right: 25%;
}
#p3 input {
background-color: rgb(134, 97, 28);
border-radius: 7pt;
color: white;
padding: 5pt;
width: 75pt;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Topic 4, Exercise 4 (Miguel Divo)</title>
</head>
<body>
<form id="orderForm">
<fieldset>
<legend>Shirt Order Form</legend>
<p>
<label>Shirt Size</label>
</p>
<p>
<select name="shirt_size">
<option>Choose Size</option>
<option>XS</option>
<option>S</option>
<option>M</option>
<option>L</option>
<option>XL</option>
</select>
</p>
<p>
<label>Sleeves</label>
</p>
<p>
<input type="radio" name="sleeve" value="1">Short<br>
<input type="radio" name="sleeve" value="2">Long<br>
</p>
<p>
<label>Choose Shirt Colour</label>
</p>
<p>
<input type="color" name="colourChoice">
</p>
<p>
<label>Quantity</label>
</p>
<p>
<input type="number" name="quantity">
</p>
<p>
<label>Date Requested</label>
</p>
<p>
<input type="date" name="date">
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Name</label>
</p>
<p>
<input type="text" name="name">
</p>
<p>
<label>Email</label>
</p>
<p>
<input type="email" name="email">
</p>
<p>Telephone Number</p>
<p>
<input type="text" name="phone" pattern="[4]{2}[-][0-9]{3}[-][0-9]{3}[-][0-9]{4}"> Example: 44-207-882-1234
</p>
</fieldset>
<br>
<fieldset>
<p>
<label>Address</label>
</p>
<p>
<input type="text" name="address">
</p>
<p>
<label>City</label>
</p>
<p>
<input type="text" name="city" list="cities">
<datalist id="cities">
<option>Birmingham</option>
<option>Glasgow</option>
<option>London</option>
<option>Manchester</option>
</datalist>
</input>
</p>
<p>
<label>Postcode</label>
</p>
<p>
<input type="text" name="postcode">
</p>
</fieldset>
<br>
<p id="p1">
Please keep me informed about future shirt designs<input type="checkbox" name="accept">
</p>
<p id="p3">
<input type="submit">
<input type="reset" value="Clear Form">
</p>
</form>
<script src="preventDefault.js"></script>
</body>
</html>
you can do this:
<html>
<head>
<title>ejemplo de preventDefault</title>
<script type="text/javascript">
function stopDefAction(evt) {
evt.preventDefault();
}
</script>
</head>
<body>
<p>click on the box.</p>
<form>
<input type="checkbox" onclick="stopDefAction(event);"/>
<label for="checkbox">Select</label>
</form>
</body>
</html>
reference: https://developer.mozilla.org/es/docs/Web/API/Event/preventDefault

bootstrap jQuery field not align and formated

I am making a form which will have 3 inputs (firstname , lastname and email). There should be an option to add additional groups of inputs.
The 3 fields and button should be a single line and properly arranged. However, they are appearing one below another. not sure where's the mistake.
This is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Customer Query</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
//group add limit
var maxGroup = 5;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
</script>
</head>
<body>
<form method="post" action="submit.php" style="widows: 500px; margin:auto">
<div class="form-group fieldGroup">
<div class="input-group">
<input type="text" name="FirstName[]" class="form-control" placeholder="Enter First Name" size="10"/>
<input type="text" name="LastName[]" class="form-control" placeholder="Enter Last Name" size="10"/>
<input type="text" name="Email[]" class="form-control" placeholder="Enter Email" size="10"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />
</form>
<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<input type="text" name="FirstName[]" class="form-control" placeholder="Enter First Name" size="10"/>
<input type="text" name="LastName[]" class="form-control" placeholder="Enter Last Name" size="10"/>
<input type="text" name="Email[]" class="form-control" placeholder="Enter Email" size="10"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
</div>
</div>
</body>
</html>
any help would be great
I was able to fix the problem. sharing the code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>L</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
//group add limit
var maxGroup = 5;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
</script>
<style>
form {
padding: 40px 40px 30px !important;
background: #ebeff2;
}
.mt32 {
margin-top: 32px;
}
</style>
</head>
<body>
<div class="container">
<h2 class="mt32"> Customer Query</h2>
<form class="form-inline mt32" action="#">
<div class="form-group fieldGroup">
<div class="input-group">
<label for="FirstName">FirstName</label>
<input type="text" class="form-control" id="FirstName"
placeholder="FirstName">
<label for="LastName">LastName</label>
<input type="text" class="form-control" id="LastName"
placeholder="LastName">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Your email">
<div class="input-group-addon">
<a href="javascript:void(0)" class="btn btn-success addMore"><span
class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add</a>
</div>
<br/>
<br/>
</div>
</div>
</form>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group">
<label for="FirstName">FirstName</label>
<input type="text" class="form-control" id="FirstName"
placeholder="FirstName">
<label for="LastName">LastName</label>
<input type="text" class="form-control" id="LastName"
placeholder="LastName">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Your email">
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
<br/>
<br/>
</div>
</div>
</div>
</body>
</html>
It can be done using form-inline.
Refer bootstrap link : https://getbootstrap.com/docs/4.0/components/forms/

Javascript validation form not working with HTML

I am required to complete an assignment that shows basic Javascript form processing. The objective is to have a "details.html" page which checks that all input fields are valid (e.g. Names are all text). I have tried to complete both documents but they just don't seem to be linking correctly:
Nothing is triggering the "validateForm()" function, and any input just passes through on submission, what have I done wrong?
function validateForm() {
var firstname = document.getElementById("fName").value;
var lastname = document.getElementById("lName").value;
var email = document.getElementById("email").value;
var address = document.getElementById("address").value;
var postCode = document.getElementById("pCode").value;
var accepted = document.getElementById("accept").checked;
var allLetters = /^[a-zA-z]+$/i;
var allNumbers = /^[0-9]+$/;
var validEmail = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var validAddress = new RegExp(allNumbers.source + "|" + allLetters.source);
if (address.match(validAddress) && firstname.match(allLetters) && lastname.match(allLetters) && email.match(validEmail) && address != "" && postCode.match(allNumbers) && accepted) {
return true;
} else {
window.alert("Error! Invalid input in form. Please try again.");
return false;
}
}
.header {
background-color: tomato;
color: white;
padding: 2px;
}
.focusPage {
width: 70%;
margin-left: auto;
margin-right: auto;
background-color: lightgrey;
min-height: 600px;
height: 600px;
height: auto !important;
}
.userDetails {
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: white;
border: 2px solid black;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
padding-top: 20px;
padding-bottom: 20px;
}
.inputs {
float: right;
direction: ltr;
margin-right: 5px;
}
.acceptTerms {
font-size: 15px;
font-family: "Times New Roman", Times, serif;
}
p {
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.thePage {
background-color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="someName" content="someContent">
<title> Home </title>
<script type="text/javascript" src="myScripts.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="thePage">
<div>
<div class="focusPage">
<div class="header">
<h1>Welcome user!</h1>
</div>
<p>This form will allow you to enter your personal details for storage in our database.</p>
<p>Be sure to read our User Agreement before submitting your details</p>
<ul class="userDetails">
<form class="userForm" onsubmit="validateForm()" method="post">
<li><label for="inputNames" required>First Name - </label>
<label for="inputs"><input type="text" class="inputs" id="fname" name="fname"></label></li>
<li><label for="inputNames">Last Name - </label>
<label for="inputs" required><input type="text" class="inputs" id="lname" name="lname"></li>
<li><label for="inputNames">Email - </label>
<label for="inputs" required><input type="email" class="inputs" id="email" name="email"></li>
<li><label for="inputNames">Address number - </label>
<label for="inputs" required><input type="text" class="inputs" id="address" name="address"></li>
<li><label for="inputNames">Post code - </label>
<label for="inputs" required><input type="text" class="inputs" id="pCode" name="pCode"></li>
<li><label for="inputNames">Additional Detail - </label></li>
<textarea rows="5" cols="50" class="textfield" placeholder="Add detail here..."></textarea>
<div class="agreement">
<input type="checkbox"> <label class="acceptTerms" id="accept">I Accept the User Agreement</label>
</div>
<input type="submit" value="Submit">
</form>
</ul>
</div>
</div>
</body>
</html>
JS: you have mentioned wrong IDs, remember they are case sensitive.
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
HTML: You have mentioned required in label tag which won't work, add it to input tag.
<form class="userForm" onsubmit="validateForm()">
<li><label for="inputNames" >First Name - </label>
<label for="inputs"><input type="text" class="inputs" id="fname" name="fname" required></label></li>
<li><label for="inputNames">Last Name - </label>
<label for="inputs" ><input type="text" class="inputs" id="lname" name="lname" required></li>
<li><label for="inputNames">Email - </label>
<label for="inputs" ><input type="email" class="inputs" id="email" name="email" required></li>
<li><label for="inputNames">Address number - </label>
<label for="inputs" ><input type="text" class="inputs" id="address" name="address" required></li>
<li><label for="inputNames">Post code - </label>
<label for="inputs" ><input type="text" class="inputs" id="pCode" name="pCode" required></li>
<li><label for="inputNames">Additional Detail - </label></li>
<textarea rows="5" cols="50" class="textfield" placeholder="Add detail here..."></textarea>
<div class="agreement">
<input type="checkbox" required> <label class="acceptTerms" id="accept">I Accept the User Agreement</label>
</div>
<input type="submit" value="Submit">
</form>

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>

How to disable all checkboxes on load, and enable them one by one as file is selected to upload?

just need to disable the checkboxes on page load and enable them as the user selects a file to upload. For example, image is selected by user to upload for desktop so the sizes for desktop get enabled. Probably with javascript.
<html>
<head>
<title>Wallpaper Uploading Script</title>
<style type="text/css">
.formatting{
font-family: Arial;
font-size: .8em;
}
label{
display: block;
float: left;
width: 150px;
padding: 0 0px;
margin: 0 0px 0;
text-align: right;
}
form input, form textarea{
margin: 2px 0 2px 2px;
}
.checkbox{
text-align: left;
display: block;
padding: 2px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body class="formatting">
<p>Select a file to Upload: </p>
<form action="../php/get_uploaded_wall.php" method="POST" enctype="multipart/form-data">
<fieldset>
<label for="wall_name">Wall Name:</label>
<input type="text" name="wall_name" size="50" /><br />
<label for="thumbnail_path">Thumbnail path:</label>
<input type="file" name="thumbnail_path" size="100" /><br />
<label for="desktop_path">Desktop path:</label>
<input id="desktop_path" type="file" name="desktop_path" size="100" /><br />
<label for="phone_path">Phone path:</label>
<input type="file" name="phone_path" size="100" /><br />
<label for="tablet_path">Tablet path:</label>
<input type="file" name="tablet_path" size="100" /><br />
<label for="desktop_dimension_id">Desktop dimensions:</label>
<label class="checkbox" id="desktop_checkbox">
<input type="checkbox" name="1366x768"> 1366x768<br />
<input type="checkbox" name="1280x800"> 1280x800<br />
<input type="checkbox" name="1920x1080"> 1920x1080<br />
<span></span>
</label>
<label for="phone_dimensions_id">Phone dimensions:</label>
<label class="checkbox" id="phone_checkbox">
<input type="checkbox" name="640x960"> 640x960<br />
<input type="checkbox" name="640x1136"> 640x1136<br />
<input type="checkbox" name="960x720"> 960x720<br />
</label>
<label for="tablet_dimensions_id" id="tablet_checkbox">Tablet dimensions:</label>
<label class="checkbox">
<input type="checkbox" name="1024x768"> 1024x768<br />
<input type="checkbox" name="2048x1536"> 2048x1536<br />
</label>
</fieldset>
<br />
<fieldset>
<input type="submit" value="Upload Wall" />
<input type="reset" value="Clear" />
</fieldset>
</form>
</body>
</html>
Here is my solution. You can view it here in Jfiddle.
The javascript I used relies on jQuery. You can see it below:
$(window).ready( function () {
$('.desktopCB').attr('disabled', '');
$('.phoneD').attr('disabled', '');
$('.tabletD').attr('disabled', '');
});
$('#desktop_path').on('change', function () {
$('.desktopCB').removeAttr('disabled');
});
$('input[name=phone_path]').on('change', function () {
$('.phoneD').removeAttr('disabled');
});
$('input[name=tablet_path]').on('change', function () {
$('.tabletD').removeAttr('disabled');
});

Categories

Resources