Javascript button onclick() not firing

Question

I am trying to figure out why my javascript is not running when clicking a button. Ive checked to make sure the javascript file is loading correctly, and there are no errors in the console. When I run the javascript code in the console, the code successfully runs and does what it is supposed to do, however when I click the button, it does not fire. I believe all my syntax is correct, so I am not sure what is causing this issue.

Below is the HTML for the button:

<input class="btnSaveParameters" id="btn_SaveCriteria" onclick="return btn_SaveCriteria_onclick();" type="button" value="Save Subscription"/>

Below is the Javascript function that runs correctly in the console, but does not fire when clicking the button:

function btn_SaveCriteria_onclick() {
    //Testing if function fires:
    window.alert(5 + 6);

    var availableSelects = [];
    $("Select").each(function () {
        availableSelects.push($(this).attr("id"));
    });
    if (
        $("#" + availableSelects[1])
            .find(":selected")
            .text() + $("#" + availableSelects[2])
            .find(":selected")
            .text()+$("#" + availableSelects[2])
            .find(":selected").text() ==='AllAllAll'
    ) {
        $(".PageTitle").append("<div id='dialog' title='Parameter Warning'>You cannot select all for all 3 filters</div>");
            $("#dialog").dialog();
        } else {
            var t = document.getElementById("modal-form").cloneNode(true);
            t.style.display = "inline";
            var options = {
                title : "Add a Description to your Subscription",
                width : 500,
                height : 100,
                dialogReturnValueCallback : MyDialogClosed,
                html: t
            };
        };
        SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
    }
}

Can anyone see why the javascript is not firing with the button click?

In case you might have missed it, was `btn_SaveCriteria_onclick()` defined inside another function at all? is there any way that the function is not in the correct scope? — Patrick Barr, Aug 12 '16 at 19:21
I created a gist to show you what I have. When I click the button it fires an alert with 11. Is that what you expect? https://gist.github.com/kemiller2002/84f6e6746fa9327f0216c87f379ae472 — kemiller2002, Aug 12 '16 at 19:24
@Kevin Yes I added the alert to test if the function has been entered after clicking the button. The alert does not pop up when I click the button currently. — Reeggiie, Aug 12 '16 at 19:26
Can you check and see what I posted vs what you have in your file. Mine fires, and I didn't really change anything. — kemiller2002, Aug 12 '16 at 19:27
@PatrickBarr I just checked, and the function is in the correct scope — Reeggiie, Aug 12 '16 at 19:32

Diogo Menezes · Answer 1 · 2016-08-12T19:50:57.897

0

Probably the onclick event is not finding the function, because is out of scope.

To ensure attach the event with jquery:

I tested and is working on:

https://jsfiddle.net/8k9ms39s/

   // this will atach btn_SaveCriteria_onclick to btn_SaveCriteria button.

    $(function() {
        $('#btn_SaveCriteria').click(function(){ btn_SaveCriteria_onclick(); });
    });


    // this is your unchanged function
    function btn_SaveCriteria_onclick() {


    //Testing if function fires:
    window.alert(5 + 6);

    var availableSelects = [];
    $("Select").each(function () {
        availableSelects.push($(this).attr("id"));
    });
    if ($("#" + availableSelects[1]).find(":selected").text() + $("#" + availableSelects[2]).find(":selected").text()+$("#" + availableSelects[2]).find(":selected").text() ==='AllAllAll') {
        $(".PageTitle").append("<div id='dialog' title='Parameter Warning'>You cannot select all for all 3 filters</div>");
        $("#dialog").dialog();

    } else {
    var t = document.getElementById("modal-form").cloneNode(true);
    t.style.display = "inline";

    var options = { title: "Add a Description to your Subscription", width: 500, height: 100, dialogReturnValueCallback: MyDialogClosed, html: t };//$('<div id="pgDiv"><form id="pgForm" method="post"><input type="text" name="Description" id="pgDescription>Description: </form></div>').get(0) };


    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);

    }
    }

edited Aug 12 '16 at 19:50

answered Aug 12 '16 at 19:19

Diogo Menezes

41
5

your code is working. I tried it using this and alert with 11 value just poped-up – BHR Aug 12 '16 at 19:23
Yes, is working, i dont know why people give -2 to my answer o.O The 11 result is an alert from @Reeggiie original function. – Diogo Menezes Aug 12 '16 at 19:25
Keep in mind that unless you're declaring your functions as `var func = function() { .. };` javascript could care less about their ordering. [JavaScript function declaration syntax: var fn = function() {} vs function fn() {}](http://stackoverflow.com/questions/336859/javascript-function-declaration-syntax-var-fn-function-vs-function-fn) – Patrick Barr Aug 12 '16 at 19:30
@Reeggiie se my example on https://jsfiddle.net/8k9ms39s/ its working. I did not change your function. I only attach it with a different bind way. – Diogo Menezes Aug 12 '16 at 19:41
Probably downvoted because you don't need the function when you bind the event, you can just pass the `btn_SaveCriteria_onclick()` to it: `$('#btn_SaveCriteria').click(btn_SaveCriteria_onclick);` – Hanlet Escaño Aug 12 '16 at 19:56

score 0 · Answer 2 · answered Aug 12 '16 at 20:26

Put your function in script tag above your input button tag. In your html file : https://jsfiddle.net/L7rmb4n1/

<script>
function btn_SaveCriteria_onclick() {
//Testing if function fires:
alert(5 + 6);
var availableSelects = [];
$("Select").each(function () {
    availableSelects.push($(this).attr("id"));
});
if ($("#" + availableSelects[1]).find(":selected").text() + $("#" + availableSelects[2]).find(":selected").text()+$("#" + availableSelects[2]).find(":selected").text() ==='AllAllAll') {
    $(".PageTitle").append("<div id='dialog' title='Parameter Warning'>You cannot select all for all 3 filters</div>");
    $("#dialog").dialog();

} else {
var t = document.getElementById("modal-form").cloneNode(true);
t.style.display = "inline";

var options = { title: "Add a Description to your Subscription", width: 500, height: 100, dialogReturnValueCallback: MyDialogClosed, html: t };//$('<div id="pgDiv"><form id="pgForm" method="post"><input type="text" name="Description" id="pgDescription>Description: </form></div>').get(0) };


SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);

}
}

</script>

<input class="btnSaveParameters" id="btn_SaveCriteria" 
onclick="btn_SaveCriteria_onclick();" type="button" value="Save Subscription"/>

If you are willing to put function in separate js file .Please include js file in head tag or above your button.

Please let me know if this works.

score 0 · Accepted Answer · answered Aug 12 '16 at 20:42

Thank you everyone for the inputs.

I was able to get the button to fire the javascript function, but I have no idea why it worked.

I created a new function and hooked it up to the button.

function test2() { window.alert(1+1);}

This test function fired when clicking the button. Then I tried adding the rest of the code to the test2 function. That also fired. Seeing that this worked, I changed the original functions name from

btn_SaveCriteria_onclick()

to

test()

and deleted the test2 function. For some reason, changing the name to test() worked, and the javascript fired. So the solution was changing the functions name from btn_SaveCriteria_onclick() to something else, which I changed to saveSubscriptionOnClick().

I have no idea why this worked, or why this was an issue, but ill take it.

Javascript button onclick() not firing

3 Answers3