I've managed to make sure my editable DIV is underlined red when I load my page. Then when I enter text, it becomes white. So far, so good. When I clear the field though, either with a function or just simply deleting it (Backspace/delete), it remains white. How to I get it back to understanding that it's empty, and changing the class back once more when the text has been cleared?
CSS:
#Control1, #Control2, #Control3 {
background-image:url('img/underline_red.png');
}
#Control1:not([value=""]), #Control2:not([value=""]), #Control3:not([value=""]) {
background-image:url('img/underline.png');
}
HTML:
<div contentEditable=true id="Control1" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" value="">
</div>
<br>
<div contentEditable=true id="Control2" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" value="">
</div>
<br>
<div contentEditable=true id="Control3" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" value="">
</div>
<br>
<div id="border">
<div contentEditable=true id="note" spellcheck="false" onkeyup="this.setAttribute('value', this.value);" value="">
</div>
</div>
<br>
<button class="button" onclick="clearControl1('Control1'), clearControl2('Control2'), clearControl3('Control3'), clearNote('note')"/>Clear</button>
Javascript:
<script type='text/javascript'>
function clearNote(note)
{
document.getElementById(note).innerHTML = "";
}
function clearControl1(Control1)
{
document.getElementById(Control1).innerHTML = "";
}
function clearControl2(Control2)
{
document.getElementById(Control2).innerHTML = "";
}
function clearControl3(Control3)
{
document.getElementById(Control3).innerHTML = "";
}
</script>
Try that:
div:empty {
some stuff like color
}
Detaild information on Browser-Support here, where this snippet is from
https://css-tricks.com/almanac/selectors/e/empty/
in general, there are some css selectors doing help you react on advanced stuff like "the first" or "every second" etc..
Related
Do you think it's possible to retrieve a text from the localStorage and display it immediately without going through a button, like below?
<div class="container">
<h1 id="h1">Hello unknown ! </h1>
<label>Name: </label>
<input type="text" id="myName">
<input type="button" value="ok" onclick="btnStorage()">
</div>
function btnStorage(){
if(localStorage.getItem("myName") != null)
h1.textContent = `Hello ${localStorage.getItem("myName")}`;
localStorage.setItem("myName", myName.value)
}
Old but gold.
<body onload="btnStorage()"></body>
So I'm inspecting a website field where I can enter text. On most text boxes/fields, when you enter text, it will be saved as 'innerText' or as a value 'text', but this field doesn't save the string like that anywhere in html. This means I can't edit the text that is in that field.
Where would this string be stored, and how could I edit it using javascript?
<div id="mirror" class="mirror-text style-scope iron-autogrow-textarea" aria-hidden="false">sdslll </div>
<div class="textarea-container fit style-scope iron-autogrow-textarea">
<textarea id="textarea" class="style-scope iron-autogrow-textarea" rows="3" autocomplete="off" required="" maxlength="10000"></textarea>
</div>
As you can see, "mirror" holds the text I want to edit. But when I edit that, it doesn't take effect
<html>
<body>
<input id='in' type='text' />
<h3 id='out'></h3>
<script>
let input = document.getElementById('in');
let output = document.getElementById('out');
document.onkeyup = function () {
output.innerHTML = input.value;
};
</script>
</body>
</html>
<script>
window.onload = function () { setValue(); }
function setValue(){
document.getElementById("mirror").value = "Some value here";
}
</script>
<input id="mirror" class="mirror-text style-scope iron-autogrow-textarea" aria-hidden="false" value="sdslll ">
<div class="textarea-container fit style-scope iron-autogrow-textarea">
<textarea id="textarea" class="style-scope iron-autogrow-textarea" rows="3" autocomplete="off" required="" maxlength="10000"></textarea>
</div>
I want to show a short message besides a textarea once we click inside the textarea.
Here is the simple code that i need to modify :
<textarea id="txt" ></textarea>
and :
$('#txt').click(function(){
// what should i put here to show a dialogbox besides textarea ?
});
Here is a fiddle demo except that i need to put whatever i want as a message once we click inside textarea.
I am a complete newbie so please bear with me if i didn't put things the way it should. Thank you.
input, textarea, select {
display: block;
}
<form>
<p>Try submitting an empty form and one with invalid email addresses.</p>
<label for="one">One Email: </label><input type="email" id="one" required data-errormessage-value-missing="Something's missing" data-errormessage-type-mismatch="Invalid!">
<label for="another">Another Email: </label><input type="email" id="another" data-errormessage="Generic error message">
<label for="textarea">A textarea: </label><textarea id="textarea" required data-errormessage-value-missing="Add some text"></textarea>
<select required data-errormessage-value-missing="Please, pick one">
<option selected disabled value="">Pick one</option>
<option value="1">One</option>
</select>
<button>Submit</button>
</form>
You could do something like the following - and I would use focus rather than click . The following code adds the text message you need besides your textarea.
If you want to style the message with an arrow too, have a look at this: cssarrowplease.com
// show hidden message on focus
$('#txt').on('focus', function() {
$('#txt-message').show();
});
// hide hidden message on blur - optional extra
$('#txt').on('blur', function() {
$('#txt-message').hide();
});
/* start message hidden */
#txt-message {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="txt"></textarea>
<span id="txt-message">message here</span>
Add:
<span id='shortMessage'></span>
tag right after the textarea div.
Then replace your comment with:
$('#shortMessage').innerHTML('your message');
Hope this will help you .
$(document).ready(function() {
$('#textarea').click(function() {
$('#showMsgId').text("some message .......")
});
});
input,
textarea,
select {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<p>Try submitting an empty form and one with invalid email addresses.</p>
<label for="one">One Email:</label>
<input type="email" id="one" required data-errormessage-value-missing="Something's missing" data-errormessage-type-mismatch="Invalid!">
<label for="another">Another Email:</label>
<input type="email" id="another" data-errormessage="Generic error message">
<label for="textarea">A textarea:</label>
<div style="width: 100%; overflow: hidden;">
<textarea id="textarea" required data-errormessage-value-missing="Add some text" style="width: 200px; float: left;"></textarea>
<span id="showMsgId" style="margin-left: 10px;"></span>
</div>
<select required data-errormessage-value-missing="Please, pick one">
<option selected disabled value="">Pick one</option>
<option value="1">One</option>
</select>
<button>Submit</button>
</form>
Here is the fiddle for my non-JavaScript alternative.
Pete's answer works if you are satisfied with simply displaying text. If you need the info-box to look pretty and be displayed above the other elements then you will need something different like this:
CSS:
.cPopTable {
position: absolute;
top: 50px;
right: 200px;
background-color: #ffffff;
z-index: 10;
display:none;
}
.cContainer:active .cPopTable {
display:table;
}
HTML:
<div class="cContainer">
<textarea id="txt">Default text here</textarea>
<table class="cPopTable"><tr><td>message pop-up here</td></tr></table>
</div>
Also, the benefit is not using any JavaScript. In fact, unless you are worried about really old browsers you can easily handle all the tasks like these using CSS z-index and event-processing as shown in this example.
You can easily change the position and the way the box is displayed (font, background, etc.) by working with the cPopTable CSS.
So I've been looking around at code and seeing what is possible through javascript. I have a code that currently checks if a form has empty elements and denies it to be submitted if any are empty. The thing is I tried to add an alert if the elements were empty and an alert if the elements were not empty but it did not work. I don't seem to know enough about java script to go about editing it.
Here is the form. Ignore the weird class and div names, they are set that way because the form submits to a google doc spreadsheet.
<form class="quickemailform" action="https://docs.google.com/spreadsheet/formResponse?formkey=dGp3YUxCTGtWd251ZXVfOEtwc1hhWVE6MQ&ifq" method="post" target="hidden_iframe" onsubmit="submitted=true;" id="ss-form" name="frm1" onsubmit="InputChecker()">
<br>
<div class="errorbox-good">
<div class="ss-item ss-item-required ss-text">
<div class="ss-form-entry">
<label class="ss-q-title" for="entry_0">
<font class="formtitles">FULL NAME:</font>
</br>
<label class="ss-q-help" for="entry_0"></label>
<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0" size="42">
</div>
</div>
</div>
<div class="errorbox-good">
<div class="ss-item ss-item-required ss-text">
<div class="ss-form-entry">
<label class="ss-q-title" for="entry_1">
<font class="formtitles" id="compnam">COMPANY NAME:</font>
</br>
<label class="ss-q-help" for="entry_1"></label>
<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1" size="42">
</div>
</div>
</div>
<div class="errorbox-good">
<div class="ss-item ss-item-required ss-text">
<div class="ss-form-entry">
<label class="ss-q-title" for="entry_2">
<font class="formtitles" id="emailadd">EMAIL ADDRESS:</font>
<br>
<label class="ss-q-help" for="entry_2"></label>
<input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2" size="42">
</div>
</div>
</div>
<div class="errorbox-good">
<div class="ss-item ss-item-required ss-paragraph-text">
<div class="ss-form-entry">
<label class="ss-q-title" for="entry_3">
<font class="formtitles" id="request">Your Request:</font>
<font class="fineprint">( SUMMARIZE IMPORTANT DETAILS )</font>
<br>
</label>
<label class="ss-q-help" for="entry_3"></label>
<textarea name="entry.3.single" cols="32" rows="10" class="ss-q-long" id="entry_3"></textarea>
</div>
</div>
</div>
<input type="hidden" name="pageNumber" value="0">
<input type="hidden" name="backupCache" value="">
<div class="ss-item ss-navigate"><div class="ss-form-entry">
<input class="submitbuttons" type="submit" name="submit" value=" " src="" border="0" onclick="myFunction()" />
</div>
</div>
</form>
Here is the javascript that denies the form to be submitted if any fields are empty. I got this code online, I did not write it myself. It is tested and works but I want it to do more than just deny submission.
<script type="text/javascript">
(function() {
var divs = document.getElementById('ss-form').
getElementsByTagName('div');
var numDivs = divs.length;
for (var j = 0; j < numDivs; j++) {
if (divs[j].className == 'errorbox-bad') {
divs[j].lastChild.firstChild.lastChild.focus();
return;
}
}
for (var i = 0; i < numDivs; i++) {
var div = divs[i];
if (div.className == 'ss-form-entry' &&
div.firstChild &&
div.firstChild.className == 'ss-q-title') {
div.lastChild.focus();
return;
}
}
})();
</script>
If possible I want to know how I can add an alert for when the form is denied or accepted. Also if the form is denied I would like to have it so that I have something like
<font class="asterick" div="your_name_ast">*</font> or <font class="asterick" div="company_name_ast">*</font>
and have the asterick show up next to each empty element if the form is denied not submitted. Such as having the form check each element to be empty or not. If the script finds the element to be empty an alert would pop up saying "Form is not filled. Please look over all elements with a *." and then it would have the asterisk appear.
Thanks to anyone that has read this far.
EDIT: Doing some looking around more and it seems that alerts are considered bad practice. Is this true? Is there some other way I might go about letting users know if the elements are empty?
You could use jQuery Validate (or similar) like EdSF mention or you could just change the submit button into a regular button that when click it calls a function to validate your fields and if non are empty submit the form. I haven't tested the following code, but you get the idea.
function validateForm(){
var isValid = true;
var elements = document.getElementById('ss-form').getElementsByTagName('input');
for(var i=0; i < elements.length; i++){
if(elements[i].value.length < 1){
isValid = false;
}
}
if(isValid){
document.getElementById('ss-form').submit();
}
else {
alert('Please fill all required fields');
}
}
Using jQuery you could accomplish everything you want to do. jQuery is very easy to learn. Here is a sample of your code using jQuery:
This is a very minimal example of what you can do.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#entry_0').blur(function()
{
var Fullname = $(this).val();
$('#nameresult').css("display","none");
if(Fullname.length>0)
{
$('#nameresult').css("display","inline-block");
$('#nameresult').css("color","#00BB00");
$('#nameresult').html("Valid")
return true;
}
$('#nameresult').css("display","inline-block");
$('#nameresult').css("color","#ff0000");
$('#nameresult').html("Input Needed")
$(this).focus();
return;
});
$('#entry_1').blur(function()
{
var Companyname = $(this).val();
$('#companyresult').css("display","none");
if(Companyname.length>0)
{
$('#companyresult').css("display","inline-block");
$('#companyresult').css("color","#00BB00");
$('#companyresult').html("Valid")
return true;
}
$('#companyresult').css("display","inline-block");
$('#companyresult').css("color","#ff0000");
$('#companyresult').html("Input Needed")
$(this).focus();
return;
});
});
</script>
</head>
<body>
<form >
FULL NAME:<input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0" size="42">
<div id="nameresult" style="display: none;"></div>
<br>
COMPANY NAME:<input type="text" name="entry.1.single" value="" class="ss-q-short" id="entry_1" size="42">
<div id="companyresult" style="display:none;"></div>
<br>
EMAIL ADDRESS:<input type="text" name="entry.2.single" value="" class="ss-q-short" id="entry_2" size="42"><br>
Your Request:<textarea name="entry.3.single" cols="32" rows="10" class="ss-q-long" id="entry_3"></textarea><br><br>
<input class="submitbuttons" type="submit" name="submit" value="SUBMIT" src="" border="0" />
</form>
</body>
</html>
Please forgive the code formatting, I typed it up very quickly.
Here is a link to jQuery
Here is a working model that I've used on an email encrypting site:
http://jsfiddle.net/2b6d5/46/
Feel free to add to it, change it... post any forks/updates here.
:)
/*
* validate an e-mail address by leveraging the HTML5
* input element with type "email"
*/
function validate() {
var input = document.createElement('input');
input.type='email';
input.value=document.getElementById('valid').value;
if (input.checkValidity()) {
document.getElementById('address').style.background = 'green';
} else {
document.getElementById('address').style.background = 'red';
}
return false;
}
function val2(){
var input = document.createElement('input');
input.type='email';
input.value=document.getElementById('valid').value;
if (input.checkValidity()) {
return true;
} else {
alert("Not a valid e-mail address");
return false;
}
}
Hi I have several text input boxes, and i have a clear button, they all share the same name and i wish to clear them all using one function, and this be done without ID's as that takes up too much space
my code thus far looks like this:
var Id;
var Name;
function Check(id, name) {
Id = document.getElementById(id);
Name = document.getElementById(name);
if (Id.value == id) {
Name.checked = true;
alert('correct');
return;
} else {
Name.checked = false;
alert('incorrect');
}
}
function ClearP() {
document.getElementsByName("input").innerHTML = '';
}
my html looks like this
<div class="content">
<div class="main_story" style="margin-bottom:20px;">
<p class="sentence">the word to go here -></p>
<input id="here" name="input" class="sentence" type="text" size="7">
<p class="sentence">is here</p>
<button style="float:right" id="correct" onClick="Check('here', 'aShow');">Correct?</button>
<input style="float:right" name="aShow" id="aShow" type="checkbox" value="">
</div>
<div class="main_story" style="margin-bottom:20px;">
<p class="sentence">the word to go here -></p>
<input id="you" name="input" class="sentence" type="text" size="7">
<p class="sentence">is you</p>
<button style="float:right" id="correct" onClick="Check('you', 'bShow');">Correct?</button>
<input style="float:right" name="bShow" id="bShow" type="checkbox" value="">
</div>
<button onClick="ClearP();">Clear</button>
</div>
all help is much appreciated :) thank you :)
function ClearP(){
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++)
inputs[i].value = '';
}
Give all of them another class (something like "clearable", perhaps?), then find and clear all items with that class.
How about using jQuery, and something like this:
$('[name="input"]').val("");