jQuery / javascript and nested if statements

Question

I have a multi-lingual page where I want to display form validation error in the user's language. I use a hidden input to determine which language version the user is browsing like this: <input type="hidden" name="lang" id="lang" value="<?php echo $lang; ?>" />

The PHP side of the script works, but jQuery doesn't seem to realize which language is passed on. It displays the English error message no matter on which language site I am.

Here's the code (I removed the other form fields for length):

            $(document).ready(function(){
                $('#contact').submit(function() {
                    $(".form_message").hide();

                    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                    var lang = $("#lang").val();
                    var name = $("#name").val();

                    var dataString = {
                        'lang': lang,
                        'name': name
                    }

                    if (name == '') {
                        if (lang == 'de') {
                            $("#posted").after('<div class="form_message"><p><span class="error">Fehler:</span> Bitte gib deinen Namen an!</p></div>');
                        } else {
                            $("#posted").after('<div class="form_message"><p><span class="error">Error:</span> Please enter your name!</p></div>');
                        }
                        $("#name").focus();
                        $("#name").addClass('req');
                    } else  {
                        $("#loading").show();
                        $("#loading").fadeIn(400).html('<img src="/img/loading.gif" />Loading...');
                        $.ajax({
                        type: "POST",
                        url: "/contact-post.php",
                        data: dataString,
                        cache: false,
                        success: function(html){

                            $("#loading").hide();
                            $("#posted").after('<div class="form_message"><p>Thank you! Your contact request has been sent.</p></div>');
                            $("#contact input:submit").attr("disabled", "disabled").val("Success!");

                    }
                });
                }return false;
            }); });

The problem seems to be somewhere in the nested if statement. Does jQuery / javascript even recognize nested ifs? And if yes, why is it not working?

Answer 1

Does jQuery / javascript even recnogize nested ifs?

Yes they do

Answer 2

Why wouldn't it recognize nested if's?

Can you include the HTML for the page? There doesn't appear to be anything wrong with this javascript at all - so I have a feeling the issue is with the rest of the page.

Barring that, put an alert(lang) in right before your if statement to see what it is set to. My guess is that it will not be set to the value that you think it should be set to.

Answer 3

Javascript is case-sensitive, and perhaps the value of your #lang element is in a different case. You can force it to be lowered like this...

var lang = $("#lang").val().toLowerCase(); 

Answer 4

Check the value

alert("'" + lang + "' :" + lang.length);

Answer 5

One thing worth checking that would cause this behaviour is that you don't have any other elements on your page with id = lang. If there are, your $("#lang") selector will only find the first one, and if that's not your hidden input it won't work as you expect.