Hacking your InfoPath Form button with your own JavaScript Function

If you are still unfortunate enough to be using SharePoint 2013 and InfoPath as I am, here is a hack I recently use to create a custom JavaScript button in SharePoint.

Recently, I created a form with InfoPath. The users needed a button to create a related list item with some fields auto-populated based on the parent item. So I could edit the form page and add another webpart to the page with my custom scripted button. But then the button would be outside of the form looking a little out of place. Instead, I create a submit button in InfoPath and then created a function in JavaScript. I connected the function to the button by simply replacing the Infopath button onclick event with mine.

/* USE BELOW LINE TO BIND FUNCTION TO ANY BUTTON*/
$('input:button[value=Save]').attr('onclick','CreateRelatedItem();');

Now the button looks nice, has its unique function and the end user can still customize their form in InfoPath. Everyone is happy!