jQuery toggleClass on input values

Question

I want to add a class to an input depending on the value of the text input. My problem is that the input renders all the classes. Here is the html part :

<form name="imcForm" id="imc">
    <p>poids: <input type="text" name="poids" size="10"></p>
    <p>taille: <input type="text" name="taille" size="10"></p>
    <p><input type="button" id="calcul" value="Calculer" onClick="calculImc()"></p>
    <p>result : <input type="text" name="imc" size="10" id="imcResult"></p>
    <p>Interprétation: <input type="text" name="interpretation" size="25" id="interpretation"></p>
</form>

And here is the javascript/jQuery

$('#calcul').on("click", function() {
    $("#interpretation:input[value=itemA]").toggleClass('a');
    $("#interpretation:input[value=itemB]").toggleClass('b');
    $("#interpretation:input[value=itemC]").toggleClass('c');
    $("#interpretation:input[value=itemD]").toggleClass('d');
    $("#interpretation:input[value=itemE]").toggleClass('e');
    $("#interpretation:input[value=itemF]").toggleClass('f');
    $("#interpretation:input[value=itemG]").toggleClass('g');
});

Also, look at what render the input :

<input type="text" id="interpretation" size="25" name="interpretation" class="denutrition normale moderee severe morbide">

So why does each element recieve each class on click?

score 1 · Answer 1 · answered Feb 21 '12 at 13:19

1

You're missing a > at the end of your <button> input.

Also you can greatly simplify the code you've got, especially if the class name is always the last letter of what's in the input field.

$('#calcul').on'click', function(){
    var class = $('#interpretation').val().slice(-1).toLowerCase();
    $('#interpretation').toggleClass(class);
});

answered Feb 21 '12 at 13:19

tkone

22,092
5
54
78

I corrected the button. No more results. And I put the letter for the exemple. Eache value is different... – Mael Feb 21 '12 at 13:27

score 0 · Answer 2 · answered Feb 21 '12 at 13:19

0

It's hard to tell exactly what you are doing.

But the problem may be that you have two click handlers, one from jQuery and one 'hard-coded': onClick="calculImc()"

answered Feb 21 '12 at 13:19

Steve Wellens

20,506
2
28
69

You're right, I forgot this when extending my script. But that did'nt solve the problem. It's fixed by @Bui-cuong. – Mael Feb 21 '12 at 13:35

score 0 · Accepted Answer · answered Feb 21 '12 at 13:26

0

try this:

$('#calcul').on("click", function() {

    var target = $("#interpretation");
    var val =  target.val();
    var className = "";
    if(val == "itemA")                     
    {
        className = "a";
    }
    else if(val == "itemB")                     
    {
        className = "b";
    }
    else if(val == "itemC")                     
    {
        className = "c";
    }
    //............
    target.attr("class", className );
});

answered Feb 21 '12 at 13:26

Bui Cuong

149
2

This is helpful, thank you ! Good idea to pass the value in an empty class ! – Mael Feb 21 '12 at 13:33
@Mael A switch statement would be better there if you're doing multiple else/if. http://stackoverflow.com/questions/767821/is-else-if-faster-than-switch-case – tkone Feb 21 '12 at 13:53
Whatever, just a demo to get class name base on value – Bui Cuong Feb 21 '12 at 14:54

jQuery toggleClass on input values

3 Answers3