We Keep Coding

Displaying all changes to a <input type=“text”> (immediately) using JQuery

I am working in a website project, Which want to display what we editing in <input type="text" id="input" /> tag.
But problem is result only displaying in <div class="result"></div>.
I want to display it in <input type="text" class="reult" /> and <textarea class="result"></textarea> .
I tried many times to fix it. I also created a codepen page for it.. https://codepen.io/coderco/pen/abNNVyw . Please check codes below.
input[type=text],select,textarea{display:block;width:27em;color:#000!important;background:#fff!important;margin-top:1em;height:34px;font-size:1.2em;font-family:"sans-serif";border:2px solid #000;padding:2px 10px;font-family:arial;font-size:18px}
textarea{display:block;width:27em;margin-top:4em;height:125px;font-size:1.2em;font-family:"sans-serif";border:2px solid #000;padding:2px 10px;font-family:arial;font-size:18px;color:#000!important;background:#fff!important;margin-bottom:10px}
.result{margin-top:20px;width:20em;height:5em;float:left;font-family:arial;font-size:18px;background:#333;color:#fff;margin-right:1em;padding:10px}
<input type="text" id="input" placeholder="Edit Here" />
<div class="result"></div>
<div class="result"></div>
<textarea class="result" placeholder="Display Result Here"></textarea>
<input type="text" class="result" placeholder="Display Result Here"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="js/script.js"></script>
// Choose relevant input elements
var inputs = $('input,select,textarea')
// Bind a new event to the inputs
.bind("newInput", function(){
// Abbreviate
var $t = $(this);
// Log the results
$('.result')
.text( $t.val() );
});
(function scan(){
inputs.each(function() {
$t = $(this);
if ( $t.data('oldVal') !== $t.val() ) {
$t.trigger('newInput');
$t.data('oldVal',$t.val());
}
});
setTimeout(scan,100);
})();

You are over complicating things. Here is simple JS to the job.
Div element takes no value parameter, it takes inerHTML, and texatera and input takes value.
document.querySelector('#input').addEventListener('keyup', val, false);
function val() {
[...document.querySelectorAll('.result')].forEach(el => {
el.value=this.value;
el.innerHTML=this.value;
})
}
JS EXAMPLE:
document.querySelector('#input').addEventListener('keyup', val, false);
function val() {
[...document.querySelectorAll('.result')].forEach(el => {
el.value=this.value;
el.innerHTML=this.value;
})
}
input[type=text],
select,
textarea {
display: block;
width: 27em;
margin-top: 4em;
height: 34px;
font-size: 1.2em;
font-family: "sans-serif";
border: 2px solid #000;
padding: 2px 10px;
font-family: arial;
font-size: 18px;
}
.result {
margin-top: 20px;
width: 20em;
height: 5em;
float: left;
font-family: arial;
font-size: 18px;
background: #333;
color: #fff;
margin-right: 1em;
padding: 10px;
}
<input type="text" id="input" placeholder="Edit Here" />
<div class="result"></div>
<div class="result"></div>
<textarea class="result"></textarea>
<input type="text" class="result" />
If you want to do this in jQuery:
You have to use .text() or .html() for divs, and .val() for input and textarea
$("#input").keyup(function(){
let inValue=$(this).val();
$(".result").each(function(){
$(this).text(inValue);
$(this).val(inValue);
});
});
jQuery EXAMPLE:
$("#input").keyup(function(){
let inValue=$(this).val();
$(".result").each(function(){
$(this).text(inValue);
$(this).val(inValue);
});
});
input[type=text],
select,
textarea {
display: block;
width: 27em;
margin-top: 4em;
height: 34px;
font-size: 1.2em;
font-family: "sans-serif";
border: 2px solid #000;
padding: 2px 10px;
font-family: arial;
font-size: 18px;
}
.result {
margin-top: 20px;
width: 20em;
height: 5em;
float: left;
font-family: arial;
font-size: 18px;
background: #333;
color: #fff;
margin-right: 1em;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="input" placeholder="Edit Here" />
<div class="result"></div>
<div class="result"></div>
<textarea class="result"></textarea>
<input type="text" class="result" />

How to calculate percentage with simple JavaScript code

I have already created a form in html and linked it with my style sheet and also JavaScript page.
My problem is displaying the result on the form.
Can someone please take a look at the JavaScript code and tell me what I am doing wrong?
See the snippet for more details
// Percentage Calculator
const myForm = document.getElementById('my-form');
myForm.onsubmit = e=>e.preventDefault() // disable form submit
;
myForm.oninput = percentageCalculator;
function percentageCalculator(amount, percent) {
return ((percent *amount) / 100).toFixed(2)
}
myForm.result.value = percentageCalculator()
fieldset { margin-top: 1em;
}
label {
display: inline-block; width: 8em; text-align: left;
}
input {
font-size: .8em; text-align: left; display: inline-block; width: 8em;
}
output::before {
content: '';
}
output {
font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
}
<h2>Percentage Calculator</h2>
<form action="" id="my-form">
<fieldset>
<legend>Calculate Percentage :</legend>
<append>What is <input type="number" name="percent" step=any min=0> % of </append>
<label><input type="number" class="amount" step=any min=0></label>
</fieldset>
<fieldset><br>
<legend>Result :</legend>
<output name="result" value='0'></output>
<br><br>
<button type="reset">Reset Calculator!</button>
</fieldset>
</form>

If you want to make result instantly on click of the input boxes then, make addEventListerner to input elements then get the value inside percentageCalculator and make calculation accordingly..
I have not modified anything from your HTML and only modified the JS part..
const myForm = document.getElementById('my-form');
const percent = document.querySelector('[name="percent"]');
const amount = document.querySelector('.amount');
const result = document.querySelector('[name="result"]');
function percentageCalculator() {
result.value = ((percent.value * amount.value) / 100).toFixed(2)
}
myForm.addEventListener('submit', e=>e.preventDefault())
myForm.addEventListener('input', percentageCalculator)
// myForm.result.value = percentageCalculator()
fieldset { margin-top: 1em;
}
label {
display: inline-block; width: 8em; text-align: left;
}
input {
font-size: .8em; text-align: left; display: inline-block; width: 8em;
}
output::before {
content: '';
}
output {
font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
}
<h2>Percentage Calculator</h2>
<form action="" id="my-form">
<fieldset>
<legend>Calculate Percentage :</legend>
<append>What is <input type="number" name="percent" step=any min=0> % of </append>
<label><input type="number" class="amount" step=any min=0></label>
</fieldset>
<fieldset><br>
<legend>Result :</legend>
<output name="result" value='0'></output>
<br><br>
<button type="reset">Reset Calculator!</button>
</fieldset>
</form>
If it is possible for you to modify HTML template then you can add name attribute to the amount input as well then you can get the element with myForm.inputName..
Alternative solution: https://codepen.io/Maniraj_Murugan/pen/KKpdgXo

Use oninput as I did below. Also give the amount input field a name. it's missing in the OP.
// Percentage Calculator
const myForm = document.getElementById('my-form');
myForm.oninput = () => {
myForm.result.value = percentageCalculator(myForm.amount.value, myForm.percent.value);
}
function percentageCalculator(amount, percent) {
return ((percent * amount) / 100).toFixed(2)
}
fieldset { margin-top: 1em;
}
label {
display: inline-block; width: 8em; text-align: left;
}
input {
font-size: .8em; text-align: left; display: inline-block; width: 8em;
}
output::before {
content: '';
}
output {
font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
}
<h2>Percentage Calculator</h2>
<form action="" id="my-form">
<fieldset>
<legend>Calculate Percentage :</legend>
<append>What is <input type="number" name="percent" step=any min=0> % of </append>
<label><input type="number" name="amount" class="amount" step=any min=0></label>
</fieldset>
<fieldset><br>
<legend>Result :</legend>
<output name="result" value='0'></output>
<br>
<button type="reset">Reset Calculator!</button>
</fieldset>
</form>

Pass the parameters into the function as a local scope and return the result back.
function percentageCalculator(amount,percent) {
return ((percent *amount) / 100).toFixed(2)
}
myForm.result.value = percentageCalculator()

// Percentage Calculator
const calculatedResult = document.getElementById('result');
function mySubmitFunction(e) {
e.preventDefault();
const percent = document.getElementById('percent').value;
const amount = document.getElementById('amount').value;
calculatedResult.value = percentageCalculator(amount,percent);
return false;
}
function percentageCalculator(amount,percent) {
return ((percent *amount) / 100).toFixed(2)
}
fieldset { margin-top: 1em;
}
label {
display: inline-block; width: 8em; text-align: left;
}
input {
font-size: .8em; text-align: left; display: inline-block; width: 8em;
}
output::before {
content: '';
}
output {
font-weight: bold; width: 16em; border-bottom: 1px solid lightgrey; display: block; margin: .8em; float: right; text-align: right;
}
<h2>Percentage Calculator</h2>
<form action="" onsubmit="return mySubmitFunction(event)" id="my-form">
<fieldset>
<legend>Calculate Percentage :</legend>
<append>What is <input type="number" id="percent" name="percent" step=any min=0> % of </append>
<label><input type="number" id="amount" class="amount" step=any min=0></label>
</fieldset>
<fieldset><br>
<legend>Result :</legend>
<output id="result" name="result" value='0'></output>
<br><br>
<button type="submit">Calculate!</button>
</fieldset>
</form>
Your mistake:
Submit button instead of reset
Prevent default once it's submitted
reference element using ID

Javascript - I can not see the result of the sum of values

I have a design problem in the script that gives me the values ​​of the right column (ignoring the values ​​on the left), and the result of the sume I can not see in the green box when I click on "View Result"
// Old script
/*window.sumInputs = function() {
var inputs = document.getElementsByTagName('input'),
result = document.getElementById('total'),
sumar = 0;
for(var i=0; i<inputs.length; i++) {
var ip = inputs[i];
if (ip.name && ip.name.indexOf("total") < 0) {
sumar += parseInt(ip.value) || 0;
}
}
result.value = sumar;
}*/
// ========================
// New script
$(document).ready(function() {
var valores = $('#derecha').children();
var suma = 0;
$.each(valores, function() {
valor = $(this).val() || 0;
suma += parseInt(valor);
});
//console.log(suma);
valores = document.getElementById('total');
});
body p {
margin: 0 20px
}
/*#izquierda {display:none}*/
#izquierda,
#derecha {
display: inline-block;
vertical-align: top;
width: 140px;
margin: 20px 20px 20px 20px;
padding: 10px;
border: 1px solid #000
}
#izquierda span,
#derecha span,
body span {
font-weight: bold
}
#izquierda p,
#derecha p {
margin: 5px auto 15px;
text-align: center
}
input {
width: 80px;
display: block;
margin: 5px auto;
padding: 2px 0;
background: #f2f2f2;
border: none;
border: 1px solid #000;
text-align: center
}
#cont-resultado {
text-align: center;
width: 120px;
padding-left: 40px
}
#cont-resultado input {
display: inline-block;
margin: 0 auto 10px;
background: red;
color: #fff;
border: none;
padding: 10px 0
}
#cont-resultado a {
display: inline-block;
text-decoration: none;
color: #fff;
background: green;
padding: 10px 12px
}
#total {
display: block
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="izquierda">
<p><span>DIV LEFT</span><br>display="none"</p>
<input name="qty1" value="240">
<input name="qty2" value="862">
<input name="qty3" value="911">
<input name="qty4" value="">
<input name="qty5" value="">
<input name="qty6" value="">
<input name="qty7" value="">
<input name="qty8" value="">
</div>
<!-- ================ -->
<div id="derecha">
<p><span>DIV RIGHT</span><br>display="block"</p>
<input name="qty1" value="2">
<input name="qty2" value="2">
<input name="qty3" value="2">
<input name="qty4" value="">
<input name="qty5" value="">
<input name="qty6" value="">
<input name="qty7" value="">
<input name="qty8" value="">
</div>
<!-- ================ -->
<div id="cont-resultado">
<input name="total" id="total">
See total
</div>
<br>
<p>What I am looking for is that only the RIGHT column is sumed, ignoring the values in the left column. <br><br><span>The result of example (6) must be seen in the red box...</span></p>
What am I doing wrong...?
Thanks in advance!
$(document).ready(function(){
var valores = $('#derecha').children();
var suma = 0;
$.each(valores,function(){
valor = $(this).val() || 0;
suma += parseInt( valor );
});
//console.log(suma);
valores = document.getElementById('total');
});

You're not doing anything with suma, further, use a selector for the children .children('input').
$(document).ready(function() {
function sumInputs(e) {
e.preventDefault();
var valores = $('#derecha').children('input');
var suma = 0;
$.each(valores, function() {
valor = $(this).val();
suma += Number(valor);
});
valores = document.getElementById('total');
$(valores).val(suma);
}
$('#sumup').on('click', sumInputs);
});
body p { margin: 0 20px}/*#izquierda {display:none}*/#izquierda,#derecha { display: inline-block; vertical-align: top; width: 140px; margin: 20px 20px 20px 20px; padding: 10px; border: 1px solid #000}#izquierda span,#derecha span,body span { font-weight: bold}#izquierda p,#derecha p { margin: 5px auto 15px; text-align: center}input { width: 80px; display: block; margin: 5px auto; padding: 2px 0; background: #f2f2f2; border: none; border: 1px solid #000; text-align: center}#cont-resultado { text-align: center; width: 120px; padding-left: 40px}#cont-resultado input { display: inline-block; margin: 0 auto 10px; background: red; color: #fff; border: none; padding: 10px 0}#cont-resultado a { display: inline-block; text-decoration: none; color: #fff; background: green; padding: 10px 12px}#total { display: block}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="izquierda"> <p><span>DIV LEFT</span><br>display="none"</p> <input name="qty1" value="240"> <input name="qty2" value="862"> <input name="qty3" value="911"> <input name="qty4" value=""> <input name="qty5" value=""> <input name="qty6" value=""> <input name="qty7" value=""> <input name="qty8" value=""></div><!-- ================ --><div id="derecha"> <p><span>DIV RIGHT</span><br>display="block"</p> <input name="qty1" value="2"> <input name="qty2" value="2"> <input name="qty3" value="2"> <input name="qty4" value=""> <input name="qty5" value=""> <input name="qty6" value=""> <input name="qty7" value=""> <input name="qty8" value=""></div><!-- ================ --><div id="cont-resultado"> <input name="total" id="total"> <a id='sumup' href="#">See total</a></div><br><p>What I am looking for is that only the RIGHT column is sumed, ignoring the values in the left column. <br><br><span>The result of example (6) must be seen in the red box...</span></p>

You need to set the value of valores (the new one) to suma:
valores.val(suma);

Transfer input from prompt() into a text field

I have a HTML page in which when the start button is being pressed, a prompt box will appear to prompt the user to enter his/her name. When user enters his/her name and confirms the input, it would appear on the black box (as shown in the code) with white text color. I am not sure of how to "transfer" the value from prompt() to text field. I know the value of the input fields are empty by default.
function myFunction() {
var person = prompt("Please enter your name");
if (person != null) {
person = document.getElementById(input).value;
}
}
#input{
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #191818;
color: white;
}
#input1 {
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #7C7878;
color: white;
}
.btnEdit{
width: 30px;
margin: 5px;
display: block;
font-weight:bold;
text-align:center;
font-size:10px;
line-height:15px;
}
<h2>Part 3</h2>
<button onclick="return myFunction()" id="strt" value="Start">Start</button>
<button onclick="return reset()" id="clr" value="Clear">Clear</button> <br />
<br>
<input type="text" id="input" style="text-align:center;" name="input"/>
<button id="swap" value="Swap" class="btnEdit">--></button>
<button id="swap1" value="Swap1" class="btnEdit"><--</button>
<input type="text" id="input1" value="" style="text-align:center;" name="input1"/>
Expected output would be for the user to enter his/her name in the prompt and upon confirmation, his/her name will appear in the text field in black with white text colors.

You just need to swap it.
person = document.getElementById(input).value;
The above is wrong. It should be:
document.getElementById("input").value = person;
And you need to update the "input" too. It's not a constant.
function myFunction() {
var person = prompt("Please enter your name");
if (person != null) {
document.getElementById("input").value = person;
}
}
#input {
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #191818;
color: white;
}
#input1 {
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #7C7878;
color: white;
}
.btnEdit {
width: 30px;
margin: 5px;
display: block;
font-weight: bold;
text-align: center;
font-size: 10px;
line-height: 15px;
}
<h2>Part 3</h2>
<button onclick="return myFunction()" id="strt" value="Start">Start</button>
<button onclick="return reset()" id="clr" value="Clear">Clear</button> <br />
<br>
<input type="text" id="input" style="text-align:center;" name="input" />
<button id="swap" value="Swap" class="btnEdit">--></button>
<button id="swap1" value="Swap1" class="btnEdit"><--</button>
<input type="text" id="input1" value="" style="text-align:center;" name="input1" />

function myFunction() {
var person = prompt("Please enter your name");
if (person != null) {
document.getElementById('input').value = person;
}
}
#input{
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #191818;
color: white;
}
#input1 {
width: 15%;
padding: 50px 50px;
margin: 8px 0;
background-color: #7C7878;
color: white;
}
.btnEdit{
width: 30px;
margin: 5px;
display: block;
font-weight:bold;
text-align:center;
font-size:10px;
line-height:15px;
}
<h2>Part 3</h2>
<button onclick="return myFunction()" id="strt" value="Start">Start</button>
<button onclick="return reset()" id="clr" value="Clear">Clear</button> <br />
<br>
<input type="text" id="input" style="text-align:center;" name="input"/>
<button id="swap" value="Swap" class="btnEdit">--></button>
<button id="swap1" value="Swap1" class="btnEdit"><--</button>
<input type="text" id="input1" value="" style="text-align:center;" name="input1"/>

How do I get a custom radio button to check?

I am creating a custom form but have hit a snag: The Radio buttons; when you click on them in the unchecked status the do not check. They will check if click the associated Div and the will also uncheck when checked. I have tried to extend the JS to the Label and It still does not work. And so...
How do I get a custom radio button to check and/or what do i need to do to get this to function?
Here is the relevant Code:
function check(checkbox) {
if (document.getElementById(checkbox).checked == false) {
document.getElementById(checkbox).checked = true;
} else {
document.getElementById(checkbox).checked = false;
}
}
.title {
display: inline;
position: relative;
top: 2px;
font-family: "Arial";
color: #fff;
font-size: 18px;
padding: 0px;
margin: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
border-collapse: collapse;
font-stretch: ultra-condensed;
}
input[type="radio"] {
display: none;
}
[type="radio"] + label {
width: 10px;
height: 10px;
}
[type="radio"] + label {
background-color: #A3D5FF;
border: 1px solid #A3D5FF;
padding: 9px;
border-radius: 20px;
display: inline-block;
position: relative;
margin-right: 30px;
}
[type="radio"]:checked + label {
background-color: #0088A8;
;
border: 3px solid #fff;
height: 5.75px;
width: 5.75px;
color: #243441;
}
input[type="radio"] + label {
cursor: pointer;
font-size: 1em;
float: right;
position: relative;
right: -27px;
}
.chk {
background: #009FC2;
width: 265px;
height: 30px;
margin: 5px;
padding: 5px;
border-radius: 5px;
}
.chk:hover {
background: #0088A8;
}
HTML
<div class="chk" onClick="check('f-unlimited')">
<h3 class="title">
Unlimited
</h3>
<input id="f-unlimited" name="format" type="radio" value="f-unlimited" checked="checked"></input>
<label for="f-unlimited"></label>
</div>
<div class="chk" onClick="check('f-expandedFormat')">
<h3 class="title">
Expanded Format
</h3>
<input id="f-expandedFormat" name="format" type="radio" value="f-expandedFormat"></input>
<label for="f-expandedFormat"></label>
</div>
<div class="chk" onClick="check('f-standardLegal')">
<h3 class="title">
Standard Legal
</h3>
<input id="f-standardLegal" name="format" type="radio" value="f-standardLegal"></input>
<label for="f-standardLegal"></label>
</div>
</div>
Additional note: I am running almost identical code for my checkboxes and they are working perfectly.

The problem is in your check function. When you click on the div it fires to reverse the check state. When you click the check itself, the check state is reversed, then the check function runs and reverses the state again. You need to cancel event propagation when the check itself is clicked.

noted, previous answer was in jquery, please see below for vanilla
javascript :
function checkboxClicked() {
event.stopPropagation();
event.preventDefault();
}
function check(checkbox) {
if (document.getElementById(checkbox).checked == false) {
document.getElementById(checkbox).checked = true;
} else {
document.getElementById(checkbox).checked = false;
}
}
html :
<div class="chk" onClick="check('f-unlimited')">
<h3 class="title">
Unlimited
</h3>
<input onclick="checkboxClicked()" id="f-unlimited" name="format" type="radio" value="f-unlimited" checked="checked"></input>
<label for="f-unlimited"></label>
</div>
<div class="chk" onClick="check('f-expandedFormat')">
<h3 class="title">
Expanded Format
</h3>
<input onclick="checkboxClicked()" id="f-expandedFormat" name="format" type="radio" value="f-expandedFormat"></input>
<label for="f-expandedFormat"></label>
</div>
<div class="chk" onClick="check('f-standardLegal')">
<h3 class="title">
Standard Legal
</h3>
<input onclick="checkboxClicked()" id="f-standardLegal" name="format" type="radio" value="f-standardLegal"></input>
<label for="f-standardLegal"></label>
</div>