Showing button after keydown event - javascript

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>

Related

onclick editable text field using javascript

Well, I am learning to create forms so I got this problem. I want a input field which will be simple text and when onclicking edit button it should be a input field. My link to work (https://codepen.io/TA0011/pen/XWBdbyW).
.wrapper-user{
width: 100%;
margin: 0 auto;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 800px;
padding: 25px 40px 10px 40px;
border-radius: 10px;
}
.wrapper-user form .form-row{
display: flex;
margin: 32px 0;
}
form .form-row .input-box{
display: flex;
align-items: center;
width: 100%;
height: 40px;
margin: 0 20px;
position: relative;
}
.form-row button{
margin-left:auto;
color: #fff;
background: #007bff;
border-radius: 6px;
padding:5px 10px;
cursor: pointer;
transition: all 0.4s ease;
border: none;
outline: none;
}
.form-row .input-box input{
height: 100%;
width: 100%;
outline: none;
border: none;
padding: 0 30px;
font-size: 16px;
font-weight: 500;
border-bottom: 2px solid rgba(0,0,0,0.2);
transition: all 0.3s ease;
}
.form-row .input-box p{
font-size: 16px;
font-weight: 500;
padding: 0 30px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<div class="wrapper-user">
<form action="" method="post" enctype="multipart/form-data">
<h2> First</h2>
<div class="form-row">
<div class="input-box">
<i class="fas fa-user"></i>
<input type="text" value="Umann">
</div><button class="btn">Edit</button>
<div class="input-box">
<i class="fas fa-envelope"></i>
<input type="email" Value="uxxxxxxgoxxxxx#gmail.com">
</div>
<button class="btn">Edit</button>
</div><!--form-row-->
<h2>Second</h2>
<div class="form-row">
<div class="input-box">
<i class="fas fa-user"></i>
<p>Umann Goxxxxxxxx</p>
</div>
<button class="btn">Edit</button>
<div class="input-box">
<i class="fas fa-envelope"></i>
<p>UmannXXXXXXX#gmail.com</p>
</div>
<button class="btn">Edit</button>
</div><!--form-row-->
</form>
</div>
Also my query is if we can write but it should display as . And on clicking edit button it should turn in editable textfield.
I tried contenteditable but I want in input form so that I can store the value in database.
I'll propose you a little solution (for only the input fields).
1-Set the input field with readonly attribute and an unique id
2-Set to the button the data-edit attribute same as the id of input field you want to set editable
2.1 - Remember to set type="button" to prevent form submit
3- with js get all buttons with class btn and loop the collection
4- add a listener to each button
5- get the data-edit attribute of the clicked button to select the relative input
6-set readonly false
UPDATE:
When you click on edit button the attribute readonly is toggled and loses focus
const buttons = document.querySelectorAll('.btn');
buttons.forEach(item => {
item.addEventListener('click', function(el) {
let idInputAttibute = "#" + item.getAttribute('data-edit');
let inputField = document.querySelector(idInputAttibute);
inputField.readOnly ? (inputField.readOnly = false,inputField.focus()) :
inputField.readOnly = true
;
});
})
.wrapper-user {
width: 100%;
margin: 0 auto;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 800px;
padding: 25px 40px 10px 40px;
border-radius: 10px;
}
.wrapper-user form .form-row {
display: flex;
margin: 32px 0;
}
form .form-row .input-box {
display: flex;
align-items: center;
width: 100%;
height: 40px;
margin: 0 20px;
position: relative;
}
.form-row button {
margin-left: auto;
color: #fff;
background: #007bff;
border-radius: 6px;
padding: 5px 10px;
cursor: pointer;
transition: all 0.4s ease;
border: none;
outline: none;
}
.form-row .input-box input {
height: 100%;
width: 100%;
outline: none;
border: none;
padding: 0 30px;
font-size: 16px;
font-weight: 500;
border-bottom: 2px solid rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
.form-row .input-box p {
font-size: 16px;
font-weight: 500;
padding: 0 30px;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<div class="wrapper-user">
<form action="" method="post" enctype="multipart/form-data">
<h2> First</h2>
<div class="form-row">
<div class="input-box">
<i class="fas fa-user"></i>
<input id="name" type="text" value="Umann" readonly>
</div><button class="btn" type="button" data-edit="name">Edit</button>
<div class="input-box">
<i class="fas fa-envelope"></i>
<input type="email" id="email" value="uxxxxxxgoxxxxx#gmail.com" readonly>
</div>
<button class="btn" data-edit="email" type="button">Edit</button>
</div>
<!--form-row-->
<h2>Second</h2>
<div class="form-row">
<div class="input-box">
<i class="fas fa-user"></i>
<p>Umann Goxxxxxxxx</p>
</div>
<button class="btn">Edit</button>
<div class="input-box">
<i class="fas fa-envelope"></i>
<p>UmannXXXXXXX#gmail.com</p>
</div>
<button class="btn">Edit</button>
</div>
<!--form-row-->
</form>
</div>

Javascript code style property value not updating after Ajax call

I have JS code where I am changing the style of an HTML element based on an AJAX response.
So my code looks like this.
$.ajax(settings).done(function(response) {
const button_submit = document.getElementById("submit")
button_submit.disabled = response[0];
button_submit.style.cursor = '\"' + response[1] + '\"';
button_submit.style.marginTop = '\"' + response[3] + '\"';
document.getElementById("email").style.visibility = '\"' + response[2] + '\"';
})
input[type=text],
select {
width: 100%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 20px;
margin-bottom: 1.2 rem;
margin-bottom: -6%;
}
#submit {
width: 100%;
background: #f39d13;
background: linear-gradient(to bottom, #f39d13 0, #c64f01 100%);
color: white;
padding: 14px 20px;
margin-top: 4%;
border: none;
border-radius: 4px;
font-size: 20px;
cursor: pointer;
}
#customForm {
border-radius: 5px;
padding: 20px;
margin: auto;
width: 65%;
}
p {
font-size: 12px;
color: gray;
margin-top: 5%;
text-align: center;
}
#email {
visibility: hidden;
font-size: 16px;
color: red;
line-height: -6px;
line-height: 1.6;
text-align: left;
display: block;
}
</head>
<div id="customForm">
<form accept-charset="UTF-8" id="" action="#action" method="POST">
<input name="inf_form_xid" type="hidden" value="dd500cb6988ssd3e0151492cb3eff8cf594" />
<input name="inf_form_name" type="hidden" value="UYTS" />
<input name="if_version" type="hidden" value="1.70.0.4582435" />
<div class="if-field">
<label for="inf_field_Email"></label>
<input id="inf_field_Email" name="inf_field_Email" placeholder="Enter your email address " type="text" /></div>
<div>
<div> </div>
</div>
<label id="email">Please enter a valid email address.</label>
<div class="ifn-submit">
<button id="submit" type="submit">Send Now</button></div>
</form>
</div>
But the style is not changing even after all of the JS function is finished.
I wonder what is wrong with my code.
The response of the AJAX is an array that I am going to put on style properties using JS.
Sample response:
['false', 'pointer', 'hidden', '-3%']
The string 'false' is not the same as the boolean false. The disabled property should be a boolean.
You shouldn't add quotes around the other properties. Quotes are part of the syntax in textual styles, they're not part of the property value itself.
$.ajax(settings).done(function(response) {
const button_submit = document.getElementById("submit")
button_submit.disabled = response[0] === 'true';
button_submit.style.cursor = response[1]';
button_submit.style.marginTop = response[3];
document.getElementById("email").style.visibility = response[2];
})
input[type=text],
select {
width: 100%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 20px;
margin-bottom: 1.2 rem;
margin-bottom: -6%;
}
#submit {
width: 100%;
background: #f39d13;
background: linear-gradient(to bottom, #f39d13 0, #c64f01 100%);
color: white;
padding: 14px 20px;
margin-top: 4%;
border: none;
border-radius: 4px;
font-size: 20px;
cursor: pointer;
}
#customForm {
border-radius: 5px;
padding: 20px;
margin: auto;
width: 65%;
}
p {
font-size: 12px;
color: gray;
margin-top: 5%;
text-align: center;
}
#email {
visibility: hidden;
font-size: 16px;
color: red;
line-height: -6px;
line-height: 1.6;
text-align: left;
display: block;
}
</head>
<div id="customForm">
<form accept-charset="UTF-8" id="" action="#action" method="POST">
<input name="inf_form_xid" type="hidden" value="dd500cb6988ssd3e0151492cb3eff8cf594" />
<input name="inf_form_name" type="hidden" value="UYTS" />
<input name="if_version" type="hidden" value="1.70.0.4582435" />
<div class="if-field">
<label for="inf_field_Email"></label>
<input id="inf_field_Email" name="inf_field_Email" placeholder="Enter your email address " type="text" /></div>
<div>
<div> </div>
</div>
<label id="email">Please enter a valid email address.</label>
<div class="ifn-submit">
<button id="submit" type="submit">Send Now</button></div>
</form>
</div>

Why is my hide() and show() not working even without error in JQuery? [duplicate]

This question already has answers here:
Can I make a <button> not submit a form?
(8 answers)
Closed 1 year ago.
I have a function that will show the other content and hide the recent content. But when I am clicking the submit input it's not working. I tried to use anchor tag and button tag and it has the same output.
html:
$(function(){
$('.btn .button').on('click', function(){
$('.container').show()
$('.container-two').hide()
})
})
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue" class="button">
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>
I tried to use addClass() and removeClass(), also css() but nothing happens. I also find an answer but nothing like my problem.
First of all, change the first submit type input to a button.
Instead of <input type="submit" name="submit" value="Continue" class="button">
Should be <button class="button" type="button">Continue</button>
This will prevent the form submission, and add the missing "button" class to the button.
Then modify the jquery code like this:
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide()
$('.container-two').show()
})
})
My answer was based on the assumption that you want to show the second container after pressing the first "continue" button.
$(function(){
$('.btn .button').on('click', function(e){
$('.container').hide();
$('.container-two').show();
});
});
* {
text-decoration: none;
}
body {
background: #8390A2;
}
.student {
padding-top: 10px;
padding-bottom: 20px;
}
.form .student div {
padding: 10px;
}
.form .student div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.student-name {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
padding: 10px;
}
.form .student-name div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.title-header {
border-top-right-radius: 10%;
border-top-left-radius: 10%;
border-bottom: 1px solid grey;
height: 40px;
background: #efefef;
}
.title-header h3 {
text-align: center;
padding: 9px;
}
.form form div .info {
position: relative;
}
.form .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form .student div:first-child input {
width: 95%;
}
.form .info input:focus {
border-color: #4CCEE8;
}
.form .btn {
position: absolute;
padding-top: 50px;
right: 36.5%;
}
.form .btn input,
.form-two .btn input {
border-radius: 15px;
outline: none;
width: 100px;
height: 40px;
}
.form-two .address div {
padding: 10px;
}
.address .info-two {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.form-two .student-info div {
padding: 10px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .address div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two .student-info div input {
background: #f1f5f9;
margin-top: 5px;
height: 20px;
}
.form-two form div .info {
position: relative;
}
.form-two .info label {
position: absolute;
color: grey;
pointer-events: none;
top: 36px;
left: 15px;
transition: 0.5s ease;
}
.form-two .info input:focus ~ label {
transform: translateY(-20px);
color: black;
}
.form-two .info input {
outline: none;
border: none;
border-bottom: 1px solid silver;
padding-top: 20px;
}
.form-two .address div:first-child input {
width: 95%;
}
.form-two .address div:last-child div {
padding-left: 1px;
}
.form-two .address div:last-child div label {
left: 8px;
}
.form-two .info input:focus {
border-color: #4CCEE8;
}
.form-two .btn {
position: absolute;
padding-top: 14px;
right: 36.5%;
}
.active {
display: none;
}
main {
border-radius: 1%;
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 13rem;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}
form h4 {
margin: 10px;
}
#media only screen and (max-width: 1366px) {
main {
background: #f1f5f9;
width: 27rem;
min-height: 30rem;
margin: auto;
margin-top: 5rem;
}
}
<div class="container">
<main>
<div class="form">
<div class="title-header">
<h3>Personal Data Information 1</h3>
</div>
<form action="" method="POST">
<div class="student">
<div class="info">
<input type="text" name="Program">
<label>Program</label>
</div>
<div class="info">
<input type="text" name="Student #">
<label>Student #</label>
</div>
</div>
<h4>Student Name</h4>
<div class="student-name">
<div class="info">
<input type="text" name="Surname" id="surname">
<label>Surname</label>
</div>
<div class="info">
<input type="text" name="Given Name" id="givenname">
<label>Given Name</label>
</div>
<div class="info">
<input type="text" name="Middle Name" id="middlename">
<label>Middle Name</label>
</div>
<div class="info">
<input type="text" name="Auxillary Name" id="auxillaryname">
<label>Auxillary Name</label>
</div>
</div>
<div class="btn">
<button class="button" type="button">Continue</button>
</div>
</form>
</div>
</main>
</div>
<div class="container-two active">
<main>
<div class="form-two">
<div class="title-header">
<h3>Personal Data Information 2</h3>
</div>
<form action="" method="POST">
<h4>Address</h4>
<div class="address">
<div class="info">
<input type="text" name="City Address">
<label>City Address</label>
</div>
<div class="info-two" style="padding: 0px;">
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Zip Code</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 70%;">
<label>Tel no.</label>
</div>
</div>
<div class="info">
<input type="email" name="Student #" style="width: 95%;">
<label>Email Address</label>
</div>
<div class="info">
<input type="text" name="City Address" style="width: 95%;">
<label>Home Address</label>
</div>
<div class="info">
<input type="text" name="Student #" style="width: 34%;">
<label>Zip Code</label>
</div>
</div>
<div class="btn">
<input type="submit" name="submit" value="Continue">
</div>
</form>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I copied and pasted the code to codepen and found that he is trying to show the div which is already visible and trying to hide the div which is already hidden, so replaced the hide() and show() with each other.
prevent the default submit event and add hide() and show() on correct divs
$(function(){
$('.btn .button').on('click', function(e){
e.preventDefault();
$('.container').hide()
$('.container-two').show()
})
})

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>

Why my Button on my click dont hide textarea

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>

Categories