How to capture save/enable event in a post-receive hook?

[Josh Wheeler]

I've written a custom form for a post-receive hook and I want to do some client-side validation/UI cleanup when the save/enable button is clicked.  Digging down in the code, the button has the same classes regardless if it is an enable or save:

<button class="button-panel-button button-panel-submit-button">Enable</button>

I've tried a lot of different solutions (a day and a half's worth) but I can't find any way to prevent a submit if I wanted to.  A snippet that works on any other submit button I'm familiar with is:

$(".button-panel-submit-button").click(function(e){
    console.log("You clicked .button-panel-submit-button");
    e.preventDefault();
    e.stopPropagation();
});

The message prints to the console, but the form is submitted.

How do you capture and potentially block the form submission?

[Andrii Mishak]

Try return false via javascript

<input type="submit" onclick="return validationFunction();" />

function validationFunction() { //you code  return false; }

http://stackoverflow.com/a/3350260/4876955

[Josh Wheeler]

It turns out that when the button is clicked, there's an ajax call made under the hood in dialog.js. The form that's automatically generated is: <form class="aui prevent-double-submit " action="" method="post" accept-charset="UTF-8"> <br><script>loadBindings();</script> <div class="hidden"> <div id="template" name="hook_" class="hookWrapper"> <div class="textInputWrapper"> <div class="branchWorkflowWrapper"> <div class="branchWrapper"><label>Branch</label><span><input name="branch_" type="text" class="branch"></span></div> <div class="workflowWrapper"><label>Workflow</label><span><input name="workflow_" type="text" class="workflow"></span></div> </div> <div class="parametersWrapper"><label>Parameters</label><span><input name="parameters_" type="text" class="parameters"></span></div> </div> <div class="buttonsWrapper"><input type="button" class="btnAddRow" value="+"><input type="button" class="btnRemoveRow" value="-"></div> </div> </div> <div id="hooks"> <div name="hook_1" class="hookWrapper"> <div class="textInputWrapper"> <div class="branchWorkflowWrapper"> <div class="branchWrapper"><label>Branch</label><span><input name="branch_1" type="text" class="branch" value=""></span></div> <div class="workflowWrapper"><label>Workflow</label><span><input name="workflow_1" type="text" class="workflow" value=""></span></div> </div> <div class="parametersWrapper"><label>Parameters</label><span><input name="parameters_1" type="text" class="parameters" value=""></span></div> </div> <div class="buttonsWrapper"><input type="button" class="btnAddRow" value="+"><input type="button" class="btnRemoveRow" value="-" style="visibility: hidden;"></div> </div> </div> <input type="hidden" id="count" name="count" value="1"> </form> The jQuery below prints to the console but doesn't prevent the window from closing: $("button.button-panel-submit-button").on("click", function(){ console.log("clicked"); return false; }); The code isn't run when I try and cancel the submit this way: $("form.prevent-double-submit").on("submit", function(e){ console.log("submit"); e.preventDefault(); return false; }); I'm at a loss right now. I'm not sure how to intercept the ajax call.

[Andrii Mishak]

how about $("button.button-panel-submit-button").on("click", function(e){ console.log("clicked"); e.preventDefault(); e.stopPropagation(); return false; }); ?

[Josh Wheeler]

That didn't work either. What I ended up doing was doing any UI mods on $(".button-panel-submit-button").mouseup(function(){ //stuff }); and then all of the validation on the backend. Not exactly what I wanted but it got the job done.