JS auto compute without submit button - javascript

i want to auto calculate the 5 textboxes without using a submit button from the value of my main textbox so
1 textbox = (auto computed) 5textbox
this is the js in my <head> tag
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script>
$('#tb6').keyup(function(){
var textbox;
var tb1;
var tb2;
var tb3;
var tb4;
var tb5;
textbox = parseInt($('#textbox').val());
tb1 = parseInt($('#tb1').val());
tb2 = parseInt($('#tb2').val());
tb3 = parseInt($('#tb3').val());
tb4 = parseInt($('#tb4').val());
tb5 = parseInt($('#tb5').val());
tb1 = textbox * 0.10;
tb2 = textbox * 0.10;
tb3 = textbox * 0.10;
tb4 = textbox * 0.50;
tb5 = tb1+ tb2 + tb3;
var tb6 = tb4 - tb5;
$('#tb6').val(tb6.toFixed(2));
});
</script>
</head>
form
<form>
<br>input textbox: <input id = "textbox" type = "text" name="textbox" required>
</td>
</td>
</table>
<table>
<tr><td>
<br>
<p id="para">label1</p>
<br>textbox1: <input id = "tb1" type = "text" name = "tb1" required>
<br>textbox2: <input id = "tb2" type = "text" name = "tb2" required>
<br>textbox3: <input id = "tb3" type = "text" name = "tb3" required>
</td>
<td><br><br><br><br><p id="paraa">label2</p>
<br>textbox4: <input id = "tb4" type = "text" name = "tb4" readonly>
<br>textbox5: <input id = "tb5" type = "text" name = "tb5" readonly>
// result
<br>textbox5: <input id = "tb6" type = "text" name = "tb6" readonly>
</td></tr>
</form>
im new on JS, i dont know whats the problem. how am i able to auto calculate?
thank you guys
https://jsfiddle.net/no619pmu/5/

First thing you have written readonly in tb6 and keyup on same input which can not be possible
Do
$('input[type="text"]').keyup(function() { if you want auto compute on input text..
As per you code I modified in jquery
$('input[type="text"]').keyup(function() {
var textbox = parseInt($('#textbox').val());
var tb1 = parseInt($('#tb1').val());
var tb2 = parseInt($('#tb2').val());
var tb3 = parseInt($('#tb3').val());
var tb4 = parseInt($('#tb4').val());
var tb5 = parseInt($('#tb5').val());
tb1 = textbox * 0.10;
tb2 = textbox * 0.10;
tb3 = textbox * 0.10;
tb4 = textbox * 0.50;
tb5 = tb1 + tb2 + tb3;
var tb6 = tb4 - tb5;
$('#tb6').val(tb6.toFixed(2));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<br>input textbox:
<input id="textbox" type="text" name="textbox" required>
<table>
<tr>
<td>
<br>
<p id="para">label1</p>
<br>textbox1:
<input id="tb1" type="text" name="tb1" required>
<br>textbox2:
<input id="tb2" type="text" name="tb2" required>
<br>textbox3:
<input id="tb3" type="text" name="tb3" required>
</td>
<td>
<br>
<br>
<br>
<br>
<p id="paraa">label2</p>
<br>textbox4:
<input id="tb4" type="text" name="tb4" readonly>
<br>textbox5:
<input id="tb5" type="text" name="tb5" readonly>
// result
<br>textbox5:
<input id="tb6" type="text" name="tb6" readonly>
</td>
</tr>
</table>
</form>
//As you didnot mentioned what will be in other textboxes..

when do
$('#tb6').keyup(function(){})
the tb6 input is not render

Related

need to print the result in JAVA script

I am new to Javascript and I need to print the result for a multiplication function.Can you please help me to do that.
Please find the attached image
Following is the code :
function multiply() {
var a = document.getelemtById("weight").value;
var b = document.getelemtById("cost").value;
var myResult = document.getElementById('result');
var myResult = parseint(a) * parseint(b);
}
<span>
<center>
<h3> Calculation of Shipping charge </h3>
<label for = "weight"> Total Prodcut Weight </label>
<input type = "text" name = "Total Prodcut Weight" id = "weight" > <br>
<br>
<label for = "cost" > Shipping cost(per kg) < /label>
<input type = "text" name = "Shipping cost(per kg)" id = "cost" >
<br>
<br>
<button type = "button" onclick = multiply() > compute </button>
<br>
<div id="result"></div>
enter image description here
As the comments suggested, change getelemtById to getElementById and change parseint to parseInt. I also changed the .innerHTML of #result to display the result.
<script type="text/javascript">
function multiply() {
var a = document.getElementById("weight").value;
var b = document.getElementById("cost").value;
var myResult = document.getElementById('result');
myResult.innerHTML = parseInt(a) * parseInt(b); // removed var
}
</script>
<span>
<center>
<h3>Calculation of Shipping charge</h3>
<label for="weight">Total Prodcut Weight</label> <!-- Prodcut should be Product-->
<input type="text" name="Total Prodcut Weight" id="weight"><br>
<br>
<label for="cost">Shipping cost(per kg)</label>
<input type="text" name="Shipping cost(per kg)" id="cost">
<br>
<br>
<button type="button" onclick=multiply()>compute</button>
</center>
</span>
<br>
<div id="result">
<center>
I have edited your code try
function multiply() {
var a = document.getElementById("weight").value;
var b = document.getElementById("cost").value;
//var myResult = document.getElementById('result');
var myResult = parseInt(a) * parseInt(b);
document.getElementById('result').innerHTML=myResult
console.log(myResult)
}
<h3>Calculation of Shipping charge</h3>
<label for="weight">Total Prodcut Weight</label>
<input type="text" name="Total Prodcut Weight" id="weight"><br>
<br>
<label for="cost">Shipping cost(per kg)</label>
<input type="text" name="Shipping cost(per kg)" id="cost">
<button type="button" onclick=multiply()>compute</button>
<div id="result"></div>

How to display recommendations after calculating a certain result?

How do I display something like a recommendation list after a user calculate a result from the inputs? E.g having the user to key in the salaries of the family and calculating the PCI (Per capita income) and after they key in and press on the calculate button which then will trigger a list of recommendations based on the amount of PCI the family have (Maybe tables that shows different results based on different categories of PCI?)
<!DOCTYPE html>
<html>
<head>
<script src="common.js"></script>
<script>
function cal()
{
var salary1 = document.getElementById('salary1').value;
var salary2 = document.getElementById('salary2').value;
var salary3 = document.getElementById('salary3').value;
var salary4 = document.getElementById('salary4').value;
var members = document.getElementById('members').value;
var total = (parseInt(salary1) + parseInt(salary2) + parseInt(salary3) + parseInt(salary4)) / parseInt(members);
document.getElementById('total').value = total;
alert (total);
}
</script>
</head>
<body>
<h1>Want to know which bursary your eligible?</h1>
<input id="salary1" value="" placeholder="Enter your 1st family income..."/>
<input id="salary2" value="" placeholder="Enter your 2nd family income..."/>
<input id="salary3" value="" placeholder="Enter your 3rd family income..."/>
<input id="salary4" value="" placeholder="Enter your 4th family income..."/>
<input id="members" value="" placeholder="Enter the total number of family members..."/>
<br>
<button onclick="cal()"> Calculate PCI!</button>
<br>
Total: <input id="total"> </input>
</body>
</html>
You can create a hidden div that holds the data then show that div when user clicks the button
HTML:
<div id="divToShow" style="display:none;" class="table_list" >
//put your data table here
</div>
<input type="button" name="myButton" value="Show Div" onclick="showDiv()" />
Javascript:
function showDiv() {
document.getElementById('divToShow').style.display = "block";
}
This should get you there: Jsfiddle.
<form id="form">
<input id="number1" type="number" min="1" name="number" placholder="add value one"> +
<input id="number2" type="number" min="1" name="number" placholder="add value one">
<button>Submit</button>
</form>
var form = document.getElementById('form');
number1 = document.getElementById('number1');
number2 = document.getElementById('number2');
form.onsubmit = function() {
var total = +number1.value + +number2.value; // add + before
alert( total );
};
function cal(){
var salary1 = document.getElementById('salary1').value;
var salary2 = document.getElementById('salary2').value;
var salary3 = document.getElementById('salary3').value;
var salary4 = document.getElementById('salary4').value;
var members = document.getElementById('members').value;
var recommanted;
var recommandations=[
{maxpci:1000,recommandation:'first_recommandation'},
{maxpci:2000,recommandation:'second_recommandation'},
{maxpci:3000,recommandation:'third_recommandation'},
{maxpci:6000,recommandation:'fourth_recommandation'}
];
var total=(parseInt(salary1) + parseInt(salary2) + parseInt(salary3) + parseInt(salary4)) / parseInt(members);
if(recommandations[recommandations.length - 1].maxpci < total ){recommanted=recommandations[recommandations.length - 1].recommandation;}
else{
for (var i = 0; i < recommandations.length; i++) {
if(total <= recommandations[i].maxpci){
recommanted=recommandations[i].recommandation;break;}
}}
document.getElementById('result').innerHTML = "Your PCI : "+total+"</br>Recommandation : "+recommanted;
}
<h1>Want to know which bursary your eligible?</h1>
<input id="salary1" type="number" value="" placeholder="Enter your 1st family income..."/>
<input id="salary2" type="number" value="" placeholder="Enter your 2nd family income..."/>
<input id="salary3" type="number" value="" placeholder="Enter your 3rd family income..."/>
<input id="salary4" type="number" value="" placeholder="Enter your 4th family income..."/>
<input id="members" type="number" value="" placeholder="Enter the total number of family members..."/>
</br>
<button onclick="cal()"> Calculate PCI!</button>
</br>
<div id="result">
</div>

Live javascript calculation

I'm trying to configure a live caluator based on the Input of a form field.
My problem is, that I simply can not figure out how I would display the result on the Website.
<label class="contactform-label" for="contactform-member"><span class="contact_form_span">Member*:</span> </label>
<input class="contactform-input" type="text" id="contactform-member" placeholder="Member" name="member" value="" />
<span id="member-kosten">
<script type="text/javascript">document.write(ausgabe)</script>
</span>
var price = 90;
var member = document.getElementById("contactform-member").value;
var calculate = Math.sqrt(price * member);
var ausgabe = (calculate);
Use this code:
function fun(){
var price = 90;
var member = document.getElementById("contactform-member").value;
var calculate = Math.sqrt(price * member);
var ausgabe = (calculate);
document.getElementById("member-kosten").innerHTML = ausgabe;
}
<label class="contactform-label" for="contactform-member"><span class="contact_form_span">Member*:</span> </label>
<input class="contactform-input" type="text" id="contactform-member" placeholder="Member" name="member" value="" onkeyup="fun()" />
<span id="member-kosten">
</span>
Set the html of element member-kosten from the script (last line):
var price = 90;
var member = document.getElementById("contactform-member").value;
var calculate = Math.sqrt(price * member);
document.getElementById("member-kosten").innerHTML = calculate;
<label class="contactform-label" for="contactform-member"><span class="contact_form_span">Member*:</span> </label>
<input value="10" class="contactform-input" type="text" id="contactform-member" placeholder="Member" name="member" value="" />
<span id="member-kosten">
</span>

Calling function to work

I'm new to JavaScript and I need to use the string method all in one html page. I need to make sure user input the data, but I can't get my function calling to work. Any idea? I finished all of it, but just to make sure that one button submit can validate all string method function perfectly.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8"/>
<h1> Try 1</h1>
<p>Please enter all the field below.</p>
</head>
<body>
<form id="myForm">
<fieldset>
<legend>String Methods</legend>
<p>Using concat()</p>
<input type="text" id="word1" size="25" placeholder="Enter first word/sentences."></br>
<input type="text" id="word2" size="25" placeholder="Enter second word/sentences."></br></br>
<p>Using substr()</p>
<input type="text" id="subtr" size="25" placeholder="Please enter word/sentences."></br></br>
<p>Using lastIndexOf()</p>
<input type="text" id="lastindex" size="25" placeholder="Please enter word/sentences."></br>
<input type="text" id="srch" size="25" placeholder="Word that you want to search."></br></br>
<p>Using toLowerCase()</p>
<input type="text" id="lcase" size="35" placeholder="Please enter Uppercase word/sentences."></br></br>
<p>Using toUpperCase()</p>
<input type="text" id="ucase" size="35" placeholder="Please enter Lowercase word/sentences."></br></br>
<p>Using match()</p>
<input type="text" id="match" size="25" placeholder="Please enter word/sentences."></br>
<input type="text" id="match1" size="25" placeholder="Words that you want to find match."></br></br>
<p>Using replace()</p>
<p id="phrase"><i>The voice in my head shouts out through the world like a breath.</i></p>
<input type="text" id="replce" size="35" placeholder="Word you want to change in sentence above."></br>
<input type="text" id="replce2" size="25" placeholder="Word you want to change with."></br></br>
<p>Using split()</p>
<input type="text" id="splt" size="25" placeholder="Please enter word/sentences."></br></br>
<p>Using charCodeAt()</p>
<input type="text" id="cca" size="25" placeholder="Please enter word/sentences."></br></br>
<p>Using slice()</p>
<input type="text" id="slce" size="25" placeholder="Please enter word/sentences."></br></br>
<input type="submit" value="Submit" id="btnSubmit" onclick="validateEverything()">
</fieldset>
</form>
<div id="answers"></div>
</body>
</html>
This is my JavaScript code:
<script>
function validateEverything(){
var wo1 = document.getElementById("word1").value;
var wo2 = document.getElementById("word2").value;
var sub = document.getElementById("subtr").value;
var lin = document.getElementById("lastindex").value;
var sea = document.getElementById("srch").value;
var lca = document.getElementById("lcase").value;
var uca = document.getElementById("ucase").value;
var mat = document.getElementById("match").value;
var ma1 = document.getElementById("match1").value;
var phr = document.getElementById("phrase").value;
var rep = document.getElementById("replce").value;
var re1 = document.getElementById("replce1").value;
var ph1 = document.getElementById("phrase1").value;
var spl = document.getElementById("splt").value;
var cha = document.getElementById("cca").value;
var slc = document.getElementById("slce").value;
var ans = document.getElementById("answers");
//Concat
var con = wo1.concat(" "+wo2);
//Subtr
var subr = sub.substring(1, 7);
//lastindexof
var n = lin.lastIndexOf(sea);
//toLowerCase
var lc = lca.toLowerCase();
//toUpperCase
var uc = uca.toUpperCase();
//match
var mc = mat.match(ma1);
//replace
var rp = phr.replace(replce, replce1);
//split
var sp = sp1.split(" ")
//charCodeAt
var cc = cha.charCodeAt(0);
//slice
var sl = slc.slice(1, 5);
show();
}
function show(){
ans.innerHTML = answersHTML();
}
//answers
function answersHTML(){
var ans = document.getElementById("answers").innerHTML;
document.write(con);
document.write(subr);
document.write(n);
document.write(lc);
document.write(uc);
document.write(mc);
document.write(rp);
document.write(sp);
document.write(cc);
document.write(sl);
}
</script>
There are multiple issues in your snippet.In some case there is no DOM element present but still you are doing document.getElementById();
Also how answerHTML will know about con,sub,.... ? They are local to validateEverything function & you are not passing it to answerHTML function
You are using input type = "submit". You need to use event.preventDefault() to stop submission. You are not submitting anything. Rather use input type = "button"
There is also no use of show() function
Everytime you are using document.write, so it will delete anything which is previously written. Instead string concatenation and innerHTML will be fine.
Here is a working snippet with minimum code.
JS
function validateEverything(event){
event.preventDefault();
var wo1 = document.getElementById("word1").value;
var wo2 = document.getElementById("word2").value;
var sub = document.getElementById("subtr").value;
var ans = document.getElementById("answers");
//Concat
var con = wo1.concat(" "+wo2);
//Subtr
var subr = sub.substring(1, 7);
ans.innerHTML = con+" "+subr;
}
HTML
<input type="submit" value="Submit" id="btnSubmit" onclick="validateEverything(event)">
JSFIDDLE

can not add two multiplications result in text box in html

sir
i have 7 text boxes .1st two take values from user and display the multiplication result on 3rd text box when it clicked.4th and 5th textboxes also take values and display the multiplication result in 6th text box when it clicked.now 7th textbox will display the addition result when it clicked.7th textbox takes the values from 3rd and 6th textbox.
my problem is that i can not do the addition and cant display the result in 7th text box in html and jscript.plz help me.....i am attached the code...
<html>
<script>
function getText1(){
var in1=document.getElementById('in1').value;
var in2=document.getElementById('in2').value;
var tot1=parseInt(in1)*parseInt(in2);
document.getElementById('tot1').value=tot1;
}
function getText2(){
var in1=document.getElementById('in3').value;
var in2=document.getElementById('in4').value;
var tot2=parseInt(in1)*parseInt(in2);
document.getElementById('tot2').value=tot2;
}
function gt1(){
var in1=document.getElementById('tot1').value;
var in2=document.getElementById('tot2').value;
var gt1=parseInt(in1)+parseInt(in2);
document.getElementById('gt').value = gt1;
</script>
<form>
<input type="text"id="in1"/>
<input type="text" id="in2"/>
<input type="text" onclick="getText1()" id="tot1"/>
<br>
<input type="text"id="in3"/>
<input type="text" id="in4"/>
<input type="text" onclick="getText2()" id="tot2"/>
<br>
<input type="text" onclick="gt1()" id="gt1"/>
</form>
</html>
<html>
<script>
function getText1(){
var in1=document.getElementById('in1').value;
var in2=document.getElementById('in2').value;
var tot1=parseInt(in1)*parseInt(in2);
document.getElementById('tot1').value=tot1;
}
function getText2(){
var in1=document.getElementById('in3').value;
var in2=document.getElementById('in4').value;
var tot2=parseInt(in1)*parseInt(in2);
document.getElementById('tot2').value=tot2;
}
function gt(){
var in1=document.getElementById('tot1').value;
var in2=document.getElementById('tot2').value;
var gt1=parseInt(in1)+parseInt(in2);
document.getElementById('gt1').value = gt1;
}
</script>
<form>
<input type="text"id="in1"/>
<input type="text" id="in2"/>
<input type="text" onclick="getText1()" id="tot1"/>
<br>
<input type="text"id="in3"/>
<input type="text" id="in4"/>
<input type="text" onclick="getText2()" id="tot2"/>
<br>
<input type="text" onclick="gt()" id="gt1"/>
</form>
</html>
use this code it is working. and compare with own code. thanks..
There are several problem
1). Element id is one line is incorrect. It should be:
document.getElementById('gt1').value = gt1;
2). result variable is undefined. It should be:
if (!isNaN(gt1))
3). onclick="gt1()" will not work (because there is id with the same name gt1). Use, for example:
function getText3() { ... }
and
<input type="text" onclick="getText3()" id="gt1"/>
Fiddle.
Update. Ok, I didn't notice that you want multiplication, but somewhy had written + in getText1() and getText2() functions. Then you should also replace these two + with *:
Multiplication fiddle.
You dont have element with id 'gt'.
Change last line of code to this:
document.getElementById('gt1').value = gt1;
You have not defined 'result' variable
and in 'gt1()' :
document.getElementById('gt').value = gt1;
1- There is no 'gt' element in the page
2- 'gt1' should renamed to 'result'
and at the end code will be:
<script language="javascript" type="text/javascript">
function getText1() {
var in1 = document.getElementById('in1').value;
var in2 = document.getElementById('in2').value;
var tot1 = parseInt(in1) + parseInt(in2);
document.getElementById('tot1').value = tot1;
}
function getText2() {
var in1 = document.getElementById('in3').value;
var in2 = document.getElementById('in4').value;
var tot2 = parseInt(in1) + parseInt(in2);
document.getElementById('tot2').value = tot2;
}
function gt1() {
var in1 = document.getElementById('tot1').value;
var in2 = document.getElementById('tot2').value;
var result = parseInt(in1) + parseInt(in2);
if (!isNaN(result)) {
document.getElementById('gt1').value = result;
}
//document.getElementById('gt1').value=gt1;
}
</script>
this is work properly.
Check the below code.
<script >
function getext3(){
txt1 = document.getElementById("text1").value;
txt2 = document.getElementById("text2").value;
document.getElementById("text3").value = parseInt(txt1)*parseInt(txt2);
}
function getext6(){
txt1 = document.getElementById("text4").value;
txt2 = document.getElementById("text5").value;
document.getElementById("text6").value = parseInt(txt1)*parseInt(txt2);
}
function getext7(){
txt1 = document.getElementById("text3").value;
txt2 = document.getElementById("text6").value;
document.getElementById("text7").value = parseInt(txt1)+parseInt(txt2);
}
</script>
Text1 : <input type="text" id="text1" value="5"> <br/>
Text2 : <input type="text" id="text2" value="2"> <br/>
Text3 : <input type="text" id="text3" value="" onclick="getext3()"> <br/>
Text4 : <input type="text" id="text4" value="7"> <br/>
Text5 : <input type="text" id="text5" value="10"> <br/>
Text6 : <input type="text" id="text6" value="" onclick="getext6()"> <br/>
Text7 : <input type="text" id="text7" value="" onclick="getext7()"> <br/>

Categories