Why my Button on my click dont hide textarea - javascript

This is simple calculator .When i click on button he cant hide textarea
I trying to find problem. When i click he show and hide soo fast idk why..
I really hope someone will find my mistake.Down this is my code i write in html,css,javascript.
function myFunction() {
var x = document.getElementById("myDiv");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function runLB(){
document.case.display.value += "("
}
function runRB(){
document.case.display.value += ")"
}
function run1(){
document.case.display.value += "1"
};
function run2(){
document.case.display.value += "2"
};
function run3(){
document.case.display.value += "3"
};
function run4(){
document.case.display.value += "4"
};
function run5(){
document.case.display.value += "5"
};
function run6(){
document.case.display.value += "6"
};
function run7(){
document.case.display.value += "7"
};
function run8(){
document.case.display.value += "8"
};
function run9(){
document.case.display.value += "9"
};
function run0(){
document.case.display.value += "0"
};
function runPlus(){
document.case.display.value += "+"
};
function runMinus(){
document.case.display.value += "-"
};
function runDivide(){
document.case.display.value += "/"
};
function runMultiply(){
document.case.display.value += "*"
};
function runComma(){
document.case.display.value += "."
};
function runBack(){
var val = document.case.display.value.slice(0, -1);
document.case.display.value = val;
};
function runC(){
document.case.display.value = ""
};
function runEquals() {
if (document.case.display.value == "") {
document.case.display.value = ""
} else {
var equals = eval(document.case.display.value)
document.case.display.value = equals;
}
}
html {
background:
linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}
not (display) {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 16px;
vertical-align: baseline;
background: transparent;
}
ul {
list-style: none;
}
body {
width: 500px;
}
#a{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 60px;
line-height: 60px;
color: #fff;
font-size: 24px;
text-transform: uppercase;
text-decoration: none;
font-family: sans-serif;
box-sizing: border-box;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 30px;
z-index: 1;
}
#a:hover
{
animation: animate 5s linear infinite;
}
#keyframes animate
{
0%
{
background-position: 0%;
}
100%
{
background-position: 400%;
}
}
#a:before
{
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 40px;
opacity: 0;
transition: 0.5s;
}
#a:hover:before
{
filter: blur(20px);
opacity:1;
animation: animate 5s linear infinite;
}
{}
form {
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
text-align: center;
padding: 7px;
align-content: center;
border-radius: 10px;
border: 5px solid #006699;
}
#display {
width: 98%;
height: 50px;
text-align: right;
font-size: 3rem;
margin: 7px;
border: 5px solid #006699;
}
.digit {
font-size: 2rem;
background-color: #f8f8f8;
height: 55px;
width: 20%;
border: 3px solid #c6c6c6;
display: inline-block;
box-shadow: 0 1px 1px;
color:#444;
font-family: Roboto-Regular,helvetica,arial,sans-serif;
margin: 2px;
opacity: 0.9;
}
.oper {
font-size: 2rem;
background-color: #d6d6d6;
height: 55px;
width: 20%;
color: #444;
display: inline-block;
margin: 2px;
box-shadow: 0 1px 1px;
font-family: Roboto-Regular,helvetica,arial,sans-serif;
opacity: 0.9;
}
#equal {
background-color:#006699 ;
color: white;
width: 41.5%;
}
textarea {
display: block;
margin-bottom: 20px;
resize: none;
width: 520px;
height: 400px;
max-width: 405px;
max-height: 400px;
margin-left: 36px;
margin-top: 20px;
font-size: 25px;
}
<html>
<head>
<title>Calculator Project</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="main.css" type="text/css">
<script src="main.js" type="text/javascript"></script>
</head>
<body>
<form name="case" >
<input name="display" id="display" value="">
<input type="button" class="oper" value="(" onclick="runLB()">
<input type="button" class="oper" value=")" onclick="runRB()">
<input type="button" id="back" class="oper" value="CE" onclick="runBack()">
<input type="button" id="divide" class="oper" value="÷" onclick="runDivide()" >
<input type="button" class="digit" value="1" onclick="run1()">
<input type="button" class="digit" value="2" onclick="run2()">
<input type="button" class="digit" value="3" onclick="run3()">
<input type="button" id="multiply" class="oper" value="×" onclick="runMultiply()">
<input type="button" class="digit" value="4" onclick="run4()">
<input type="button" class="digit" value="5" onclick="run5()">
<input type="button" class="digit" value="6" onclick="run6()">
<input type="button" id="minus" class="oper" value="-" onclick="runMinus()" >
<input type="button" class="digit" value="7" onclick="run7()">
<input type="button" class="digit" value="8" onclick="run8()">
<input type="button" class="digit" value="9" onclick="run9()">
<input type="button" id="plus" class="oper" value="+" onclick="runPlus()">
<input type="button" class="digit" value="0" onclick="run0()">
<input type="button" id="comma" class="digit" value="." onclick="runComma()">
<input type="button" id="equal" class="oper" value="=" onclick="runEquals()">
<button id="a" onclick="myFunction()"> Note </button>
<div id="myDiv">
<textarea placeholder="Note"></textarea>
</div>
</body>

By default, a HTML button is a 'submit' type (which tries to submit a form).
You should change your button to:
<button type="button" id="a" onclick="myFunction()"> Note </button>

Your button's type is defaulting to a submit button and so it's trying to submit your form and so the entire page contents disappear. Changing the button to type=button solves that.
But, let's back up a bit because you have a whole bunch of other issues here.
Since you're not actually submitting any form data, you don't even need a <form> element. Removing the <form> and </form> also solves the button problem because now there will be no form data to submit.
Next, you've got a whole ton of unnecessary duplicated code. All the functions you have for the button clicks essentially do the same thing, they simply update the display with the value of the button that got clicked. All of that can be done with one simple function that you simply pass a value (the value of the button that got clicked) into.
Then, get rid of all the inline event atributes (onclick). This is how events were configured 25+ years ago and the practice will not die the death it deserves because people just copy/paste that technique from other places. There are a bunch of reasons not to do this. The modern, standards-based way is to separate your JavaScript completely from your HTML (note how much cleaner the HTML is in my answer below).
Next, you are using document.case over and over and, honestly, I have no idea what that is and I'm actually kind of stumped as to why it doesn't throw an error. Instead, get references to the elements that you'll want to work with and interact with them directly.
Also, some of the HTML for the buttons is better written with the <button> element. This will allow you to show one character, but store and pass a different one to the callback functions.
You also have some invalid CSS (the not rule and {}).
I've also change the positioning of the "Note" button as it obscures the calculator, by putting it at the bottom.
Take a look at this solution and the inline comments:
// Get references to special buttons
let display = document.getElementById("display");
let ce = document.getElementById("back");
let note = document.getElementById("note");
let equals = document.getElementById("equal");
// And the textarea
let area = document.querySelector("textarea");
// Get all the operation and numbers buttons into an array
let buttons = Array.prototype.slice.call(document.querySelectorAll(".oper, .digit"));
// Loop over the buttons
buttons.forEach(function(btn){
// Assign a click callback handler
btn.addEventListener("click", function(){
updateDisplay(this.value); // Call the function with the buttons value
});
});
// This function will have the value of whatever button that got
// clicked passed into it and so one function handles all the buttons
function updateDisplay(val){
display.value += val;
}
// Set up the CE button handler
ce.addEventListener("click", function(){
display.value = "";
});
// Set up the note button's event handler
note.addEventListener("click", myFunction);
function myFunction() {
// Just toggle the use of the hidden class instead of
// manually testing for the display state of the element
// and then modifying the inline style as a result
area.classList.toggle("hidden");
}
function runBack(){
var val = display.value.slice(0, -1);
display.value = val;
};
equals.addEventListener("click", function() {
if (display.value !== "") {
display.value = eval(display.value);
}
});
html {
background:
linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));
}
ul { list-style: none; }
.hidden { display:none; } /* Just toggle the use of this for hidden/shown */
#note{
position: absolute;
bottom: 0
right: 0;
width: 200px;
height: 60px;
line-height: 60px;
color: #fff;
font-size: 24px;
text-transform: uppercase;
text-decoration: none;
font-family: sans-serif;
box-sizing: border-box;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 30px;
z-index: 1;
}
#note:hover { animation: animate 5s linear infinite; }
#keyframes animate {
0% { background-position: 0%; }
100% { background-position: 400%; }
}
#note:before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 40px;
opacity: 0;
transition: 0.5s;
}
#note:hover:before
{
filter: blur(20px);
opacity:1;
animation: animate 5s linear infinite;
}
.wrapper {
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
text-align: center;
padding: 7px;
align-content: center;
border-radius: 10px;
border: 5px solid #006699;
}
#display {
width: 98%;
height: 50px;
text-align: right;
font-size: 3rem;
margin: 7px;
border: 5px solid #006699;
}
.digit {
font-size: 2rem;
background-color: #f8f8f8;
height: 55px;
width: 20%;
border: 3px solid #c6c6c6;
display: inline-block;
box-shadow: 0 1px 1px;
color:#444;
font-family: Roboto-Regular,helvetica,arial,sans-serif;
margin: 2px;
opacity: 0.9;
}
.oper {
font-size: 2rem;
background-color: #d6d6d6;
height: 55px;
width: 20%;
color: #444;
display: inline-block;
margin: 2px;
box-shadow: 0 1px 1px;
font-family: Roboto-Regular,helvetica,arial,sans-serif;
opacity: 0.9;
}
#equal {
background-color:#006699 ;
color: white;
width: 41.5%;
}
textarea {
display: block;
margin-bottom: 20px;
resize: none;
width: 520px;
height: 400px;
max-width: 405px;
max-height: 400px;
margin-left: 36px;
margin-top: 20px;
font-size: 25px;
}
<html>
<head>
<title>Calculator Project</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="wrapper">
<input name="display" id="display">
<input type="button" class="oper" value="(">
<input type="button" class="oper" value=")">
<button id="back" class="oper" value="">CE</button>
<input type="button" id="divide" class="oper" value="÷">
<input type="button" class="digit" value="1">
<input type="button" class="digit" value="2">
<input type="button" class="digit" value="3">
<button id="multiply" class="oper" value="*">x</button>
<input type="button" class="digit" value="4">
<input type="button" class="digit" value="5">
<input type="button" class="digit" value="6">
<input type="button" id="minus" class="oper" value="-">
<input type="button" class="digit" value="7">
<input type="button" class="digit" value="8">
<input type="button" class="digit" value="9">
<input type="button" id="plus" class="oper" value="+">
<input type="button" class="digit" value="0">
<input type="button" id="comma" class="digit" value=".">
<button id="equal" class="oper" value="">=</button>
<div id="myDiv">
<textarea placeholder="Note"></textarea>
</div>
</div>
<button id="note"> Note </button>
</body>

Related

Showing button after keydown event

I want to show 2 buttons when keydown event is triggered. It's actually for profile page where when any data is edited Then only update or cancel button should appear.but by default these buttons should be not seen.I used js to show the button or trigger a css class whenever the keydown event is triggered but that seems to not work.
let updateBtn = document.getElementbyID('updateBtn');
function showUpdate() {
updateBtn.classList.add("upBtnPop");
}
.upBtn {
cursor: pointer;
background-color: rgb(67, 207, 67);
width: 100px;
border: none;
border-radius: 15px;
height: 30px;
font-size: 15px;
font-weight: 700;
margin-right: 20px;
margin-left: 40px;
visibility: hidden;
}
.upBtn:hover {
color: white;
background-color: rgb(142, 168, 39);
transition: 0.4s;
}
.upBtnPop {
visibility: visible;
}
.cnBtn {
cursor: pointer;
background-color: rgb(67, 207, 67);
width: 100px;
border: none;
border-radius: 15px;
height: 30px;
font-size: 15px;
font-weight: 700;
visibility: hidden;
}
.cnBtn:hover {
color: white;
background-color: rgb(142, 168, 39);
transition: 0.4s;
}
.cnBtnPop {
visibility: visible;
}
<div class="userClass" onkeyup="showUpdate();" id="userData" name="name">
<p>Full Name : <input class="userData" value="<?php echo $ret_data['fullName'] ?>" type="text"></p>
</div>
<br>
<div class="userClass" onkeyup="showUpdate();" id="userData" name="email">
<p>Email : <input class="userData" value="<?php echo $ret_data['email'] ?>" type="text"></p>
</div>
<br>
<div class="userClass" onkeyup="showUpdate();" id="userData" name="contact">
<p>Phone : <input class="userData" value="<?php echo $ret_data['contactNum'] ?>" type="text"></p>
</div>
<br>
<div class="userClass" onkeyup="showUpdate();" id="userData" name="password">
<p>Password : Change Password ?</p>
</div>
<br>
<button class="upBtn" id="updateBtn">Update</button>
<button class="cnBtn" id="cancelBtn">Cancel</button>
<button class="logBtn">Log out</button>
You used the wrong case for document.getElementById(). You typed document.getElementbyID(). In addition to this, you should remove the .upBtnPop style rule, and instead add a isHidden class to the button on load, with a single style rule for that class, hiding the button. Then simply remove the class when the onKeyUp event is fired.
Finally, make these slight changes:
move all of those event declarations to the Javascript, so you can better control them (and you're not repeating yourself).
move the keyup event listener to the inputs themselves.
move the name attributes to the inputs and remove the password name attribute.
remove the ids from the .userClass divs. Id names can only be used once per page.
const inputs = document.querySelectorAll('.userData');
inputs.forEach(input => {
input.addEventListener('keyup', () => {
document.getElementById('updateBtn').classList.remove('isHidden');
});
});
.upBtn {
cursor: pointer;
background-color: rgb(67, 207, 67);
width: 100px;
border: none;
border-radius: 15px;
height: 30px;
font-size: 15px;
font-weight: 700;
margin-right: 20px;
margin-left: 40px;
}
.upBtn.isHidden {
visibility: hidden;
}
.upBtn:hover {
color: white;
background-color: rgb(142, 168, 39);
transition: 0.4s;
}
.cnBtn {
cursor: pointer;
background-color: rgb(67, 207, 67);
width: 100px;
border: none;
border-radius: 15px;
height: 30px;
font-size: 15px;
font-weight: 700;
visibility: hidden;
}
.cnBtn:hover {
color: white;
background-color: rgb(142, 168, 39);
transition: 0.4s;
}
.cnBtnPop {
visibility: visible;
}
<div class="userClass">
<p>Full Name : <input class="userData" value="John Doe" type="text" name="name"></p>
</div>
<br>
<div class="userClass">
<p>Email : <input class="userData" value="johndoe#yahoo.com" type="text" name="email"></p>
</div>
<br>
<div class="userClass">
<p>Phone : <input class="userData" value="555-1234" type="text" name="contact"></p>
</div>
<br>
<div class="userClass">
<p>Password : Change Password ?</p>
</div>
<br>
<button class="upBtn isHidden" id="updateBtn">Update</button>
<button class="cnBtn" id="cancelBtn">Cancel</button>
<button class="logBtn">Log out</button>

How to highlight the input button by clicking to a button?

I can't code jquery javascript therefore i have no idea how to highlight (border or background change) the submit button for a few seconds. I tried some of the scripts that have been shared on this platform but i wasn't lucky. What code do you suggest?
The button i need to highlight is submitbtn
and the button that needs to highlight it by click is eventbtn
I appreciate the help
Thanks
Edited: I Want to add class to the submit button once the button is clicked
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.submitbtn {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="submitbtn" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"> <<<<<<<<<<< </button>
</div>
h
The key is to remove the highlighting after a few seconds, this can be done with setTimeout() function:
function highlight(id)
{
clearTimeout(highlight.timer);
const el = document.getElementById(id);
//highlight the button
el.classList.add("highlighted");
//remove highlight after 3sec
highlight.timer = setTimeout(() => el.classList.remove("highlighted"), 3000);
}
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
/* added */
.highlighted
{
box-shadow: 0 0 2em 1px red;
}
.wpcf7-submit {
transition: box-shadow 0.2s;
}
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight" onclick="highlight('form-submit')"> <<<<<<<<<<< </button>
</div>
Do you mean highlight submitbtn when clicking eventbtn?
Add a js to handle the click event, and then add highlight class to submitbtn.
var eventbtn = document.getElementById('highlight');
var submitbtn = document.getElementsByClassName('submitbtn')[0];
eventbtn.addEventListener('mousedown', function () {
submitbtn.classList.add('highlight');
});
eventbtn.addEventListener('mouseup', function () {
submitbtn.classList.remove('highlight');
});
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.submitbtn {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
.highlight {
background-color: #8beccc;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="submitbtn" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"> <<<<<<<<<<< </button>
</div>
Simply add a class to the element you want to highlight. Then remove the class with the setTimeout function.
Add a class in CSS with a high specificity that contains all visible changes you want to apply. It does not matter what it is. It can be background, border, box-shadow...
In JS use an eventListener to listen to click-events on the button.
Apply the class you have specified in CSS with classList.add().
Add a setTimeout function to remove the class after a specified time with classList.remove()
Vanilla JavaScript:
// button element that will be clicked
var button = document.querySelector('button[class="eventbtn"]'),
// element that should be highlighted
input = document.querySelector('#form-submit'),
// timer in ms
timer = 2000;
// eventListener to execute the script on button click
button.addEventListener('click', function() {
// adds a class to apply CSS changes for the highlighting
input.classList.add('highlight');
// timeout function
setTimeout(function() {
// removes the class after the timer has been reached
input.classList.remove('highlight');
}, timer);
})
#form-submit.highlight {
background-color: yellow;
}
/* original CSS */
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"><<<<<<<<<<<</button>
</div>
jQuery:
// button element that will be clicked
var $button = $('button[class="eventbtn"]'),
// element that should be highlighted
$input = $('#form-submit'),
// timer in ms
timer = 2000;
//Eventlistener looking for a click event
$button.click(function() {
//adds a class for highlighting
$input.addClass('highlight');
//timeout function
setTimeout(function() {
//removes class for highlighting
$input.removeClass('highlight');
}, timer);
})
#form-submit.highlight {
background-color: yellow;
}
/* original CSS */
.sidebar {
background-color: black;
width: 33%;
float: right;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
width: 66%;
position: relative;
float: left;
background-color: #407060;
padding: 15px 30px;
border: none;
cursor: pointer;
color: white;
text-transform: uppercase;
}
.eventbtn {
color: white;
border: none;
border-radius: 2px;
padding: 15px 30px;
width: 100%;
background-color: #A73D42;
cursor: pointer;
}
body {
background-color: #f1f1f1
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input type="submit" value="Submit" class="wpcf7-form-control has-spinner wpcf7-submit" id="form-submit" /></p>
<div class="sidebar">
<button class="eventbtn" id="highlight"><<<<<<<<<<<</button>
</div>
I tryed to answer with pure css by using animation and keyframes. My attempt only works the first time and once everytime after you change the target.
(Note that I'm not used to these properties so there may be a better way to do this)
#form-submit{
background-color: transparent;
}
#keyframes changeBackground {
0% {
background-color: orange;
}
99.999% {
background-color: orange;
}
100% {
background-color: transparent;
}
}
#form-submit:target{
animation: changeBackground 1s;
}
<input type="submit" value="submit" id="form-submit" />
highlight
<br>
change target

Jquery appendTo html to a javascript function

building a show your password with a caps lock warning on a form. But need to use appendTo so the HTML can be added to a pre-written shortcode.
Whenever the Html is added by appendTo the Javascript function can not find the added HTML.
code: https://codepen.io/edutize/pen/qBZXmOZ
<div class="memberium-form">
<form name="loginform" id="loginform" action="https://traderonthestreet.com/wp-login.php" method="post">
<input id="learndash-login-form" type="hidden" name="learndash-login-form" value="754942d3df">
<p class="login-username">
<label for="user_login"></label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="Email *">
</p>
<p class="login-password">
<label for="user_pass"></label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password *">
</p>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Login">
<input type="hidden" name="redirect_to" value="https://traderonthestreet.com/wp-admin/">
</p>
</form>
$(document).ready(function(){
$("<span></span>").appendTo(".login-password").attr("toggle", "#user_pass").addClass("fa fa-fw
fa-eye field-icon toggle-password");
$("<p>WARNING! Caps lock is ON.</p>").appendTo(".login-password").attr("id", "caps");
});
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
var input = document.getElementById("user_pass");
var text = document.getElementById("caps");
input.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none"
}
});
You're generating elements inside document ready which usually is initiated later than when the JS is loaded. When the $(".toggle-password").click(function() event listener is attached to .toggle-password, #caps doesn't exists yet.
Either moving the event listener into the document ready after the #caps element is created or moving the #caps element creation outside the document ready will work.
// Jquery appendTo capslock message and eye icons html
$(document).ready(function(){
$("<span></span>").appendTo(".login-password").attr("toggle", "user_pass").addClass("fa fa-fw fa-eye field-icon toggle-password");
$("<p>WARNING! Caps lock is ON.</p>").appendTo(".login-password").attr("id", "caps");
// toggle between classes and change attribute type
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
// capslock function change style from display none to block
var input = document.getElementById("user_pass");
var text = document.getElementById("caps");
document.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none"
}
});
});
.login-username input[type=text] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-username input[type=text]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
.login-password input[type=password] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-password input[type=password]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
.login-password input[type=text] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-password input[type=text]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
#caps {
display: none;
margin-left: auto;
margin-right: auto;
width: 50%;
color: red;
}
.field-icon {
margin-left: 72.5%;
margin-right: auto;
z-index: 2;
position: absolute;
margin-top: -40px;
color: #8A8A8A;
}
.login-submit input[type=submit] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding-top: 20px;
padding-bottom: 20px;
background-color: #24af61;
border: #24af61;
border-radius: 5px !important;
border-width: 1.5px;
color: white;
cursor: pointer;
display: block;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
font-size: 18px;
transition: 0.3s;
font-weight: bold;
margin: 30px auto;
}
.login-submit input[type=submit]:hover {
background-color: #ffffff;
-webkit-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
-moz-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
transform: scale(1.05);
color: #24af61;
border-style: solid;
border: #24af61;
border-width: 1.5px;
border-radius: 15px;
}
#media screen and (max-width: 767px) {
.login-password input[type=password] , .login-username input[type=text] , .login-submit input[type=submit] {
width: 75%;
}
#media screen and (max-width: 767px) {
.field-icon {
margin-left: 82%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="memberium-form">
<form name="loginform" id="loginform" action="https://traderonthestreet.com/wp-login.php" method="post">
<input id="learndash-login-form" type="hidden" name="learndash-login-form" value="754942d3df">
<p class="login-username">
<label for="user_login"></label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="Email *">
</p>
<p class="login-password">
<label for="user_pass"></label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password *">
<!-- html thats being added by jquery appendTo -->
<!-- <span toggle="#user_pass" class="fa fa-fw fa-eye field-icon toggle-password"></span>
<p id="caps">WARNING! Caps lock is ON.</p> -->
</p>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Login">
<input type="hidden" name="redirect_to" value="https://traderonthestreet.com/wp-admin/">
</p>
</form>
</div>

selected file name is not displaying

I have choose file input code,i need to change the text of the choose file and there should be a required keyword this working fine,but i want show the selected file below the button. Here is the fiddle
here is my code:
<form>
<div>
upload
<input type="file" class="hide_file" required>
</div>
<br><br>
<button type="submit" id="save" class="btn btn-default wf-save" >SAVE</button>
</form>
css:
div{
padding:5px 10px;
background:#00ad2d;
border:1px solid #00ad2d;
position:relative;
color:#fff;
border-radius:2px;
text-align:center;
float:left;
cursor:pointer
}
.hide_file {
position: absolute;
z-index: 1000;
opacity: 0;
cursor: pointer;
right: 0;
top: 0;
height: 100%;
font-size: 24px;
width: 100%;
}
how to show the file name below the upload button.can anyone suggest how to do.
Actually, it was there. It was just hidden because of your CSS. You may create a new element then it will hold the filename.
$('.hide_file').change(function() {
var filename = $(this).val();
var lastIndex = filename.lastIndexOf("\\");
if (lastIndex >= 0) {
filename = filename.substring(lastIndex + 1);
}
$('#filename').text(filename);
});
div {
padding: 5px 10px;
background: #00ad2d;
border: 1px solid #00ad2d;
position: relative;
color: #fff;
border-radius: 2px;
text-align: center;
float: left;
cursor: pointer
}
.hide_file {
position: absolute;
z-index: 1000;
opacity: 0;
cursor: pointer;
right: 0;
top: 0;
height: 100%;
font-size: 24px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div>
upload
<input type="file" class="hide_file" required value="">
</div>
<br><br>
<button type="submit" id="save" class="btn btn-default wf-save">SAVE</button>
</form>
<p id="filename"></p>
Reference from here.

javascript - action when file selected

I am trying to make Javascript do something in this case display an alert when a file is selected by the user in an . I am not sure if I my code actually gets into my javascript or not, Here is my code:
function showNoFile() {
if(document.getElementById("video-file-upload").value != "") {
alert("yeap");
}
}
/*****************
UPLOAD BUTTON
******************/
.file-wrapper {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
margin:10px;
}
.file-wrapper input {
cursor: pointer;
font-size: 100px;
height: 100%;
-moz-opacity: 0.01;
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
}
.file-wrapper .button {
background: #F3A662;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
text-transform: uppercase;
}
<form id="video_uploader" name="video_uploader" action="uploader.php" method="post" enctype="multipart/form-data">
<span class="file-wrapper btn ad-choice">
<input type="file" name="file" id="video-file-upload" />
<span class="button">Choose a video</span>
</span>
<br/>
<input type="submit" name="submit" value="Submit" />
</form>
use it on DOM ready
$("#video-file-upload").change(function(){
if($(this).val() != ""){
alert("some file selected");
}
});
Fiddle
if (document.getElementById("video-file-upload").files.length == 0) {
alert("yeap");
}
Check for files.length is equal to 0.
with javascript:
function showNoFile() {
if(this.value != "") {
alert("yeap");
}
}
document.getElementById("video-file-upload").onchange = showNoFile;
function showNoFile() {
if(this.value != "") {
alert("yeap");
}
}
document.getElementById("video-file-upload").onchange = showNoFile;
/*****************
UPLOAD BUTTON
******************/
.file-wrapper {
cursor: pointer;
display: inline-block;
overflow: hidden;
position: relative;
margin:10px;
}
.file-wrapper input {
cursor: pointer;
font-size: 100px;
height: 100%;
-moz-opacity: 0.01;
opacity: 0.01;
position: absolute;
right: 0;
top: 0;
}
.file-wrapper .button {
background: #F3A662;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 11px;
font-weight: bold;
margin-right: 5px;
text-transform: uppercase;
}
<form id="video_uploader" name="video_uploader" action="uploader.php" method="post" enctype="multipart/form-data">
<span class="file-wrapper btn ad-choice">
<input type="file" name="file" id="video-file-upload" />
<span class="button">Choose a video</span>
</span>
<br/>
<input type="submit" name="submit" value="Submit" />
</form>

Categories