Auto calculated input value with javascript

Question

I have 3 inputs like this :

<input type="text" id ="text1"/><br>
<input type="text" id ="text2"/><br>
<input type="text" readonly="readonly" disabled="disabled" id ="text3"/>

the 3rd input is disabled and I like that his value will equal to : (val(text2)/val(text1)*100-100) whene I pass the value of the two other input

so for that I try this script :

var p1 = document.getElementById('#text1').value;
var p2 = document.getElementById('#text2').value; 
document.getElementById('#text3').value = ((p1/p2)*100)-100;

but does not work , someone can help me please ?

Open your browser console, you will find errors displaying in there. document.getElementById('#text1') is incorrect. You don't need to have # in the selectors. document.getElementById('text1') — NewToJS
– NewToJS, Commented Aug 7, 2017 at 12:38
thanx but how can I get this value instantaneous whene I pass the two values of the other input ? — Dhia Eddine Farah
– Dhia Eddine Farah, Commented Aug 7, 2017 at 12:42
Use an event listener... onchange or oninput would work just fine. — NewToJS
– NewToJS, Commented Aug 7, 2017 at 12:44
Provided with the Solution with the help of Jquery Event Handlers. Have a Check of it. — Naresh Kumar P
– Naresh Kumar P, Commented Aug 7, 2017 at 12:56

Misagh Laghaei · Accepted Answer · 2017-08-07 12:39:14Z

6

The # exists in jquery. you should type pure javascript :

var p1 = document.getElementById('text1').value;
var p2 = document.getElementById('text2').value; 
document.getElementById('text3').value = ((p1/p2)*100)-100;

answered Aug 7, 2017 at 12:39

Misagh Laghaei

1,3891 gold badge14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jay Blanchard Over a year ago

Actually the # comes from CSS, jQuery just makes use of it. Both use it to identify the ID of an element. ¯\_(ツ)_/¯

Dhia Eddine Farah Over a year ago

How can I get it instantaneous just whene I pass the values of input1 and input 2 ?

NewToJS Over a year ago

@JayBlanchard # can also be used in querySelector() so it isn't just CSS or jQuery

Misagh Laghaei Over a year ago

@DhiaEddineFarah you should put it on change event of inputs.

Jay Blanchard Over a year ago

Yep @NewToJS, which is what jQuery does under the hood. I never excluded VanillaJS from using it ;)

|

Alexandre Thyvador · Accepted Answer · 2017-08-07 12:40:54Z

1

Remove the '#' they should not be here. The '#' is for JQuery not raw JS.

var p1 = document.getElementById('text1').value;
var p2 = document.getElementById('text2').value; 
document.getElementById('text3').value = ((p1/p2)*100)-100;

Or if you are using JQuery :

var p1 = $('#text1').val();
var p2 = $('#text').val();
$('#text3').val( ((p1/p2)*100)-100);

answered Aug 7, 2017 at 12:40

Alexandre Thyvador

3641 silver badge10 bronze badges

Comments

user4035 · Accepted Answer · 2017-08-07 12:40:58Z

0

Or use JQuery as you have this tag (shorter version):

var p1 = $('#text1').value;
var p2 = $('#text2').value; 
if(p2 != 0)
{
    $('#text3').value = ((p1/p2)*100)-100;
}

Don't forget to check the denominator for 0.

answered Aug 7, 2017 at 12:40

user4035

24k11 gold badges69 silver badges101 bronze badges

8 Comments

Jay Blanchard Over a year ago

What if the OP hasn't included jQuery in their project?

NewToJS Over a year ago

@JayBlanchard If the OP hasn't included the jQuery library to their project or know how to do so then it shouldn't be tagged in the question as the OP would have no intentions of using it.

user4035 Over a year ago

@JayBlanchard In this case I wouldn't add the answer. But he tagged as JQuery.

Jay Blanchard Over a year ago

You would think that @NewToJS, but I have seen it over and over again.

user4035 Over a year ago

@JayBlanchard Let's wait for the feedback from the OP.

|

Naresh Kumar P · Accepted Answer · 2017-08-07 12:51:30Z

0

Explanation: You have used document.getElementbyID to retrieve the value from the text box and the method what you have adopted is wrong.

Method One:

var p1 = document.getElementById('text1').value;
var p2 = document.getElementById('text2').value; 
document.getElementById('text3').value = ((p1/p2)*100)-100;

Another Method you can take is by

var p1 = $('#text1').val();
var p2 = $('#text2').val; 
var p3 = ((p1/p2)*100)-100;
$('#text3').val(p3);

Getting the Value Instantaneously from the Inputs that has been given

HTML:

<input type="text" id ="text1" onblur="someFunction()"/><br>
<input type="text" id ="text2" onblur="someFunction()"/><br>
<input type="text" readonly="readonly" disabled="disabled" id ="text3"/>

Javascript / Jquery:

function someFunction()
{
    var p1 = $('#text1').val();
    var p2 = $('#text2').val; 
    if(p1=='' || p2=='')
    {
        alert('Please Fill all the Values');
    }
    else
    {
        var p3 = ((p1/p2)*100)-100;
        $('#text3').val(p3);
    }    
}

edited Aug 7, 2017 at 12:51

answered Aug 7, 2017 at 12:39

Naresh Kumar P

4,2802 gold badges19 silver badges34 bronze badges

4 Comments

Dhia Eddine Farah Over a year ago

How can I get it instantaneous just whene I pass the values of input1 and input 2 ?

Naresh Kumar P Over a year ago

You can use the onchange() or onblur() jquery events to calculate the process instantaneously

Dhia Eddine Farah Over a year ago

how can I please do that ?

Naresh Kumar P Over a year ago

I have made the code in my solution. Have a try of that.

Muhammad Akber Khan · Accepted Answer · 2017-08-07 12:53:09Z

0

replace your code with the three lines,

var p1 = parseFloat(document.getElementById('text1').value);
var p2 = parseFloat(document.getElementById('text2').value); 
document.getElementById('#text3').value = parseFloat(((p1/p2)*100)-100);

answered Aug 7, 2017 at 12:53

Muhammad Akber Khan

7574 silver badges18 bronze badges

Collectives™ on Stack Overflow

Auto calculated input value with javascript

5 Answers 5

7 Comments

Comments

8 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

Comments

8 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related