Putting a label beside HTML component - javascript

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.

Related

JS appendChild is not appending anything

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>

Web: how to redirect to a CodePen or JsFiddle with information filled?

I am writing a Js parser, which has contents of three files: HTML, JS and CSS. following code is an example of my JS variables:
var html = '<div class="box"></div>';
var css = '.box{height: 200px; width: 200px; background-colour:red;}';
var js = 'window.alert("Here we go!");'
CodePen and JsFiddle are most commonly used online IDE. I wonder if I can redirect to either of the page, with HTML CSS JS text areas filled with my variable, so the user will be able to edit the code themselves.
I am not sure if it's tangible. I will be glad if someone point a direction.
I do appreciate for your help.
Try the following (retrieved from https://docs.jsfiddle.net/api/display-a-fiddle-from-post):
body { font-family: Helvetica, Tahoma; }
h2 { font-size: 1.5em; margin-bottom: 10px; display: block;}
p { margin-bottom: 15px; display: block; font-size: 0.8em; }
label { font-weight: bold; }
textarea, input[type=text] {
padding: 3px 5px;
width: 80%;
display: block;
border: 1px solid #ddd;
margin-bottom: 5px;
}
textarea { height: 70px; }
<h2>Load a fiddle based on the POST variables</h2>
<form method='post' action='http://jsfiddle.net/api/post/mootools/1.3/dependencies/more/' target='check'>
<p><input type='submit'/> - fiddle will be loaded in different browser window/tab.</p>
<select name="panel_html">
<option value="0">HTML</option>
</select>
<textarea name='html'><p class="red">It's magic!</p>
<p>Documentation</p></textarea>
<select name="panel_js">
<option value="0">JavaScript</option>
<option value="1">CoffeeScript</option>
<option value="2">JavaScript 1.7</option>
</select>
<textarea name='js'>window.addEvent('domready', function() {
$$('p.red').each(function(el) {
el.setStyle('color', '#00ff00');
});
});</textarea>
<select name="panel_css">
<option value="0">CSS</option>
<option value="1">SCSS</option>
</select>
<textarea name='css'>p {font-family: Helvetica, Arial; }</textarea>
<label>Title:</label>
<input type='text' name='title' value='some title'/>
<label>Description:</label>
<textarea name='description'>descr</textarea>
<label>Resources (comma separated, no spaces):</label>
<textarea name='resources'>http://abc.it/xyz.js</textarea>
<label>DTD:</label>
<input type='text' name='dtd' value='html 4'/>
<label>Wrap (l/d/h/b)</label>
<input type='text' name='wrap' value='l'/>
</form>
Have also a look at the linked fiddle: http://jsfiddle.net/3Lwgk4c5/

Style for a selectbox CSS and HTML

Somebody just helped me to remove the outline of my selectbox (from my first bootstrap-django project)
Now, i wanted to ask for your help to change the border color property of the options box itself, which is blue, and i'm trying to make it yellow.
Also, for some reason when the select box has the default value, its border is yellow but after you select one of the options, it becomes darker, and i would like it to be darker from the beggining.
Here is my CSS:
.selector{
outline:none;
position:absolute;
border-radius:1rem;
margin-left:260px;
width:500px;
border-color: #C9C9C9;
height:35px;
font-size: 15px;
text-align-last: center;
color:#C9C9C9;
}
.selector:focus{
border-color:#FFD700;
box-shadow: 0 0 8px #FFD700;
}
And my HTML:
<div class="div1">
<label for="estado" class="label1">
Estado
<select class="selector" id="estado" name="estado" onchange="functionfs()" style="border-color: #C9C9C9; ">
<option style="color:black" selected="selected" value="-----">--- Ingrese un valor ---</option>
<option value="Activo" style="color:black;">Activo</option>
<option value="Inactivo" style="color:black;">Inactivo</option>
</select>
</label>
</div>
And my JS:
<script type="text/javascript">
var selector = document.getElementById("estado");
function functionfs(valor) {
selector.setAttribute("style", "color:black;");
}
</script>
I will also attach 2 images of the problem itself.
As you can see, when i select one of the two states and click it again, it becomes darker.
Thanks everyone!
Here is the solution of your darker and glowing problem:
Code selector class
. selector {
outline: none;
position: absolute;
border-radius: 1rem;
margin-left: 260px;
width: 500px;
height: 35px;
font-size: 15px;
text-align-last: center;
color: #000000;
border-color: #FFD700 !important;
box-shadow: 0 0 8px #FFD700;
}
While blue border cannot be changed as it is render by operating system
You can see here

div changes its margins when select option is changed

$('#seltags').change(function() {
var obj = $('#' + $(this).val());
$('.txtags').hide();
obj.show();
});
.seltags {
display: block;
padding: 1px 7px;
width: 100%;
}
.txtags {
display: block;
width: 100%;
padding: 5px 9px;
outline: none;
border: 1px solid #999;
border-radius: 9px;
resize: none;
overflow-y: scroll;
margin-top: 13px;
text-transform: uppercase;
}
.tagsimg {
display: none;
}
.divbottom {
height: 14px;
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>
<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>
<div class='divbottom'></div>
divbottom gets a top margin (about five pixels) when seltags is changed to second option, and lose that margin when it is returned to the first option.
Can anyone help me what's wrong here?
Thank you.
The margin appears because when the select box is changed and the second option is chosen, the text area that was hidden now gets display: inline-block; to show it, and the offset from being hidden causes the margin jump.
Try adding vertical-align: middle; to the styles of the .txtags class element.
$('#seltags').change(function() {
var obj = $('#' + $(this).val());
$('.txtags').hide();
obj.show();
});
.seltags {
display: inline-block;
padding: 1px 7px;
width: 100%;
}
.txtags {
display: inline-block;
width: 100%;
padding: 5px 9px;
outline: none;
border: 1px solid #999;
border-radius: 9px;
resize: none;
overflow-y: scroll;
margin-top: 13px;
text-transform: uppercase;
vertical-align: middle;
}
.tagsimg {
display: none;
}
.divbottom {
height: 14px;
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>
<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>
<div class='divbottom'></div>
The margin appears because when the second option is chosen, the #tagsimg element gets display: inline-block inline style.
In order to remove this margin, you need to add vertical-align: middle to the styles of the #tagsimg element or find out why the display: inline-block is added and change that.
You can read why jQuery does it, and how to avoid it in this StackOverflow question: jQuery .show() adds style="display:inline-block" to elements
it's not a margin, it's the textarea ( .txtags ) that you show and hide that pushes it down a bit necause when shown it gets display:inline-block ,
add .obj.show().css({'display': 'block'}); so both textareas behave the same
$('#seltags').change(function(){
var obj = $('#' + $(this).val());
$('.txtags').hide();
obj.show().css({'display': 'block'});
});
.seltags{
display:block;
padding:1px 7px;
width:100%;
}
.txtags{
display:block;
width:100%;
padding:5px 9px;
outline:none;
border:1px solid #999;
border-radius:9px;
resize:none;
overflow-y:scroll;
margin-top:13px;
text-transform:uppercase;
}
.tagsimg{
display:none;
}
.divbottom{
height:14px;
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>
<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>
<div class='divbottom'></div>
I'm not sure why, but the div.divbottom is not getting any margin or padding at all. The problem is that when you show the .tagsimg it is getting display: inline-block instead of just block which is the initial state of .txtags. Making .tagsimg be hidden by jQuery instead of starting with display:none makes jQuery change it to display:inline-block when shown which fix it.
$('#seltags').change(function(){
var obj = $('#' + $(this).val());
$('.txtags').hide();
obj.show();
});
$('.tagsimg').hide();
.seltags{
display:block;
padding:1px 7px;
width:100%;
}
.txtags{
display:block;
width:100%;
padding:5px 9px;
outline:none;
border:1px solid #999;
border-radius:9px;
resize:none;
overflow-y:scroll;
margin-top:13px;
text-transform:uppercase;
}
.tagsimg{
display:block;
}
.divbottom{
height:14px;
background:gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>
<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags tagsimg' id='tagsimg' rows="5"></textarea>
<div class='divbottom'></div>
both textareas should be either inline-block or block its the mixture of two which is causing the behavior
Your 1st textarea is displayed as a block.
But the trick here is that when you make your 2nd textarea appear, it appears as an inline-block.
I suggest you to use inline-block or delete the property.
Here is a working snippet with some other comments:
// Optimized function
$('#seltags').change(function() {
$('.txtags').hide();
$('#' + $(this).val()).show();
});
.seltags {
display: block;
padding: 1px 7px;
width: 100%;
}
.txtags {
/* display: inline-block; /* Here is what I changed! */
width: 100%;
padding: 5px 9px;
outline: none;
border: 1px solid #999;
border-radius: 9px;
resize: none;
overflow-y: scroll;
margin-top: 13px;
text-transform: uppercase;
}
.hidden { /* Changed name */
display: none;
}
.divbottom {
height: 14px;
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='seltags' id='seltags'>
<option value='tagsart'>TAGS ARTICLES</option>
<option value='tagsimg'>TAGS IMAGES</option>
</select>
<textarea class='txtags' id='tagsart' rows="5"></textarea>
<textarea class='txtags hidden' id='tagsimg' rows="5"></textarea>
<div class='divbottom'></div>
On a side note, I don't understand why your 2nd textarea appear as inline-block.
Here is an extract of show() documentation:
“The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css( "display", "block" ), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.”
(link: http://api.jquery.com/show/)

Toggle a hidden div when a particular dropdown option is either selected or de-selected

I was able to find an example on stackoverflow to do what I wanted. However, when I implement it in my code and select the option that the will display a hidden div, the hidden div would not appear and not sure why.
HTML:
<td class="mm1" width="40%">
<br />
<ul>
<li>
<label for="name">Please select a company below:</label>
<select class="selectmenu" id="select">
<option selected disabled class="hideoption">Please select one company</option>
<option value="0">RMG</option>
<option value="1">LMG</option>
<option value="2">CSC</option>
<option value="3">ADOC</option>
</select>
<div id="hidden_div" style="color:#B9B9B9; display:none">
If ADOC-does<br />position support UCMG?<br />
<input type="checkbox" /> YES <input type="checkbox" /> NO
</div>
</li>
</ul></td>
CSS:
/*Simple Dropdown box*/
.selectmenu{
font-family: arial, sans-serif, tahoma;
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /* Removes Default Firefox style*/
background: white;
width: 80px; /*Width of select dropdown to give space for arrow image*/
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/
color: black;
border-radius: 2px;
padding: 5px;
border:0 !important;
box-shadow: inset 0 0 1px rgba(000,000,000, 0.5);
font-size: 1.2em;
}
Javascript:
$(function() {
$('#select').change(function(){
if ($(this).val() == "3") {
$('#hidden_div').show();
} else {
$('#hidden_div').hide();
}
});
});
I tried your code. It is working. Maybe try some alternatives. Use .css() function of jQuery to change the display from none to block and vice versa.
$(function() {
$('#select').change(function(){
if ($(this).val() == "3") {
$('#hidden_div').css('display','block');
} else {
$('#hidden_div').css('display','none');
}
});
});
Here's a screenshot to prove that it works:
Hope this helps. Goodluck!

Categories