Support » Plugin: HubSpot - CRM, Email Marketing, Live Chat, Forms & Analytics » jQuery onclick event not working on form submit button

  • Resolved supermahesh

    (@supermahesh)


    Hello
    I am trying to call some jquery on submit button but it is not working
    this is my code
    jQuery(‘.hs-button’).on(“click”,function() {

    alert(‘ok’);

    });

    Please let me know how to call jquery event on submit button, or let me know form submit action hook

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support alortega

    (@alortega)

    Hello @supermahesh. Thanks for your enquiry.

    The problem there is the forms is running on an embedded code in an iframe so (I assume you are trying to run this code from the parent window) ‘.hs-button’ class is not being found.

    Can you try instead?

    
    jQuery('.hs-form-iframe').contents().find('.hs-button').on('click', function() {...})
    

    Please let me know if this solves your issue.

    Kind regards,
    Alvaro.

    Plugin Support mlamacchia

    (@mlamacchia)

    Comment deleted, please refer to the answer above

    • This reply was modified 5 months, 1 week ago by mlamacchia.

    Hello still, it is not working . if checked. this is my html code
    <iframe id=”hs-form-iframe-0″ class=”hs-form-iframe” scrolling=”no” style=”position: static; border: none; display: block; overflow: hidden; width: 690px; height: 969px;” height=”969″ width=”690″>

    <div class=”hs_submit hs-submit” data-reactid=”.hbspt-forms-0.5″><div class=”hs-field-desc” style=”display:none;” data-reactid=”.hbspt-forms-0.5.0″></div><div class=”actions” data-reactid=”.hbspt-forms-0.5.1″><input type=”submit” value=”Submit” class=”hs-button primary large” data-reactid=”.hbspt-forms-0.5.1.0″></div></div>

    </iframe>

    // my jquery code
    <script>
    jQuery(document).ready(function(){
    jQuery(‘#hs-form-iframe-0’).ready(function(){

    jQuery(‘#hs-form-iframe-0’).contents().find(‘.hs-button’).on(‘click’, function() {alert(‘ok’);});
    });

    });

    </script>

    Plugin Support alortega

    (@alortega)

    Hello @supermahesh,

    I think there is an issue in your script, the two ready methods are actually equivalent, you only need one.

    <script>
    jQuery(‘#hs-form-iframe-0’).ready(function(){

    jQuery(‘#hs-form-iframe-0’).contents()
    .find(‘.hs-button’).on(‘click’, function() {
    alert(‘ok’);
    });
    });
    </script>

    But there is also an issue in there. when ‘#hs-form-iframe-0’ is ready, it is still not rendered in the DOM so the next call won’t execute. If you place a console.log(jQuery(‘#hs-form-iframe-0’).length) before you will see the result is 0.

    You can implement a method to wait until the element is available i.e. https://gist.github.com/chrisjhoughton/7890303 and then execute the code.

    I hope this works for you.

    Please let me know

    Plugin Support alortega

    (@alortega)

    If you don’t mind I will also move the topic from https://wordpress.org/support/topic/action-hook-after-form-submission/ to this thread as it is related.

    Unfortunately, at the moment, we do not offer a hook to execute on submit. You can add onFormSubmit here https://plugins.trac.wordpress.org/browser/leadin/trunk/src/class-pagehooks.php#L121

    and here https://plugins.trac.wordpress.org/browser/leadin/trunk/js/src/gutenberg/FormBlock/FormBlockSave.js#L12

    but since we do not support this, the next time you update the plugin, it will overwrite your changes

    Plugin Support alortega

    (@alortega)

    I think I resolved this issue by mistake. Please let us know if the changes proposed work for you.

    Kind regards,
    Alvaro.

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.