JQuery: How can I Make Two Text Inputs Effect Each Other?

Question

Pixels <input type="text" name="mytext[]" id="Pixels" value="Text 1"></input>
    <br />
    Percentage <input type="text" name="mytext[]" id="Percentage" value="Text 1"></input>

Enter 10 in the first input, in the second input, how do I echo this *2 and for the other input /2 upon something being entered in the field.

Have you tried anything? This might be a good way to start http://stackoverflow.com/questions/4088467/get-value-in-input-text-box — Dan, Jun 14 '14 at 13:23
Var X is a variable which will be set at a later date @shaunakde as long as I can get both fields to display something upon the other being edited, I know how to do the maths involveed so I really should have just asked that question... — , Jun 14 '14 at 13:27
`input` elements are [void elements](http://www.w3.org/TR/html-markup/syntax.html#void-element), so they don't have an end tag. You can use `` or `` — Oriol, Jun 14 '14 at 13:35

Shaunak D · Answer 1 · 2014-06-14T13:35:42.640

3

Demo Fiddle: for Percentage,

var X = 80;
$('#Pixels').keyup(function(){

    if(!isNaN(this.value)){
       $('#Percentage').val(parseInt(this.value)/X *100)
    }
});

$('#Percentage').keyup(function(){
    $('#Pixels').val(parseInt(this.value) * X/100);

});

use .val() or .value to get value in the textbox.
.keyup() or .change() are the events to get the values.
There are more alternatives jQuery Events

edited Jun 14 '14 at 13:35

answered Jun 14 '14 at 13:30

Shaunak D

20,588
10
46
79

1

This is perfect @shaunakde, I did edit to make more specific so it did not mean I was directly asking for my original to be done but you must of seen before the edit and made the perfect part for my website. Thank you :) +1 – Jun 14 '14 at 13:34

score 2 · Accepted Answer · answered Jun 14 '14 at 13:32

2

var X = 100;

var inp1 = document.getElementById('Pixels'),
    inp2 = document.getElementById('Percentage');

inp1.onchange = function() {
    var num = this.value = Math.max(Math.min(this.value, X), 0);
    inp2.value = num / X * 100;
};
inp2.onchange = function() {
    var num = this.value = Math.max(Math.min(this.value, 100), 0);
    inp1.value = num * X / 100;
};

answered Jun 14 '14 at 13:32

Oriol

274,082
63
437
513

I've never used the input type of number before, this just makes it even more better! Thank you! – Jun 14 '14 at 13:40
@TimMarshall HTML5 improved forms a lot :) – Oriol Jun 14 '14 at 13:44

JQuery: How can I Make Two Text Inputs Effect Each Other?

2 Answers2