I am trying to set 2 variables with values from input fields and use them to calculate area.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<form>
<label for="fname">Height:</label>
<input type="text" id="boxHeight" name="fname"><br><br>
<label for="lname">Width:</label>
<input type="text" id="boxWidth" name="lname"><br><br>
</form>
</body>
</html>
//var l = jQuery('#boxWidth').find('input'); ---> does not work
//var h = jQuery('#boxHeight').find('input'); ---> does not work
var l = document.getElementById("#boxWidth");
var h = document.getElementById("#boxHeight");
var a = parseInt(l);
$(document).on("change paste keyup", "#boxWidth, #boxHeight", () => {
console.log("text "+a);
});
The code can be tested here get input to integer
Nothing seems to work. Any suggestions?
You have a number of small issues getting the right input, and the value from those inputs.
$(document).on("change paste keyup", "#boxLatime, #boxInaltime", () => {
var boxLatime = document.getElementById("boxLatime");
var boxInaltime = document.getElementById("boxInaltime");
var l = parseInt(boxLatime.value) || 0;
var h = parseInt(boxInaltime.value) || 0;
vr_do_l_h(l, h);
});
https://jsfiddle.net/dvtc9brq/
Related
Trying to pass changes in input field to a variable simultaneously with the change. But for some reason, my code detects only first change. For example, if I enter "100" into the field, it only detects "1". Nothing happens afterwards.
Here is my jquery
$(document).ready(function() {
var wholeshort = $(".shorcodeval").val();
a = wholeshort;
var w = /width="(.*?)"/.exec(a)[1];
$(".widthinput").on('input', function() {
nw = $(this).val();
wholeshort = wholeshort.replace(w, nw);
$(".shorcodeval").val(wholeshort);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="widthinput" />
<textarea class="shorcodeval">[example width="300px"]</textarea>
here is the fiddle
https://jsfiddle.net/3a6n1fux/
The problem is that after the first input you save [example width="1"] in wholeshort, but w is 300px so you try to replace 300px in [example width="1"].
To solve that you would need to save the result of wholeshort.replace(w, nw) in an own variable or pass it directly to .val(wholeshort.replace(w, nw)).
$(document).ready(function() {
var wholeshort = $(".shorcodeval").val();
var w = /width="(.*?)"/.exec(a)[1];
$(".widthinput").on('input', function() {
var nw = $(this).val();
$(".shorcodeval").val(wholeshort.replace(w, nw));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="widthinput" />
<textarea class="shorcodeval">[example width="300px"]</textarea>
I have Range/Number type inputs that are synchronized and dynamically generate input fields as much as their values.
Then I have a button that will fill the generated input fields with an arbitrary value.
The dynamically generated input fields each have unique IDs, but the document.getElementById() function fails to find any of the IDs and returns null.
Is there a way to change the value of the generated fields within the randomizeItemTypes() function?
function randomizeItemTypes(textbox) {
var rackNum = textbox.replace("itemSlider", "").replace("numOfTypes", "");
var numOfTypes = document.getElementById("numOfTypes1").value;
for (var i = 0; i < numOfTypes; i++) {
document.getElementById("rack" + rackNum + "." + i).value = 4;
}
}
The following link is the CodePen to my code:
http://codepen.io/cnc4ever/pen/LGNMEp
Thanks guys!
Your rackNum is giving some string instead of numbers
Your id for textbox is something like rack1.0 , rack1.1
use document.getElementById("rack1" + "." + i).value = 4; instead
<html>
<head>
<title></title>
</head>
<body>
<div class="itemsTypes1">
<input id="itemSlider1" type="range" value="" min="1" max="10" step="1" onchange="printValue(this.value);drawItemTypes('itemSlider1');" />
<input id="numOfTypes1" type="number" value="" min="1" max="10" onchange="printValue(this.value);drawItemTypes('numOfTypes1');" />
<p id="itemTypes1Area"></p>
<button id="randomize1" onclick="randomizeItemTypes()">Randomize</button>
</div>
<script type="text/javascript">
function printValue(data) {
var x = document.getElementById("itemSlider1").value = data;
var y = document.getElementById("numOfTypes1").value = data;
}
function randomizeItemTypes() {
var randomValue= Math.ceil(Math.random()*10);
printValue(randomValue);
}
</script>
</body>
</html>
Hi I am NewBee in Javascript. This is my second week.
Below is the code that has a form with three input fields.
The relationship of the fields is:
the second field is twice the value of the first field
the third field is the square of the first field
I have managed to do the above but i am not able to do the below :
If a user enters a value in the second or third field, the script should calculate the appropriate value in the other fields. Currently the code works well ONLY if I enter the value in the first field.
I hope I explained well in other words : how do I enter say 144 in the last textbox and the other 2 textboxes show 12 and 24 respectively. Or If I enter 24 first and first and the third text boxes show 12 and 144.
Thanks
Vipul
<html>
<head>
<script>
window.onload = init;
function init() {
var button = document.getElementById("usrButton");
button.onclick = save;
onkeyup = doMath;
function doMath(){
var base = document.getElementById("base").value;
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value = (base*2);
var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
}
}
</script>
</head>
<body>
<form>
<input type="text" name="base" id="base" onkeyup= "doMath()">
<br><br>
<input type="text" name="baseNumber_timesTwo" id="baseNumber_timesTwo" onkeyup= doMath()>
<br><br>
<input type="text" name="baseNumber_square" id="baseNumber_square" onkeyup= doMath()> <br><br>
</form>
</body>
</html>
take a look at the code below:
<html>
<head>
<script>
window.onload = init;
var init = function(){
var button = document.getElementById("usrButton");
button.onclick = save;
onkeyup = doMath;
}
var doMathbase = function(){
console.log('here');
var base = document.getElementById("base").value;
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value = (base*2);
var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
}
var doMathBase2Time = function(){
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo").value;
var base = document.getElementById("base").value = (baseNumber_timesTwo/2);
var baseNumber_square = document.getElementById("baseNumber_square").value = (base*base) ;
}
</script>
</head>
<body>
<form>
<input type="text" name="base" id="base" onkeyup= "doMathbase()">
<br><br>
<input type="text" name="baseNumber_timesTwo" id="baseNumber_timesTwo" onkeyup= "doMathBase2Time()">
<br><br>
<input type="text" name="baseNumber_square" id="baseNumber_square" onkeyup= "doMathBaseSquare()">
<br><br>
</form>
</body>
You need to bind another function to the second and third field. I did it to the second. Now if you entered a number in the second field it return the 'base' number and the square of the base.
Try do it for the third :)
This should fit your needs:
Fiddle
//declaring those earlier saves you to get those by ID every
//time you call "doMath()" or something else
var base = document.getElementById("base");
var baseNumber_timesTwo = document.getElementById("baseNumber_timesTwo");
var baseNumber_square = document.getElementById("baseNumber_square");
function clearUp() {
base.value = "";
baseNumber_timesTwo.value = "";
baseNumber_square.value = "";
}
function doMath() {
//check which of the fields was filled
if(baseNumber_timesTwo.value){
base.value = baseNumber_timesTwo.value / 2;
}
if(baseNumber_square.value){
base.value = Math.sqrt(baseNumber_square.value);
}
//fill other fields according to that
baseNumber_timesTwo.value = (base.value*2);
baseNumber_square.value = (base.value*base.value) ;
}
As you see: There is no need to write more than one arithmetic function if you make sure that only one value is given at the time of evaluation (this is achieved by the cleanUp()
method)
However there are still some flaws in this solution! Since you are a js beginner I would suggest you to read the code and think about possible solutions for those problems as a little exercise :-)
- You cannot enter a 2 (or more) digit number in any field, why not? What do you have to change in order to allow such numbers as input?
- Why is it better (in this case!) to set the values to " " instead of '0' in the cleanUp function? Why does the code break when you try using '0' instead of "" ?
- Why does doMath() only check for values in the last two field (baseNumber_timesTwo and baseNumber_square) while ignoring the 'base' field?
Greetings, Tim
I have form as follows :
<input name="website_charges" id="website_charges" type="text" value="" /><br>
<input name="monthly_fixed_charges" id="monthly_fixed_charges" type="text" value="" />
<input name="members_registered" id="members_registered" type="text" value="" /><br>
<input name="per_member" id="per_member" type="text" value="" /><br>
<input name="member_total_charges" id="member_total_charges" type="text" value="" /><br>
<input name="monthly_sessions" id="monthly_sessions" type="text" value="" /><br>
<input name="per_session" id="per_session" type="text" value="" /><br>
<input name="session_total_charges" id="session_total_charges" type="text" value="" /><br>
<input name="total_dues" id="total_dues" type="text" value="" /><br>
<input name="paid_amount" id="paid_amount" type="text" value="" /><br>
<input name="balance" id="balance" type="text" value="" /><br>
Out of These #website_charges, #monthly_fixed_charges, #members_registered, #per_member, #monthly_sessions, #per_session fields are manually entered.
currently my javascript code adding #member_total_charges and #session_total_charges dynamically.
But I am not getting How To Sum And Add These Two Dynamically added field values (i.e. #member_total_charges and #session_total_charges) + #website_charges + #monthly_total_charges in #total_dues field And Then Show Final Balance in #balance field after entering #paid_amount Fiield?
Current Javascript code is as follows :
<script type="text/javascript">
$(document).ready(function() {
$('#member_registered, #per_member').change(function(){
var mem = parseInt($('#member_registered').val()) || 0;
var permem = parseInt($('#per_member').val()) || 0;
$('#member_total_charges').val(mem * permem);
});
$('#monthly_sessions, #per_session').change(function(){
var month = parseInt($('#monthly_sessions').val()) || 0;
var perses= parseInt($('#per_session').val()) || 0;
$('#session_total_charges').val(month * perses);
});
});
</script>
JSFIDDLE Is Here****
To bind elements which generated dynamicly, use .live() function to binding events:
$("#member_total_charges, #session_total_charges").live("change", function () {
//do sum work
});
Note that change event only triggers after the <input> lost focus, so if you want to run the sum function as soon as you type a char, use keyup event instead.
Try using this code
<script type="text/javascript">
$(document).ready(function() {
$('#member_registered, #per_member').on('input change',function(){
var mem = parseInt($('#member_registered').val()) || 0;
var permem = parseInt($('#per_member').val()) || 0;
$('#member_total_charges').val(mem * permem);
});
$('#monthly_sessions, #per_session').on('input change',function(){
var month = parseInt($('#monthly_sessions').val()) || 0;
var perses= parseInt($('#per_session').val()) || 0;
$('#session_total_charges').val(month * perses);
});
$('#member_total_charges, #session_total_charges').on('change',function(){
var memtc = parseInt($('#member_total_charges').val()) || 0;
var sestc = parseInt($('#session_total_charges').val()) || 0;
$('#total_dues').val(memtc + sestc);
});
});
</script>
using the on() method will work better and you can use multiple arguments input, change, mouseover etc...
So basicly if you want to change a dynamically added values select theri id'and call .on() method with the string of parameters that you need and then your statement, like you did for your previous elements.
And if you have any troubles you can check this.
I hope this was helpfull
I Solved it as follows:
1) I removed all readonly attributes as suggested by #Bandon
2) Updated Code (By Editing code given by #Bandon jsfiddle) Is As Follows :
<script>
$(document).ready(function () {
$('#website_charges, #monthly_fixed_charges').on('input change', function () {
var web = parseInt($('#website_charges').val()) || 0;
var mfc = parseInt($('#monthly_fixed_charges').val()) || 0;
$('#subtotal').val(web + mfc);
});
$('#member_registered, #per_member').on('input change', function () {
var mem = parseInt($('#member_registered').val()) || 0;
var permem = parseInt($('#per_member').val()) || 0;
$('#member_total_charges').val(mem * permem);
});
$('#monthly_sessions, #per_session').on('input change', function () {
var month = parseInt($('#monthly_sessions').val()) || 0;
var perses = parseInt($('#per_session').val()) || 0;
$('#session_total_charges').val(month * perses);
});
$("input").live("keyup focus blur", "#subtotal_dues, #total_dues, #balance", function () {
var memtc = parseInt($('#member_total_charges').val()) || 0;
var sestc = parseInt($('#session_total_charges').val()) || 0;
$('#subtotal_dues').val(memtc + sestc);
var memtca = parseInt($('#subtotal').val()) || 0;
var sestca = parseInt($('#subtotal_dues').val()) || 0;
$('#total_dues').val(memtca + sestca);
var td = parseInt($('#total_dues').val()) || 0;
var paid = parseInt($('#paid_amount').val()) || 0;
$('#balance').val(td - paid);
});
});
</script>
UPDATED JSFIDDLE IS HERE
Thank to #Bandon
I have a form that requires three inputs as follows:
<form>
<input name="mn"
type="number"
min="1"
value="1">
<input name="mx"
type="number"
min="2"
value="10">
<input name="step"
type="number"
min="1"
value="1">
<input onclick="myfunc()"
type="submit"
value="calculate">
</form>
all i require is to be able to access the three fields directly in javascript. I do not need to pass the information anywhere else.
Could anyone point me in the right direction? I have read examples where there has been one input, but not multiple.
<script type="text/javascript">
function myfunc() {
var mn = document.getElementsByName("mn")
var mx = document.getElementsByName("mx")
var step = document.getElementsByName("step")
alert((mn + mx) / step)
}
</script>
Give your form an id like so
<form id="myForm">
The other thing to watch out for is that the is that the value attribute is a string so adding the two values concatenates them rather than summing them.
Try instead
var frm = document.forms["myForm"];
var _mn = parseInt( frm["mn"].value );
var _mx = parseInt( frm["mx"].value );
var _step = parseInt( frm["step"].value );
var result = ( _mn + _mx ) / _step;
I'd start with giving each input an id then i could use:
var min = document.getElementById('mn')
and so on. To access the value you simply would call
min.value
Also there is no point in removing the i from min and the a from max. That is not optimized just hard to read and understand.
Try this:
<script type="text/javascript">
function myfunc() {
var mn = document.getElementsByName("mn")[0].value;
var mx = document.getElementsByName("mx")[0].value;
var step = document.getElementsByName("step")[0].value;
var top = mn / mx;
alert(top / step);
}
</script>
if u need to access to the values of the inputs change your code to:
function myfunc() {
var mn = document.getElementsByName("mn")[0];
var mx = document.getElementsByName("mx")[0];
var step = document.getElementsByName("step")[0];
// you may need to validate your values here, like step.value != 0
alert((mn.value + mx.value) / step.value)
}