CODEWITHSUNDEEP
javascriptjqueryhtml
Sachin Sukumaran
Sachin Sukumaran

Reputation: 11

JQuery if-else skips everything after first valid condition

Ok, this one has me stumped for awhile now.

I have 3 named input boxes and 3 correspondingly named hidden variables (no form).

<table border=0 cellpadding="0" cellspacing="0">
    <tr><td>COMPANY NAME: </td><td><input id="company_name_input" name="company_name_input"></td></tr>
    <tr><td>BUSINESS TYPE: </td><td><input id="business_type_input" name="business_type_input"></td></tr>
    <tr><td>LOCATION: </td><td><input id="location_input" name="location_input"></td></tr>
    <tr><td colspan=2 align=center><input type=button class='personalize_content button_orange' value="Personalize Content"></td></tr>
</table>

On click of a button ("Personalize Content"), I'm using jQuery to test if the 3 input boxes have a value, and if it has a value, then it updates the corresponding hidden variable. I'm trying to use three if/else blocks in jQuery to get this.

$(".personalize_content").on('click',function(){
    str = $("#target_content_hidden").val();
    if($.trim($("#company_name_input").val()).length == 0 ){
        /* Adds a quick flashing effect on the input box and it will fade out. Nothing else is done here */
        $("#company_name_input").animate({borderColor: "#ff0000"}, 500);
        $("#company_name_input").animate({borderColor: "#ccc"}, 4500);
    }else{
        /* This section finds-and-replaces a block of text in another hidden field (code not shown here), and also updates the corresponding hidden variable */
        var change_text = new RegExp($('#company_name_value').val(),'gi');
        $("#target_content_hidden").val(str.replace(change_text, $("#company_name_input").val()));
        $("#company_name_value").val($("#company_name_input").val());
    }
    /* Two more if-else blocks doing the same things above, for the other two input boxes */
    if($.trim($("#business_type_input").val()).length == 0 ){
        $("#business_type_input").animate({borderColor: "#ff0000"}, 500);
        $("#business_type_input").animate({borderColor: "#ccc"}, 4500);
    }else{
        var change_text = new RegExp($('#business_type_value').val(),'gi');
        $("#target_content_hidden").val(str.replace(change_text, $("#business_type_input").val()));
        $("#business_type_value").val($("#business_type_input").val());
    }

    if($.trim($("#location_input").val()).length == 0 ){
        $("#location_input").animate({borderColor: "#ff0000"}, 500);
        $("#location_input").animate({borderColor: "#ccc"}, 4500);
    }else{
        var change_text = new RegExp($('#location_value').val(),'gi');
        $("#target_content_hidden").val(str.replace(change_text, $("#location_input").val()));
        $("#location_value").val($("#location_input").val());
    }           
});

Now, when I run this by pressing the button, ALL the "if" conditions work - that is it checks if the input boxes are empty, and flashes all 3 input boxes. But, if I add value to one of the input boxes, ONLY that "else" block is executed, and the other two are skipped. If I update one more box, only that new else block is executed, and none of the others.

What I've tried so far - apart from searching for similar answers in Google and SO for two days and checking through many similar answers, I have moved the if/else blocks into a separate function and tried passing the box names as parameters to the function, but that doesn't work either. (The code since looks like this - 

$(".personalize_content").on('click',function(){        
    validateParamBox($("#company_name_input"), $("#company_name_value"));
    validateParamBox($("#business_type_input"), $("#business_type_value"));
    validateParamBox($("#location_input"), $("#location_value"));
});

and this is the external function:

function validateParamBox(inputbox, hiddenbox){
str = $("#target_content_hidden").val();
if($.trim(inputbox.val()).length == 0 ){
    inputbox.animate({borderColor: "#ff0000"}, 500);
    inputbox.animate({borderColor: "#ccc"}, 4500);
}else{
    var change_text = new RegExp(inputbox.val(),'gi');
    alert(change_text);
    $("#target_content_hidden").val(str.replace(change_text, inputbox.val()));
    hiddenbox.val(inputbox.val());
}}

Any help on this would be appreciated.

Upvotes: 0

Views: 78

Answers (1)

Karthik
Karthik

Reputation: 11

  1. str.replace(change_text, inputbox.val()) was throwing an exception because of which it wouldn't execute after the first if-else
  2. Apparently borderColor should be borderTopColor/borderBottomColor/borderLeftColor/borderRightColor instead. Found that one here - jQuery animate border color on hover?

Also turns out you need to include jQuery UI library.

I took the liberty to add all the missing variables. Here's the working jsfiddle - https://jsfiddle.net/7sp6a2w5/

And here's the modified function

function validateParamBox(inputbox, hiddenbox) {
str = $("#target_content_hidden").val();
    if ($.trim(inputbox.val()).length == 0) {
        inputbox.animate({
            borderTopColor: "#ff0000",
            borderBottomColor: "#ff0000",
            borderLeftColor: "#ff0000",
            borderRightColor: "#ff0000"
        }, 500);
        inputbox.animate({
            borderTopColor: "#ccc",
            borderBottomColor: "#ccc",
            borderLeftColor: "#ccc",
            borderRightColor: "#ccc"
        }, 4500);
    } else {
        var change_text = new RegExp(inputbox.val(), 'gi');
        $("#target_content_hidden").val(str.replace(change_text, inputbox.val()));
        hiddenbox.val(inputbox.val());
    }
}

Upvotes: 1

Related Questions