Develop Reference

how can i show an edit box on output text on click with save button

how can i edit on output text on click with save button. please if any could help....
$(document).ready(function(){
$("#btn").click(function(){
let getVal = $("#inputValue").val();
let button = `<button name="button-${getVal}">Button for ${getVal}</button>`
$("#output").html($("#output").html() + " " + getVal + button);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<fieldset>
<legend>jQuery input value</legend>
<input id="inputValue" type="text" name="text">
</fieldset>
<button id="btn">display value</button>
<div id="output"></div>
</div>

$(document).ready(function(){
$("#btn").click(function(){
let getVal = $("#inputValue").val();
let button = `<button onclick="Update(this);" name="button">Edit/Update </button>`
//let button = `<button onclick="Update(this);" name="button-${getVal}">Edit/Update for ${getVal}</button>`
$("#output").append('<tr><td><input name="test[]" type="text" value="'+getVal+'" disabled></td><td>' + button +'</td></tr>');
});
});
function Update(CurrentElement)
{
if($(CurrentElement).closest('tr').find('input').attr('disabled')) {
$(CurrentElement).closest('tr').find('input').attr('disabled',false);
} else {
$(CurrentElement).closest('tr').find('input').attr('disabled',true);
}
}
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%;}
td, th { border: 1px solid #dddddd; text-align: left; padding: 8px;}
tr:nth-child(even) { background-color: #dddddd;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<fieldset>
<legend>jQuery input value</legend>
<input id="inputValue" type="text" name="text">
</fieldset>
<button id="btn">display value</button>
<table id="output"><tr><th>Value</th><th>Action</th></tr></table>
</div>

May be this can help you.
$(document).ready(function(){
$("#btn").click(function(){
let getVal = $("#inputValue").val();
$('#output').val(getVal);
});
$("#save").click(function(){
let getValNew = $("#output").val();
$('#inputValue').val(getValNew);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
<fieldset>
<legend>jQuery input value</legend>
<input id="inputValue" type="text" name="text">
</fieldset>
<button id="btn">display value</button>
<input type="text" name="text-out" id="output">
<button id="save">Update value</button>
</div>

Jquery fuction on multiple elements

As you can see in the Snippet code below, I have two buttons and one input for each container. Now, The input calc and sums up the number of clicks on the 2 buttons in the same container. But, it's only working for the first container. How can I make it work for each container separately without setting an ID for each group of inputs?
$(function() {
$('.click').on('click', function() {
$(this).val(parseInt($(this).val()) + 1);
});
$('.click').click(function() {
var val1 = +$('.val1').val();
var val2 = +$('.val2').val();
$('.count').val(val1+val2);
});
});
.cont {
border: 1px solid red;
padding: 10px;
margin-bottom: 5px;
}
h1 {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>First</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>
<h1>Second</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>

First get the parent of the clicked element, then search for the .valx elements only within this parent.
$('.click').click(function (e) {
var $parent = $(e.currentTarget).parent();
var val1 = +$parent.find('.val1').val();
var val2 = +$parent.find('.val2').val();
$parent.find('.count').val(val1 + val2);
});
This way, you can have as many counters as you want.
Update:
You can also add the +1 feature in the same click event. Like so:
$('.click').click(function (e) {
var $input = $(e.currentTarget);
var $parent = $input.parent();
// Value ++
$input.val($input.val() + 1);
// Set the total count
var val1 = +$parent.find('.val1').val();
var val2 = +$parent.find('.val2').val();
$parent.find('.count').val(val1 + val2);
});

Got it working for you!
Use $(this).parent().find();
$(function() {
$('.click').on('click', function() {
$(this).val(parseInt($(this).val()) + 1);
});
$('.click').click(function() {
var val1 = + $(this).parent().find('.val1').val();
var val2 = + $(this).parent().find('.val2').val();
$(this).parent().find('.count').val(val1+val2);
});
});
.cont {
border: 1px solid red;
padding: 10px;
margin-bottom: 5px;
}
h1 {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>First</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>
<h1>Second</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>

Here is the Solution for You:
$(function() {
$('.click').on('click', function() {
$(this).val(parseInt($(this).val()) + 1);
});
$('.val1').click(function() {
var val1 = +$(this).val();
var val2 = +$($(this).siblings('.val2')).val();
$($(this).siblings('.count')).val(val1+val2);
});
$('.val2').click(function() {
var val1 = +$($(this).siblings('.val1')).val();
var val2 = +$(this).val();
$($(this).siblings('.count')).val(val1+val2);
});
});
.cont {
border: 1px solid red;
padding: 10px;
margin-bottom: 5px;
}
h1 {
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>First</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>
<h1>Second</h1>
<div class="cont">
<input type="text" class="count" value="0">
<input type="button" class="click val1" value="0">
<input type="button" class="click val2" value="0">
</div>

Form Submit Empty

I have a form here that I'm trying to get an error message when either 3 boxes are empty when I click submit but it's not working, what am I doing wrong? I put in a onsubmit in my form but still doesnt work
HTML:
var message = document.getElementById("ErrorMessage");
function clearMyField(el) {
if(el.placeholder !='') {
el.placeholder = '';
}
}
function checkforblank() {
var allInputs = document.querySelectorAll('input[type=text]');
for(let i = 0; i<allInputs.length; i++){
let v = allInputs[i].value.trim();
let n = allInputs[i].name;
if(v == ""){
message.textContent = n + " is empty";
return false;
}
}
}
<!doctype html>
<html lang="en">
<head>
<title> Lab 6 - Task 2 </title>
<style>
span {
padding-left: 10px;
display: block;
float: left;
width: 20%;
}
button { margin-left: 10px; }
body {
width: 80%; margin: auto; font-family: sans-serif;
border: 1px solid black;
}
</style>
<meta charset="utf-8">
<script src="prototype.js"></script>
<script src="task2.js"></script>
</head>
<body>
<form id="myForm" method="get" onsubmit="return checkforblank()">
<h1> Form Submit </h1>
<p> <span>Name:</span> <input type="text" id="input1" placeholder="Enter Name" name="Name" onfocus="clearMyField(this);"></p>
<p> <span>Student Id:</span> <input type="text" id="input2" placeholder="Enter Student ID" name="StudentID" onfocus="clearMyField(this);"></p>
<p> <span>Email:</span> <input type="text" id="input3" placeholder="Enter Email" name="Email" onfocus="clearMyField(this);"></p>
<p>
<button id="submitButton" type="submit"> Submit </button>
<input type="reset" value="Reset">
</p>
<p style="color:red" id="ErrorMessage"> </p>
</form>
</body>
</html>

Fix this:
<form id="myForm" method="get" onsubmit="checkforblank()">
</form>
See here
There is no need for return statement

The type of the button should be submit instead of button. Since you are comparing the value inside the function, you have to set the input's placeholder property instead of value
<button id="submitButton" type="submit"> Submit </button>
var message = document.getElementById("ErrorMessage");
function clearMyField(el) {
if(el.placeholder !='') {
el.placeholder = '';
}
}
function checkforblank() {
var allInputs = document.querySelectorAll('input[type=text]');
for(let i = 0; i<allInputs.length; i++){
let v = allInputs[i].value.trim();
let n = allInputs[i].name;
if(v == ""){
message.textContent = n + " is empty";
return false;
}
}
}
span {
padding-left: 10px;
display: block;
float: left;
width: 20%;
}
button { margin-left: 10px; }
body {
width: 80%; margin: auto; font-family: sans-serif;
border: 1px solid black;
}
<form id="myForm" method="get" onsubmit="return checkforblank()">
<h1> Form Submit </h1>
<p> <span>Name:</span> <input type="text" id="input1" placeholder="Enter Name" name="Name" onfocus="clearMyField(this);"></p>
<p> <span>Student Id:</span> <input type="text" id="input2" placeholder="Enter Student ID" name="StudentID" onfocus="clearMyField(this);"></p>
<p> <span>Email:</span> <input type="text" id="input3" placeholder="Enter Email" name="Email" onfocus="clearMyField(this);"></p>
<p>
<button id="submitButton" type="submit"> Submit </button>
<input type="reset" value="Reset">
</p>
<p style="color:red" id="ErrorMessage"> </p>
</form>
Though I will prefer the following:
var message = document.getElementById("ErrorMessage");
function clearMyField(el) {
if(el.placeholder !='') {
el.placeholder = '';
}
}
function checkforblank() {
var allInputs = document.querySelectorAll('input[type=text]');
for(let i = 0; i<allInputs.length; i++){
let v = allInputs[i].value.trim();
let n = allInputs[i].name;
if(v == ""){
return false;
}
}
}
span {
padding-left: 10px;
display: block;
float: left;
width: 20%;
}
button { margin-left: 10px; }
body {
width: 80%; margin: auto; font-family: sans-serif;
border: 1px solid black;
}
<form id="myForm" method="get" onsubmit="return checkforblank()">
<h1> Form Submit </h1>
<p> <span>Name:</span> <input type="text" id="input1" placeholder="Enter Name" name="Name" onfocus="clearMyField(this);" required></p>
<p> <span>Student Id:</span> <input type="text" id="input2" placeholder="Enter Student ID" name="StudentID" onfocus="clearMyField(this);" required></p>
<p> <span>Email:</span> <input type="text" id="input3" placeholder="Enter Email" name="Email" onfocus="clearMyField(this);" required></p>
<p>
<button id="submitButton" type="submit"> Submit </button>
<input type="reset" value="Reset">
</p>
</form>

You can use html5 attributes to do this easily. (required, placeholder attributes)
Try below code.
<!doctype html>
<html lang="en">
<head>
<title> Lab 6 - Task 2 </title>
<style>
span {
padding-left: 10px;
display: block;
float: left;
width: 20%;
}
button { margin-left: 10px; }
body {
width: 80%; margin: auto; font-family: sans-serif;
border: 1px solid black;
}
</style>
<meta charset="utf-8">
</head>
<body>
<form id="myForm" method="get">
<h1> Form Submit </h1>
<p><span>Name:</span> <input id="input1" placeholder="Enter Name" name="Name" required></p>
<p><span>Student Id:</span> <input id="input2" placeholder="Enter Student ID" name="StudentID" required></p>
<p><span>Email:</span> <input id="input3" placeholder="Enter Email" name="Email" required></p>
<p>
<button id="submitButton" type="submit">Submit </button>
<input type="reset" value="Reset"/>
</p>
<p style="color:red" id="ErrorMessage"> </p>
</form>
</body>
</html>

You cannot see the error messages because the form submission refreshes the page. To see the errors, use event.preventDefault to get the errors.
Try the below code.
<html lang="en">
<head>
<title> Lab 6 - Task 2 </title>
<style>
span {
padding-left: 10px;
display: block;
float: left;
width: 20%;
}
button { margin-left: 10px; }
body {
width: 80%; margin: auto; font-family: sans-serif;
border: 1px solid black;
}
</style>
<meta charset="utf-8">
</head>
<body>
<form id="myForm" method="get">
<h1> Form Submit </h1>
<p> <span>Name:</span> <input type="text" id="input1" placeholder="Enter Name" name="Name" onfocus="clearMyField(this);"></p>
<p> <span>Student Id:</span> <input type="text" id="input2" placeholder="Enter Student ID" name="StudentID" onfocus="clearMyField(this);"></p>
<p> <span>Email:</span> <input type="text" id="input3" placeholder="Enter Email" name="Email" onfocus="clearMyField(this);"></p>
<p>
<button id="submitButton" type="submit"> Submit </button>
<input type="reset" value="Reset">
</p>
<p style="color:red" id="ErrorMessage"> </p>
</form>
<script>
var message = document.getElementById("ErrorMessage");
//document.getElementById('myForm')
function clearMyField(el) {
if (el.placeholder != '') {
el.placeholder = '';
}
}
//Add event listener
document.getElementById('myForm')
.addEventListener('submit', function (e) {
console.log('submit')
//prevent the default submission to see the errors.
e.preventDefault()
var allInputs = document.querySelectorAll('input[type=text]');
for (let i = 0; i < allInputs.length; i++) {
let v = allInputs[i].value.trim();
let n = allInputs[i].name;
if (v == "") {
message.textContent = n + " is empty";
return false;
}
}
})
</script>
</body>
</html>

form validation message (dynamic)

Is there a way to dynamically tell which .input has yet to be entered? In the code below you can see that if I enter out of order, the #message
only counts how many inputs have been populated and displays the message listed in order under numValid == 1, 2, 3, etc.
Can the code be changed to dynamically display a message for the .inputs that have not been populated?
*****Example: if I type in the Last Name and Student ID field, the message will either tell me to enter in the First Name or City field, etc. until they are all populated and the last validation (success message) is displayed*****
$("#form input").keyup(function() {
var numValid = 0;
$("#form input[required]").each(function() {
if (this.validity.valid) {
numValid++;
}
});
var progress = $("#progress"),
progressMessage = $("#message");
if (numValid == 1) {
progress.attr("value", "25");
progressMessage.text("Please Enter the First Name.");
}
if (numValid == 2) {
progress.attr("value", "50");
progressMessage.text("Please Enter the Last Name.");
}
if (numValid == 3) {
progress.attr("value", "75");
progressMessage.text("Please Enter a City.");
}
if (numValid == 4) {
progress.attr("value", "100");
progressMessage.text("You're done, post!");
}
});
#mainformdiv {
margin-left: auto;
margin-right: auto;
width: 500px;
border: 1px solid;
border-radius: 10px;
}
#form {
padding: 20px;
}
#progress {
width: 460px;
height: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainformdiv">
<form id="form">
<div id="progressdiv">
<progress max="100" value="0" id="progress"></progress>
<div id="message">Progress Message...</div>
</div>
<div class="input">
<label for="userid">Student ID</label><br>
<input id="userid" required="required" type="text">
</div>
<div class="input">
<label for="firstname">First Name</label><br>
<input id="firstname" required="required" type="text">
</div>
<div class="input">
<label for="lastname">Last Name</label><br>
<input id="lastname" required="required" type="text">
</div>
<div class="input">
<label for="city">City</label><br>
<input id="city" required="required" type="text"></br>
</div>
</form>
</div>

Easy to accomplish, just iterate over all of the required fields, and join their ids into a string. If you want to display a nicer looking name, then just map the IDs to an object first.
$("#form input").keyup(function() {
var numValid = 0;
$("#form input[required]").each(function() {
if (this.validity.valid) {
numValid++;
}
});
var progress = $("#progress"),
progressMessage = $("#message");
const invalidInputs = Array.from(document.querySelectorAll('#form input[required]'))
.filter(input => !input.validity.valid)
.map(input => input.id);
progress.attr("value", numValid * 25);
if (numValid == 4) {
progressMessage.text("You're done, post!");
} else {
progressMessage.text('Please fill out the following fields: ' + invalidInputs.join(', '));
}
});
#mainformdiv {
margin-left: auto;
margin-right: auto;
width: 500px;
border: 1px solid;
border-radius: 10px;
}
#form {
padding: 20px;
}
#progress {
width: 460px;
height: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainformdiv">
<form id="form">
<div id="progressdiv">
<progress max="100" value="0" id="progress"></progress>
<div id="message">Progress Message...</div>
</div>
<div class="input">
<label for="userid">Student ID</label><br>
<input id="userid" required="required" type="text">
</div>
<div class="input">
<label for="firstname">First Name</label><br>
<input id="firstname" required="required" type="text">
</div>
<div class="input">
<label for="lastname">Last Name</label><br>
<input id="lastname" required="required" type="text">
</div>
<div class="input">
<label for="city">City</label><br>
<input id="city" required="required" type="text"></br>
</div>
</form>
</div>

JQuery addClass working in a very odd manner

I have a form with 3 inputs: 2 text inputs for a Username and E-mail and a third password input for, you guessed it, a password.
I'm validating these input fields in JQuery and when an input is either empty or doesn't match it's format, it adds a class to the input with a red border. The code goes as follows:
if ($("input#username").val().length < 6) {
$("input#username").addClass('input-error');
next_step = false;
} else if (!isEmail($("#email").val())) {
$("#email").addClass('input-error');
next_step = false;
} else if (!isPassword($("#pwd").val())) {
$("#pwd").addClass('input-error');
next_step = false;
}
else {
$(this).removeClass('input-error');
next_step = true;
}
It works perfectly with both Username and E-mail fields, and it also works if the Password field is empty, but even though it validates perfectly, the addClass() doesn't work if the Password doesn't meet it's requirements (At least one Uppercase letter and one number).
This is what the browser console shows:
As you can see, it kind of adds the class, but then not really.
What is happening? If you need the HTML code and/or the CSS code, tell me!
Thanks for your attention!
EDIT
Here is the HTML and CSS as requested:
<fieldset>
<div class="form-bottom">
<img src="img/gbsnlogo.svg" alt="GBSN Research" name="GBSN Research" width="50%" class="signupLogo" />
<br>
<br>
<br>
<div class="form-group">
<label for="username"><h1>USERNAME:</h1></label>
<input type="text" class="form-control" id="username" placeholder="Enter username..." name="username">
</div>
<div class="form-group">
<label for="email"><h1>E-MAIL:</h1></label>
<input type="text" class="form-control" id="email" placeholder="Enter e-mail..." name="email">
</div>
<div class="form-group">
<label for="pwd"><h1>PASSWORD:</h1></label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password..." name="pwd">
</div>
<div class="text-center">
<button type="button" class="btn-next btn-nav"><h1>NEXT</h1></button>
</div>
</div>
</fieldset>
and the CSS:
.form-control {
height: 40px;
border: 2px solid black;
border-radius: 0;
font-size: 14px;
}
.form-control:focus {
border: 2px solid black;
box-shadow: 0;
}
.input-error {
border-color: #FF2859;
}

This is working for me.
Please comment what is still not working if you have this kind of setup?
function isEmail(email) { // dummy example
return email.indexOf("#")>1;
}
function isPassword(passwd) { // dummy example
return passwd.indexOf("x")>=0; // must contain x
}
$(function() {
$(".btn-next").on("click", function() {
$(".form-group input").removeClass('input-error');
var next_step = true,
user = $("#username").val(),
email = $("#email").val(),
pwd=$("#pwd").val();
if (user.length < 6) {
$("#username").addClass('input-error');
next_step = false;
} else if (!isEmail(email)) {
$("#email").addClass('input-error');
next_step = false;
} else if (!isPassword(pwd)) {
$("#pwd").addClass('input-error');
next_step = false;
}
console.log(next_step);
});
});
.form-control {
height: 40px;
border: 2px solid black;
border-radius: 0;
font-size: 14px;
}
.form-control:focus {
border: 2px solid black;
box-shadow: 0;
}
.input-error {
border-color: #FF2859;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<fieldset>
<div class="form-bottom">
<img src="img/gbsnlogo.svg" alt="GBSN Research" name="GBSN Research" width="50%" class="signupLogo" />
<br>
<br>
<br>
<div class="form-group">
<label for="username"><h1>USERNAME:</h1></label>
<input type="text" class="form-control" id="username" placeholder="Enter username..." name="username">
</div>
<div class="form-group">
<label for="email"><h1>E-MAIL:</h1></label>
<input type="text" class="form-control" id="email" placeholder="Enter e-mail..." name="email">
</div>
<div class="form-group">
<label for="pwd"><h1>PASSWORD:</h1></label>
<input type="text" class="form-control" id="pwd" placeholder="Enter password..." name="pwd">
</div>
<div class="text-center">
<button type="button" class="btn-next btn-nav"><h1>NEXT</h1></button>
</div>
</div>
</fieldset>

From what I see from the image you posted
I can only speculate this is what happened.
The line [input#pwd.form-control.input-error] was evaluated immediately when it got printed to the console. So that mean at that time, the dom does have the class input error in it. However, when you expand it, the dom got re-evaluated again. And at that time, the dom's class input-error got removed, so you don't see it anymore. I was able to prove this by running $('#pwd').addClass('input-error') and $('#pwd').removeClass('input-error') in that order, image below
Based on that, I suspect you have another logic in the code that remove the class shortly after you have added the class to the dom, highly possibly $(this).removeClass('input-error');.