CODEWITHSUNDEEP
javascriptjqueryinputtrim
user3288852
user3288852

Reputation: 205

jQuery: Trimming not working for checking empty inputs

I'm using $.trim to check if the inputs are empty, if so, nothing should happen. If they're not empty then the form should be submitted.

This is the variable where the condition is located:

var save = $("<input type='button' value='Save' />").on('click',function() {
        if(!$.trim(name)==''||!$.trim(degree)==''||!$.trim(dateFrom)==''||!$.trim(dateTo)=='') {
            $("#list").append("<li>Name: "+$('#elem1').val()+
                             "<br>Degree: "+$('#elem2').val()+
                             "<br>Date From: "+$('#elem3').val()+
                             "<br>Date To: "+$('#elem4').val()+
                             "</li>");
            cancel.click();
        } else {}
    });

Please take a look to the code on jsFiddle here: http://jsfiddle.net/vrpWu/

Note that it works without the if condition, why is this happening? I've readed everywhere but looks like my code is not wrong.

Upvotes: 1

Views: 128

Answers (1)

adeneo
adeneo

Reputation: 318322

First, you have to get the values when you actually click the save button, not before, as then the values will always be empty strings

var save = $("<input type='submit' value='Save' />").on('click', function () {
    var name     = $("#elem1").val();
    var degree   = $("#elem2").val();
    var dateFrom = $("#elem3").val();
    var dateTo   = $("#elem4").val();

    if (!($.trim(name) == '' || $.trim(degree) == '' || $.trim(dateFrom) == '' || $.trim(dateTo) == '')) {
        console.log('test')
        $("#list").append("<li>Name1: " + $('#elem1').val() +
            "<br>Name2: " + $('#elem2').val() +
            "<br>Name3: " + $('#elem3').val() +
            "<br>Name4: " + $('#elem4').val() +
            "</li>");
        cancel.click();
    } else {
        console.log('no')
    }
});

then you should note that things work a little differently when you negate the variables and use OR

You can either negate the whole thing at once

if (! ($.trim(name)==''||$.trim(degree)==''||$.trim(dateFrom)==''||$.trim(dateTo)=='')) {

or use AND instead

if (!$.trim(name)=='' && !$.trim(degree)=='' && !$.trim(dateFrom)=='' ... etc

FIDDLE

Upvotes: 1

Related Questions