onclick JS not executing in ie8/9 problem

Question

I have this line:

<input class='submit_img' type="image" onclick='ax_update_mood();' src="/images/rainbow/gobuttonbluesmall.png" value="Submit" alt="Submit"></td>

...then I have this JavaScript:

function js_alert() {
    alert('TEST ALERT');
}

function ax_update_mood() {
    var str_mood_desc = $('#moodmeter_form_mood_desc').val();
    var str_mood_color = $('#moodmeter_form_mood_color').val();

    if (str_mood_desc.length < 3 || str_mood_desc.length > 32) {
        alert('Mood Description must be between 3 - 32 characters long.');
        return
    }

    if (str_mood_color.length < 1 || str_mood_color.length > 32) {
        alert('Mood Color must be between 3 - 32 characters long.');
        return
    }

    $.ajax({
        type: "POST",
        url: "moodupdate",
        data: "mood_desc=" + str_mood_desc + "&mood_color=" + str_mood_color,
        success: function (msg) {
            ax_get_mood();
            alert("Mood Updated ");
        }
    })
}

When I click on the "submit," my JavaScript does not execute.

Can some one explain please?

Thanks

Answer 1

Provided that the code you quoted for ax_update_mood is at global scope (not contained within another function), I can't see any reason it wouldn't run. It may well not have the effect you intend, though, because nowhere are you preventing the submission of the form when your validation fails. To do that, you have to change the onclick part to:

onclick='return ax_update_mood();'

...and you have to return false; when you want to cancel the form submission.

Separately, because you're using an ajax call to do the work, you want to return false; even when the validation succeeds. Otherwise, the form will get submitted and your ajax call will never happen.

Your best bet with things like this is to use the built-in debugger ("F12 Developer Tools"), enable debugging, set a breakpoint on the first line of ax_update_mood, and walk through the code, seeing where it's going wrong.

Just to make my point about it being global explicit, your code as written has to be at page-level scope:

<script>
function ax_update_mood() {
    // ...
}
</script>

not within something else, like this:

<script>
jQuery(function($) {
    function ax_update_mood() {
        // ...
    }
});
</script>

...because the onclick attribute can only address global functions.

Rather than making it a global function, though, since you're already using jQuery, I'd probably change the input to look like this:

<input class='submit_img' type="image" id="btnSubmit" src="/images/rainbow/gobuttonbluesmall.png" value="Submit" alt="Submit"></td>

...and then put all of my code within the jQuery ready callback (just so I don't create global functions or variables; global scope is already plenty crowded enough):

jQuery(function($) {

    // Hook the click event on the image button
    $("#btnSubmit").click(ax_update_mood);

    function js_alert() {
        alert('TEST ALERT');
    }

    function ax_update_mood() {
        var str_mood_desc = $('#moodmeter_form_mood_desc').val();
        var str_mood_color = $('#moodmeter_form_mood_color').val();

        if (str_mood_desc.length < 3 || str_mood_desc.length > 32) {
            alert('Mood Description must be between 3 - 32 characters long.');
            return false;
        }

        if (str_mood_color.length < 1 || str_mood_color.length > 32) {
            alert('Mood Color must be between 3 - 32 characters long.');
            return false;
        }

        $.ajax({
            type: "POST",
            url: "moodupdate",
            data: "mood_desc=" + str_mood_desc + "&mood_color=" + str_mood_color,
            success: function (msg) {
                ax_get_mood();
                alert("Mood Updated ");
            }
        });

        return false; // Even on successful validation, we don't want the form to submit
    }
});

---

Somewhat off-topic: Some miscellaneous notes:

• In many places, you're relying on the horror that is automatic semicolon insertion. Always make sure you terminate your statements with semicolons, never rely on the JavaScript interpreter to understand your meaning well enough to do it for you. I've fixed them in the last example above.
• Since you're clearly using jQuery, I'd suggest hooking up your validation with jQuery on DOM load rather than using the antiquated onclick attribute means of doing so. I've shown how to do that in the last example above as well.