Jquery - keyup event checking input value in three fields

Question

I'm looking for a form validation solution. I have three number fields. 1st of them have values: min=50, max=100. 2nd and 3rd TOGETHER will have max=50 but it cant be split in same way, so max=25. I thought of using IF statements, but that solution will be too complicated. How it should work:

1st input value=50, 2nd value=25, 3rd value=25,
1st input value=60, 2nd value=0, 3rd value=50,
1st input value=75, 2nd value=20, 3rd value=5,
etc

I have some code to validate proper data input:

$(document).ready(function () {    

    $('input').keyup(function() {
        var $th1 = $('input[name="value_1"]');
        var $th2 = $('input[name="value_2"]');
        var $th3 = $('input[name="value_3"]');

        $th1.val( $th1.val().replace(/[^a-zA-Z0-9]/g, function(){ return ''; }) );
        $th2.val( $th2.val().replace(/[^a-zA-Z0-9]/g, function(){ return ''; }) );
        $th3.val( $th3.val().replace(/[^a-zA-Z0-9]/g, function(){ return ''; }) );
    });
});

and working fiddle:https://jsfiddle.net/04d5gkxd/2/

So in other words, group of fields: 2nd and 3rd must check the current value of 1st input, and base on that give the user possibility of picking proper value from 2nd and 3rd. Any ideas?

p.s. it's really not a good idea to make every input change alter the content of all three inputs. — Alnitak
– Alnitak, Commented Jan 18, 2016 at 10:32
p.p.s. and also consider using $el.val(function(...)) to perform read-modify-write, not `$el.val($el.val()...) — Alnitak
– Alnitak, Commented Jan 18, 2016 at 10:33
There is an edit functionality for comments you know. @Alnitak — Glubus
– Glubus, Commented Jan 18, 2016 at 10:34
@Alnitak gosh no need to get all mad about it, it's just that 3 comments in a row like that might discourage other users to read the rest. No offense was meant. — Glubus
– Glubus, Commented Jan 18, 2016 at 10:38

Rory McCrossan · Accepted Answer · 2016-01-18 10:40:52Z

2

As @Alnitak suggested in the comments, you would be better suited to make the values set by some slider controls. You could have one which is a range of 50 - 100, and a second which is 0 - 50 that governs both the final values. Something like this:

<div id="sliderA" class="slider"></div>
<div id="sliderB" class="slider"></div>

<input type="hidden" name="value_1" id="value_1" value="50" />
<input type="hidden" name="value_2" id="value_2" value="0" />
<input type="hidden" name="value_3" id="value_3" value="0" />

$('#sliderA').slider({
    min: 50,
    max: 100,
    change: function(e, ui) {
        $('#value_1').val(ui.value);
    }
});
$('#sliderB').slider({
    min: 0,
    max: 50,
    change: function(e, ui) {
        $('#value_2').val(ui.value);
        $('#value_3').val(50 - ui.value);
    }
});

Working example

answered Jan 18, 2016 at 10:40

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

3 Comments

Paweł Skaba Over a year ago

thanks. I will take a look on it and will redefine what I have currently. Your solution indeed works (& looks!) better than mine..

Paweł Skaba Over a year ago

one more thing. when it comes to sliderB, why i cant change max into variable? you know, when for example in sliderA value will be 70, in sliderB max should be 30 (as i mentioned, in total we should always have 100). I even tried to make it but something is wrong: jsfiddle.net/04d5gkxd/4

Paweł Skaba Over a year ago

I've managed to create something which is closer to the final, yet current problem is that splited data into two fields is equal: jsfiddle.net/ptkxqakd/8

Collectives™ on Stack Overflow

Jquery - keyup event checking input value in three fields

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related