Trigger function when button is clicked but before submission

I am swapping out the contents of one wysiwyg editor into another before submission. I have been doing this by wrapping the submit button in a div and using the mouseenter event to fire it.

<div id="moveit">
<input type="button" name="sq_commit_button" id="sq_commit_button" value="Commit" accesskey="s" class="sq-form-field sq-btn-large sq-btn-green sq-commit-button" onclick="if (submit_form) { submit_form(this.form); } else { this.form.submit(); this.disabled = 'disabled';}  ">
</div>

and

jQuery('#moveit').mouseenter(function() {
    jQuery('#news_item_0_1162_wysiwyg_div #htmlarea iframe').contents().find('html').html(jQuery('#cke_1_contents iframe').contents().find('html body').html());
});

This has worked just fine for now, but is by no means a long term solution. Is there a way to execute the function when the button is clicked but before it submits, so the content can be copied across?

I tried using the onsubmit function, but when I look, the wysiwyg editor doesn't seem to consist of any form elements.

$('#myform').submit(function() {
  // your code here
});

The only instance of a form on the page looks like this, and I have tried the following form id and name in an onsubmit function without any luck.

<form id="page_asset_builder_1427599" name="main_form" method="post" action="http://example.com/builder/_nocache?" enctype="multipart/form-data" onsubmit="return form_on_submit()">

Can anyone suggest how I could do this? Or should I just stick with my mouseenter method and try and forget about it

Thanks so much!

Solution

try removing the onclick from your button and using this jquery. This is assuming that your button is in the form.

$(document).on("click","#sq_commit_button",function() {
  // your pre submit code here
  $(this).parents("form").submit();
});