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

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.