JS appendChild is not appending anything - javascript

I'm trying to get something to append, but it's not working, and I can't seem to find what is wrong in my code.
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: Inter;
src: url(fonts/Inter-Black.ttf);
}
body{
background-color: darkred;
font-family: Inter;
}
button, input, select {
background-color: red;
border-style: solid;
border-color: black;
border-radius: 5px;
font-family: Inter;
width: 10vw;
height: 4vw;
transition: width 1s;
}
button:hover {
background-color: #e60000;
width: 13vw;
}
#setalarm {
background-color: #4d0000;
width: 85vw;
height:25vw;
border-radius: 10px;
}
input:hover, select:hover {
height: 6vw;
}
input, select {
transition: height 1s;
}
.alarmset:hover {
width: 50vw;
}
</style>
</head>
<body>
<h1>Alarms</h1>
<p>There are no alarms set currently.</p>
<button onclick="seeandcompletealarm()">Set Alarm</button>
<br>
<br>
<div style="width: 40vw; height: 10vw; background-color: #380000; border-radius: 5px;"><div><h1>Name</h1> <p>Des cript fdgdfgdf.</p> <p>0:00 AM</p></div></div>
<div id="setalarm" style="display: none;">
<input placeholder="Name" value="" id="name">
<input placeholder="Description (Optional)" value="" style="width: 10vw;" id="des">
<input placeholder="Hour" value="" maxlength="2" id="hr">
<input placeholder="Minute" value="" maxlength="2" id="me">
<select>
<option>Once</option>
<option>Repetitive</option>
</select>
<input placeholder="Minute" value="" type="date" id="date" style="width: 15vw;">
<select id="ampm">
<option>AM</option>
<option>PM</option>
</select>
<select>
<option>Sunday</option>
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
</select>
<br>
<br>
<button onclick="seeandcompletealarm(), setAlarm()">Set</button>
<script>
function seeandcompletealarm() {
if (document.getElementById('setalarm').style.display == "none") {
document.getElementById('setalarm').style.display = "block";
document.getElementById('des').value = "";
document.getElementById('nam').value = "";
document.getElementById('hr').value = "";
document.getElementById('ne').value = "";
} else {
document.getElementById('setalarm').style.display = "none";
var newalarm = document.createElement("DIV");
newalarm.innerHTML = `<div style="width: 40vw; height: 10vw; background-color: #380000; border-radius: 5px;" class="alarmset"><div><h1>${document.getElementById('nam').value}</h1> <p>${document.getElementById('des').value}</p><p>${document.getElementById('hr').value}:${document.getElementById('me').value} ${document.getElementById('ampm').value}</p></div></div>`;
document.body.appendChild(newalarm)
}
}
</script>
</div>
</body>
</html>
You might see some unnecessary code in there, like the styling and #ids, because this is pasted from my project.
If you see the thing that says "Name" in big text "Des cript fdgdfgdf." in shorter text, and "0:00 AM", when you press the button that says "Set" which is visible when you press the Set Alarm button, it is suppose to append another one of those things with the values you have put in the in the input, it is suppose to look the same just with what you have typed. It use to be working before but now it's not, please show me how this can be fixed.

First we can read the error message and try to understand what it says:
Cannot set property 'value' of null
So once detected the proper location of the bug, we can determine that it's caused because the script can't access the property value of a null element.
In fact, this happens because neither document.getElementById('ne') nor document.getElementById('nam') can be found in the current HTML, which, by default, will become null.
So in order to fix it, place the proper id you want to change value. In this case, I can say you meant "me" instead of "ne" and "name" instead of "nam". Also, you placed "nam" in the else when creating a new alarm.
<!DOCTYPE html>
<html>
<head>
<style>
#font-face {
font-family: Inter;
src: url(fonts/Inter-Black.ttf);
}
body{
background-color: darkred;
font-family: Inter;
}
button, input, select {
background-color: red;
border-style: solid;
border-color: black;
border-radius: 5px;
font-family: Inter;
width: 10vw;
height: 4vw;
transition: width 1s;
}
button:hover {
background-color: #e60000;
width: 13vw;
}
#setalarm {
background-color: #4d0000;
width: 85vw;
height:25vw;
border-radius: 10px;
}
input:hover, select:hover {
height: 6vw;
}
input, select {
transition: height 1s;
}
.alarmset:hover {
width: 50vw;
}
</style>
</head>
<body>
<h1>Alarms</h1>
<p>There are no alarms set currently.</p>
<button onclick="seeandcompletealarm()">Set Alarm</button>
<br>
<br>
<div style="width: 40vw; height: 10vw; background-color: #380000; border-radius: 5px;"><div><h1>Name</h1> <p>Des cript fdgdfgdf.</p> <p>0:00 AM</p></div></div>
<div id="setalarm" style="display: none;">
<input placeholder="Name" value="" id="name">
<input placeholder="Description (Optional)" value="" style="width: 10vw;" id="des">
<input placeholder="Hour" value="" maxlength="2" id="hr">
<input placeholder="Minute" value="" maxlength="2" id="me">
<select>
<option>Once</option>
<option>Repetitive</option>
</select>
<input placeholder="Minute" value="" type="date" id="date" style="width: 15vw;">
<select id="ampm">
<option>AM</option>
<option>PM</option>
</select>
<select>
<option>Sunday</option>
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
</select>
<br>
<br>
<button onclick="seeandcompletealarm(), setAlarm()">Set</button>
<script>
function seeandcompletealarm() {
if (document.getElementById('setalarm').style.display == "none") {
document.getElementById('setalarm').style.display = "block";
document.getElementById('des').value = "";
document.getElementById('name').value = ""; // <-- ERROR WAS IN THIS LINE
document.getElementById('hr').value = "";
document.getElementById('me').value = ""; // <-- ERROR WAS IN THIS LINE
} else {
document.getElementById('setalarm').style.display = "none";
var newalarm = document.createElement("DIV");
newalarm.innerHTML = `<div style="width: 40vw; height: 10vw; background-color: #380000; border-radius: 5px;" class="alarmset"><div><h1>${document.getElementById('name').value}</h1> <p>${document.getElementById('des').value}</p><p>${document.getElementById('hr').value}:${document.getElementById('me').value} ${document.getElementById('ampm').value}</p></div></div>`;
document.body.appendChild(newalarm)
}
}
</script>
</div>
</body>
</html>

Related

How do I keep adding the values of my input fields into another tag

I am trying to get the values from the two input boxes below the "Welcome to Discussion Portal" i.e. input boxes with the ids "textarea_text" and "id2"
and put these values on the left side two made tags i.e. h2 tag and p tag with the ids "addh2_in_col1" and "addp_in_col1"
The values are getting added but,
the problem is that they keep getting updated every time i click the submit button.
I want all the the values keep getting added to there
Here is my code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<style>
#h1a{
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,121,120,1) 37%, rgba(0,212,255,1) 100%);
color: white;
}
button{
background-color: #0099ff;
height: 48px;
width: 200px;
}
#id1{
height: 45px;
width: 200px;
}
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 300px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
textarea{
width: 250px;
height: 100px;
}
</style>
<script>
function function2(){
var a = document.getElementById('id2').value;
document.getElementById("addh2_in_col1").innerHTML = a;
var b = document.getElementById('textarea_text').value;
document.getElementById('addp_in_col1').innerHTML = b;
}
</script>
<div class="row">
<h1 id="h1a">Discussion Portal</h1>
<div class="column">
<button>New Question Form</button> <input id="id1" type="text" placeholder="search questions..." ><br>
<div class="div-2">
<h2 id='addh2_in_col1'></h2>
<p id='addp_in_col1'></p>
</div>
</div>
<div class="column">
<h1>Welcome to Discussion Portal</h1>
<p>Enter a subject and question to get started</p><br>
<input id="id2" type="text" placeholder="subject" ><br><br><br>
<textarea id="textarea_text" placeholder="Question"></textarea><br>
<input type="submit" value="Submit" onclick="function2()">
</div>
</div>
</body>
</html>```
You replaced your variable each time you clicked. I made it with array and plus
function function2(){
let a = []
let b = []
a.push(document.getElementById('id2').value);
a.forEach((item) => {
const para = document.createElement("h2");
para.innerHTML += item;
document.getElementById("div-2").appendChild(para);
})
b.push(document.getElementById('textarea_text').value);
b.forEach((item) => {
const para = document.createElement("p");
para.innerHTML += item;
document.getElementById("div-2").appendChild(para);
})
}
#h1a{
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,121,120,1) 37%, rgba(0,212,255,1) 100%);
color: white;
}
button{
background-color: #0099ff;
height: 48px;
width: 200px;
}
#id1{
height: 45px;
width: 200px;
}
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 300px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
textarea{
width: 250px;
height: 100px;
}
<div class="row">
<h1 id="h1a">Discussion Portal</h1>
<div class="column">
<button>New Question Form</button> <input id="id1" type="text" placeholder="search questions..." ><br>
<div class="div-2" id="div-2">
<h2 id='addh2_in_col1'></h2>
<p id='addp_in_col1'></p>
</div>
</div>
<div class="column">
<h1>Welcome to Discussion Portal</h1>
<p>Enter a subject and question to get started</p><br>
<input id="id2" type="text" placeholder="subject" ><br><br><br>
<textarea id="textarea_text" placeholder="Question"></textarea><br>
<input type="submit" value="Submit" onclick="function2()">
</div>
</div>

Is there any other way to declaring addEventListener one time and using it without re-declaring?

I currently practicing HTML/CSS/DOM(JS) and more focusing on DOM right now. For now, I try to clone the instagram for studying HTML/CSS/DOM. In the DOM part(js), when I try to use event(EventListener), I am curious that "If the other project or Website need so many EventListener,Do I have to declare name.addEventListener("event name", function()) every-time? Can I declare the EventListener at the body or wrapper(div-class) and using event.target, so I don't need to be declared EventListener several times?" I am sorry if I explain so weird and messy. I tried to explain my brain storming thought. I will share my code just in case
This is HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
Westagram!
</title>
<link rel="stylesheet" href="style/login.css" type="text/css">
<link rel="stylesheet" href="style/common.css" type="text/css">
<!-- <link rel="stylesheet" href="js/login.js"> -->
</head>
<body>
<!-- 아래 모든 div들을 포함하는 제일 상위 Container -->
<div class="wrapper">
<div class="logo">
<p class="westagram">Westagram</p>
</div>
<!-- 로그인 섹션 -->
<div class="login-container">
<div class="id">
<input type="text" id="text" placeholder="Phone number, username, or email" />
</div>
<div class="pw">
<input type="password" id="password" placeholder="Password">
</div>
<div class="bt">
<button class="login-btn">Log in
</button>
</div>
</div>
<!-- 비밀번호 찾는 섹션 -->
<div class="click">
<a class="find-password">Forgot Password</a>
</div>
</div>
<script src="js/login.js"></script>
</html>
This is CSS file
*{
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
#font-face {
font-family: instagramFont;
src: url("../src/westagram.ttf") format("opentype");
}
.wrapper {
margin: 250px 250px 0px 250px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
border: solid 1px #D3D3D3;
width: 500px;
height: 500px;
}
.wrapper .login-container {
width: 400px;
height: 500px;
}
.wrapper .login-container .id{
margin-top: 70px;
}
#text {
width: 100%;
height: 45px;
border: solid 1px #D3D3D3;
border-radius: 5px;
padding-left: 15px;
}
#password {
width: 100%;
height: 45px;
border: solid 1px #D3D3D3;
border-radius: 5px;
padding-left: 15px;
}
.wrapper .login-container .bt .login-btn{
width: 100%;
height: 45px;
border: solid 1px #D3D3D3;
border-radius: 5px;
/*background-color: #ff000;*/
background-color: #B2DFFC;
cursor: pointer;
/*padding-left: 15px;*/
}
.wrapper .login-container .pw {
margin-top: 10px;
margin-bottom: 10px;
}
.wrapper .login-container.bt {
}
.westagram {
font-size : 60%;
font-family: instagramFont;
font-size: 5rem;
}
This is JS code
let id = document.querySelector("#text");
let password = document.querySelector("#password");
let loginButton = document.querySelector(".login-btn")
function active() {
if(id.value.length > 0 && password.value.length > 0){
loginButton.style.backgroundColor='#0095F6';
} else {
loginButton.style.backgroundColor='#B2DFFC'
}
}
id.addEventListener("keyup", active)
password.addEventListener("keyup", active)
I really appreciate your help in advance!
Can you add one event listener? Yes. It is event delegation. You use the target and you do checks to see if it is the element. Multiple ways to check if the element is the same. You can use is(), you can check a class/id/attribute or you can see if the elements match a reference
document.body.addEventListener("input", function (evt) {
const target = evt.target;
if (target.closest('#inp1, #inp2')) {
console.log(target.value);
}
});
<input type="text" id="inp1" class="loginInput" />
<input type="text" id="inp2" class="loginInput" />
document.body.addEventListener("input", function (evt) {
const target = evt.target;
if (target.classList.contains("loginInput")) {
console.log(target.value);
}
});
<input type="text" id="inp1" class="loginInput" />
<input type="text" id="inp2" class="loginInput" />
var inp1 = document.querySelector("#inp1");
var inp2 = document.querySelector("#inp2");
document.body.addEventListener("input", function(evt) {
const target = evt.target;
if (target === inp1 || target === inp2) {
console.log(target.value);
}
});
<input type="text" id="inp1" class="loginInput" />
<input type="text" id="inp2" class="loginInput" />
In the inputs are in the same container, you might not even care what input it is. Just bind the event listener to the parent. Any action inside of it will be picked up.
document.querySelector('#login').addEventListener("input", function(evt) {
const target = evt.target;
console.log(target.value);
});
<form id="login">
<input type="text" id="inp1" class="loginInput" />
<input type="text" id="inp2" class="loginInput" />
</form>
You can write a function to prevent repeating exactly the same event listeners:
function eventHandler(event, func, target ){
return target.addEventListener(event, func);
}
eventHandler("keyup", active, id);

How to change the color of a specific box when it isn't filled out correctly

I'm trying to create checks to validate the input of a user, such as whether he filled it out and is it the correct input. I want it to highlight the fields that contain an error.
I already asked and I was told to create a class however I don't know how to do that.
There is also
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Form Validation</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles/styles.css">
<link rel="stylesheet" type="text/css" href="styles/forms.css">
<script type="text/javascript">
window.onload=init;
var form;
function init() {
form = document.getElementById('testform');
form.addEventListener("submit", checkSubmit, false);
form.addEventListener("reset", checkReset, false);
form['colour'].addEventListener("change", checkSubmit, false);
form['name'].focus();
}
String.prototype.trim=function() {
return this.replace(/^\s+1\s+$/g, '');
}
function whichButton(name) {
var buttons=document.getElementsByName(name);
for (var i in buttons) {
if(buttons[i].checked) return buttons[i].value
}
return false;
}
function showOtherColour() {
document.getElementById('othercolour').style.visibility=
form['colour'].value=='other' ? 'visible' : 'hidden';
}
function checkSubmit() {
error = new Array();
//Fill the array with the error value
form['name'].value=form['name'].value.trim();
form['email'].value=form['email'].value.trim();
form['town'].value=form['town'].value.trim();
form['state'].value=form['state'].value.trim();
form['postcode'].value=form['postcode'].value.trim();
form['dob'].value=form['dob'].value.trim();
form['height'].value=form['height'].value.trim();
//Check required fields
if(!form['name'].value)
error.push('Missing Name');
if(!form['email'].value)
error.push('Missing Email Address');
if(!form['password'].value)
error.push('Missing Password');
//Check valid email address
var pattern=/^[a-zA-Z0-9._%-]+#[a-zA-Z0-9.-]+(\.[a-zA-Z]{2,4})$/;
if(!form['email'].value.match(pattern))
error.push('Invalid Email Address');
//Check State
//Check Post Code has 4 digits
var pattern=/^\d{4}$/;
if(!form['postcode'].value.match(pattern))
error.push('Invalid Post Code');
//Check password matches confirmation
//var password = ;
/*
if(!form['passwordConfirm'].value.match(password)){
error.push("Passwords don't match");
}*/
console.log(form['confirm'].value);
console.log(form['password'].value);
if(!form['confirm'].value.match(form['password'].value)){
error.push('Passwords do not match');
}
//passwords is too short
if (!form['password'].value.length < 4) {
error.push("Password is too short (Minimum 4 characters)");
}
//height is not a number
if (isNaN(Number(form['height'].value))) {
error.push("Height is not a number");
}
//Check that one Gender item is selected
if(whichButton('gender')===false)
error.push('Please choose a Gender');
//Check that "Other" field is filled
if (!form['colour'].value ||
(form['colour'].value=='other' && !form['othercolour'].value))
error.push('Colour is not selected');
if(error.length) { // if there are errors
alert(error.join("\n"))
return false;
}
else return true;
//return confirm("This will submit the form"); //Temporary placeholder
}
function checkReset() {
return confirm("This will clear the form data");
}
</script>
<style type="text/css">
body,td,th {
font-size: 0.9em;
}
</style>
</head>
<body>
<div id="body">
<h1>Form Validation</h1>
<form action="http://test.miform.net" method="post" id="testform">
<fieldset>
<label>Name<br><input type="text" name="name" class="wide"></label>
<label>Email Address<br><input type="text" name="email" class="wide"></label>
</fieldset>
<fieldset>
<label>Address<br><input type="text" name="street" class="wide"></label>
<label>Town<br><input type="text" name="town" class="narrow"></label>
<label>State<br><input type="text" name="state" class="narrow"></label>
<label>PostCode<br><input type="text" name="postcode" class="narrow"></label>
</fieldset>
<fieldset>
<label>Password<br><input type="password" name="password" class="medium"></label>
<label>Confirm Password<br><input type="password" name="confirm" class="medium"></label>
</fieldset>
<fieldset>
<label>Date of Birth<br><input type="text" name="dob" class="medium"></label>
<label>Height<br><input type="text" name="height" class="medium"></label>
</fieldset>
<fieldset>
<legend>Gender</legend>
<label><input type="radio" name="gender" value="f">Female</label>
<label><input type="radio" name="gender" value="m">Male</label>
</fieldset>
<fieldset>
<label>Colour
<select name="colour">
<option value="">Select...</option>
<option value="black">Black</option>
<option value="white">White</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="cyan">Cyan</option>
<option value="magenta">Magenta</option>
<option value="yellow">Yellow</option>
<option value="other">Other</option>
</select>
</label>
<input type="text" id="othercolour">
</fieldset>
<input type="reset" name="reset" value="Clear Form">
<input type="submit" name="send" value="Send Off">
</form>
</div>
</body>
</html>
The CSS (form.css):
body {
font-family: sans-serif;
font-size: .9em;
}
form {
width: 26em;
}
label {
font-weight: bold;
float: left;
}
input.wide {
padding: .125em;
width: 25.125em;
}
input.medium {
padding: .125em;
width: 12em;
}
input.narrow {
padding: .125em;
width: 8em;
}
#othercolour {
visibility: hidden;
}
The style.css
body {
font-family: sans-serif;
font-size: .9em;
background-color: rgb(166, 183, 183);
color: black;
}
div#body {
width: 30em;
margin: auto;
padding: 1em 2em;
background-image: url(background.png);
background-repeat: repeat-x;
background-color: rgb(224, 230, 230);
}
h1,h2 {
color: rgb(47, 79, 79);
}
h2 {
margin: .25em 0em .25em 0em;
}
a {
text-decoration: none;
color: rgb(132, 156, 156);
color: white;
font-weight: bold;
}
a:hover {
color: yellow;
}
td, th {
vertical-align: top;
text-align: left;
}
img {
border: 0px;
}
p, .clear {
qclear: both;
}
#catalog {
float: left;
width: 50%;
}
#content {
float: right;
width: 46%;
}
#cart {
border: 1px solid #cccccc;
padding: 0em .5em;
}
#cart form {
display: inline;
}
#cart input.text {
width: 2em;
text-align: right;
}
#welcome {
}
#navigation {
}
#navigation span {
color: rgb(131, 155, 155);
}
#navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
#navigation li {
float: left;
background-color: pink;
border-bottom: solid 1px;
}
#navigation li a {
display: block;
width: 8em;
text-decoration: none;
font-weight: bold;
text-align: center;
padding: .25em;
background-color: rgb(97, 124, 124);
}
#navigation li a:hover {
background-color: rgb(47, 79, 79);
}
You can set the input's CSS border-color property to highlight the field.
var input = document.querySelector('input'),
form = document.querySelector('form');
form.addEventListener('submit', function(e){
e.preventDefault();
if(!input.value.trim()){//if value of input is empty
input.style.borderColor = "red";
} else {
input.style.borderColor = "green";
}
});
<form>
<input placeholder="Enter something">
<br/>
<button>Validate</button>
</form>
If you use the HTML5 validation attributes, then all you’ll need is to set up a CSS rule using the :invalid pseudo class:
:invalid { . . . }
To add a class, use JavaScript's classList.add() function.
Example
function check() {
var element = document.getElementById("input");
if (element.value != "") {
document.write("Valid!");
} else {
element.classList.add("invalid");
}
}
.invalid {
background-color: rgba(255,0,0,.7);
color: white;
}
.invalid::placeholder {
color: white;
}
<input type="text" placeholder="Type Something..." id="input">
<button onclick="check();">Check</button>

Change image when radio button checked

I am building a form to measure carpets dimension. In the form there is radio button which user can choose type of carpet. I want to make when the radio button checked, the image of the carpet change based on the selected radio button.
1st image : radio button to choose carpet size
2nd image: carpet change based on selected radio button
Below is the code:
<form class="carpet-detail text-center container">
<p class="text-center">Upload your carpet’s photo here :</p>
<div class="upload-carpet">
<div id="image-preview">
<input id="image-upload" name="image" type="file">
</div>
<label for="image-upload" id="image-label">Choose File</label>
</div>
<p class="carpet-name">Carpet 1</p>
<p>Choose your carpet shape :</p>
<div class="carpet-shape">
<div class="choose-carpet">
<input checked class="radio-shape" id="carpet-shape-1" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-1">Rectangular</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-2" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-2">Square</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-3" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-3">Round</label>
</div>
<div class="choose-carpet">
<input class="radio-shape" id="carpet-shape-4" name="carpet-shape" type="radio"> <label class="choose-shape" for="carpet-shape-4">Oval</label>
</div>
</div>
<p>Please insert your carpet size :</p>
<img alt="carpet rectangle" class="carpet-icon" height="116" src="img/icons/carpet-rectangle.svg" width="194">
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Width :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-width">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-width" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-width">
<img src="img/icons/size-plus.svg" alt="minus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
<div class="grid-x grid-padding-x carpet-size">
<div class="small-6 cell text-left">
<p>Length :</p>
</div>
<div class="small-6 cell text-right">
<p>/sqft</p>
</div>
<div class="small-12 cell">
<div class="input-group plus-minus-input">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="minus" data-field="quantity-length">
<img src="img/icons/size-minus.svg" alt="minus" width="11" height="11">
</button>
</div>
<input class="input-group-field" type="number" name="quantity-length" value="0">
<div class="input-group-button">
<button type="button" class="button circle" data-quantity="plus" data-field="quantity-length">
<img src="img/icons/size-plus.svg" alt="plus" width="11" height="11">
</button>
</div>
</div>
</div>
</div>
</form>
You can use the jquery's .change event to do this.
First assign the attribute valueto the radios.
<input class="radio-shape" value="Square" id="carpet-shape-2" name="carpet-shape" type="radio">
Then use the change following juery to trigger the event.
$('input:radio[name="carpet-shape"]').change(
function(){
var $src = "";
if ($(this).val() == 'Square') {
$src = "img/icons/carpet-square.svg";
}
else if ($(this).val() == 'Rectangle') {
$src = "img/icons/carpet-rectangle.svg";
}
else if ($(this).val() == 'Round') {
$src = "img/icons/carpet-round.svg";
}
else{
$src = "img/icons/carpet-oval.svg"
}
$('.carpet-icon').attr('src',$src);
});
Here is a full working jsfiddle
For more information on change event, checkout the jQuery documentation on it.
You just need a JavaScript or jQuery event listener.
//jQuery version
$('#radio1').on('click', function() {
$('#image1').attr('src', 'myNewImage.jpg');
});
//Vanilla JavaScript
document.getElementById('radio1').addEventListener('click', null,
function() {
document.getElementsById('radio1').setAttribute('src', 'myNewImage.jpg');
});
You'd obviously need to add one for each radio button.
You can change the image by using CSS selectors like ~ , +.
By this method, if the checkbox is checked we can select the siblings by using the ~, + selector.
Then we can apply the styles to the selected siblings.
Here I have given the code snippet and working demo.
CSS CODE
.output-shape {
width: 200px;
}
//Square
#square ~ .output-shape{
width: 200px;
}
//Rectangle
#rectangle:checked ~ .output-shape{
width: 280px;
}
//Circle
#circle:checked ~ .output-shape{
border-radius: 50%;
width: 200px;
}
HTML CODE
// Input Field
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
// Label Field
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
// OUTPUT
<div class="output-shape"></div>
Working DEMO
body, html {
font-family: sans-serif;
}
.box-overlay {
background-color: coral;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.box-content {
background-color: #fff;
max-width: 600px;
text-align: center;
border-radius: 15px;
min-height: 350px;
padding: 15px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.output-shape {
width: 200px;
height: 200px;
background-color: white;
border: 1px solid gray;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
}
input {
display: none;
}
label {
padding: 10px;
border: 1px solid gray;
display: inline-block;
border-radius: 5px;
text-transform: uppercase;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
margin-right: 5px;
}
.option-name {
font-size: 20px;
margin-left: 10px;
margin-right: 10px;
text-transform: uppercase;
}
/* Circle */
label[for="circle"] {
color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-content [for="circle"] {
color: #fff;
background-color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name{
color: dodgerblue;
}
#circle:checked ~ .box-content .output .option-name:before{
content:"Circle" !important;
}
#circle:checked ~ .box-content .output .output-shape{
border-radius: 50%;
background-color: dodgerblue;
border-color: dodgerblue;
}
#circle:checked ~ .box-overlay {
background-color: dodgerblue !important;
}
/* Rectangle */
label[for="rectangle"] {
color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-content [for="rectangle"] {
color: #fff;
background-color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name{
color: darkorange;
}
#rectangle:checked ~ .box-content .output .option-name:before{
content:"rectangle" !important;
}
#rectangle:checked ~ .box-content .output .output-shape{
width: 280px;
background-color: darkorange;
border-color: darkorange;
}
#rectangle:checked ~ .box-overlay {
background-color: darkorange !important;
}
/* Square */
label[for="square"] {
color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-content [for="square"] {
color: #fff;
background-color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name{
color: #3FBB76;
}
#square:checked ~ .box-content .output .option-name:before{
content:"square" !important;
}
#square:checked ~ .box-content .output .output-shape{
background-color: #3FBB76;
border-color: #3FBB76;
}
#square:checked ~ .box-overlay {
background-color: #3FBB76 !important;
}
.box-overlay, .output-shape, .option-name:before {
transition: all linear 0.50s;
-webkit-transition: all linear 0.50s;
-o-transition: all linear 0.50s;
-moz-transition: all linear 0.50s;
}
#media (max-width: 768px) {
.box-content {
margin-top: 20px;
}
}
#media (min-width: 769px) {
body, html {
/* height: 100%;*/
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>CSS Shape transition </title>
</head>
<body>
<div class="box">
<input type="radio" name="radio" id="circle" checked>
<input type="radio" name="radio" id="rectangle">
<input type="radio" name="radio" id="square">
<div class="box-content">
<label for="circle">circle</label>
<label for="rectangle">Rectangle</label>
<label for="square">square</label>
<h4 class="output">
You have selected
<div class="output-shape"></div>
<span class="option-name"></span>
</h4>
</div>
<div class="box-overlay"></div>
</div>
</body>
</html>
Note: To achieve this input element need to present above to the image element.
first you need to see which radio input was checked and then perform some changes on the icon image to show the desired image : I believe you are looking for something like the code below, I haven't tested it so you may
want to tweak it a little bit..
$('.carpet-detail').on('click', 'input', changeImage);
// delegate the the listening to the form so you don't have
// to listen to every radio button, then filter only radio
function changeImage(evt){
// create a function that can receive the event object by
// providing a parameter
var imageId = evt.target.id;
// store the id of the target element in var
switch(imageId){
// a simple switch statement to see which radio was checked
case 'carpet-shape-2':
$('.carpet-icon').attr("src","carpet-shape-2.jpg");
break;
// set the correct image for the chosen radio
case 'carpet-shape-3':
$('.carpet-icon').attr("src","carpet-shape-3.jpg");
break;
case 'carpet-shape-4':
$('.carpet-icon').attr("src","carpet-shape-4.jpg");
default:
$('.carpet-icon').attr("src","default-image.jpg");
}
}

Putting a label beside HTML component

I have a text input. I put a label with a red star to highlight that that input is required in the form submission.
What I did is
<html>
<head>
</script>
<style type="text/css">
input[required] + label {
color: #999;
font-family: Arial;
font-size: 17px;
position: relative;
/*left: -230px; the negative of the input width */
}
input[required] + label:after {
content:'*';
color: red;
}
/* show the placeholder when input has no content (no content = invalid) */
input[required]:invalid + label {
display: inline-block;
}
/* hide the placeholder when input has some text typed in */
input[required]:valid + label{
display: none;
}
</style>
</head>
<body>
<form name="registerForm" action="submit_page.php" method="post">
<div class="form_box">
<div class="input_box ">
<input maxlength="60" type="text" name="name" id="name" required="required" />
<label for="name">Name</label>
<div id="name-error" class="error-box"></div>
</div>
<div class="clear"></div>
</div>
</form>
</div>
</body>
It works for the text input.
I did the same thing for <select <select/>.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style type="text/css">
#header { background-color:green; color:white; text-align:center; padding:5px;}
#background {background: url(register_background.png);}
body {
background-color: #cccccc;
}
.star { color: red;}
.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer;}
.button2:hover { box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);}
select[required] + label {
color: #999;
font-family: Arial;
font-size: 17px;
position: relative;
/*left: -230px; the negative of the input width */
}
select[required] + label:after {
content:'*';
color: red;
}
/* show the placeholder when input has no content (no content = invalid) */
select[required]:invalid + label {
display: inline-block;
}
/* hide the placeholder when input has some text typed in */
select[required]:valid + label{
display: none;
}
</style>
</head>
<body>
<div id="header">
<h1>Please add your property to advertise</h1>
</div>
<div id="background">
<form name="advertiseForm" method="post">
<br /><br />
<select name="divs_states">
<option value="divsORstates" >Divisions or States</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
required="required"
<select/>
<label for="divs_states">Please select a region</label>
<div id="divs_states-error" class="error-box"></div>
</form>
</div>
</body>
</html>
But I don't see a red star. Then when I make a selection, the text doesn't disappear.
What should be is if the selection is Divisions or States, the label Please select a region together with a red star should appear. In case, I select saab, fiat, audi, the text should disappear.
How can I do that?
Thanks
EDIT:
<select name="divs_states" required="required"/>
<option value="divsORstates" >Divisions or States</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
<select/>
<label for="divs_states">Please select a region</label>
<div id="divs_states-error" class="error-box"></div>
The reason for your problem is that you're using the same selector from your input label for your select label.
You have this on both:
input[required] + label:after {
content:'*';
color: red;
}
But in your select form the HTML is different. It needs to be this instead:
select[name] + label:after {
content:'*';
color: red;
}
A little too much cut and paste, perhaps? ;-)
Also note that your closing </select> tag is incorrect, and you have required="required" misplaced in the element (ah, there it is). It should be in the opening <select> tag. In fact, consider running your code through the W3C HTML Validation Service to check for errors.

Categories