jQuery test for an input value fails

Question

I'm working with the following HTML

Level 1: <input type="text" name="benefit_std_level1" maxlength="5" value="0.0" onblur="noSpaceTest();float_5_2_percent(this);" style="width:40px;" class="input nospace">%<br />
Level 2: <input type="text" name="benefit_std_level2" maxlength="5" value="0.0" onblur="noSpaceTest();float_5_2_percent(this);" style="width:40px;" class="input40 nospace">%<br />
Level 3: <input type="text" name="benefit_std_level3" maxlength="5" value="0.0" onblur="noSpaceTest();float_5_2_percent(this);" style="width:40px;" class="input nospace">%<br />

There is an error occurring in the database if a user inputs a space into any of the three "Level" fields. I'm therefore employing the following script to check for a space and then change the value back to the default '0.0'.

jQuery:

function noSpaceTest(){
    $('.nospace').each(function(){
        if ($('.nospace').val() == ' '){
            $('.nospace').val('0.0');
        }
    });
}

Originally, in the site I'm developing, this did work, but only for the first field (onBlur would check and find the space and replace it with 0.0) However, now I can't get it to work in JSFiddle (see link below)

http://jsfiddle.net/pMkYg/

I'm afraid I'm missing something obvious, but I'm not getting any closer to a resolution. Does anyone have any insight they can offer?

Use [this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this). — Ram, Jun 17 '13 at 12:59
Problem in jsfiddle, you cannot use inline script due to how jsfiddle embeded code in iframe, bind events with javascript/jquery . Better explanation here: http://stackoverflow.com/a/5431435/1414562 — A. Wolff, Jun 17 '13 at 13:00
Okay, well that would explain why it works (partially) on the page I'm coding, but not at all in jsfiddle. Thanks for letting me know. — dihakz, Jun 17 '13 at 13:01

adeneo · Answer 1 · 2013-06-17T13:07:20.900

4

remove the inline js and use a change event handler instead :

$('.nospace').on('change', function () {
    if(/^\s+$/.test(this.value)) this.value = '0.0';
});

FIDDLE

edited Jun 17 '13 at 13:07

answered Jun 17 '13 at 13:00

adeneo

312,895
29
395
388

This is a great solution, too. – dihakz Jun 17 '13 at 13:14

score 2 · Answer 2 · answered Jun 17 '13 at 12:58

2

Use $(this):

function noSpaceTest(){
    $('.nospace').each(function(){
        var $this = $(this);
        if ($this.val() == ' '){
            $this.val('0.0');
        }
    });
}

answered Jun 17 '13 at 12:58

James Donnelly

126,410
34
208
218

score 2 · Answer 3 · answered Jun 17 '13 at 12:59

2

You're not very far from working code, here's a fix :

function noSpaceTest(){
    $('.nospace').each(function(){
        if ($(this).val() == ' '){
            $(this).val('0.0');
        }
    });
}

answered Jun 17 '13 at 12:59

bcolin

438
3
6

score 2 · Accepted Answer · answered Jun 17 '13 at 13:00

2

You need to use this , Also That will fail for multiple spaces like ' ' -

You can do this -

function noSpaceTest(){
    $('.nospace').each(function(){
        if ($.trim(this.value) === ''){
            $(this).val('0.0');
        }
    });
}

answered Jun 17 '13 at 13:00

Adil Shaikh

44,509
17
89
111

I really like the ability to check for multiples, here -- I did not think of that angle. – dihakz Jun 17 '13 at 13:10

score 1 · Answer 5 · answered Jun 17 '13 at 13:01

try this for float value

    function noSpaceTest() {
        $('.nospace').each(function () {
            var this_input = $(this);
            if (parseFloat(this_input.val()) == undefined || parseFloat(this_input.val()) == NaN || $.trim(this.value) === '') {
                this_input.val('0.0');
            }
        });
    }

score 1 · Answer 6 · answered Jun 17 '13 at 13:21

1

$(".nospace").blur(function() {

    if ($(this).val().trim() == ''){
        $(this).val('0.0');

    }
});

answered Jun 17 '13 at 13:21

Nagarajan A

89
5

jQuery test for an input value fails

6 Answers6