How do I pass a dynamic parameter to JotForm embedded form?

Hello,

I am trying to work with an embedded lightbox popup and I am struggling with passing through a parameter. I can successfully pass in a hard coded string when using the "iframeParameters" function however I can not pass through a dynamic string (a textbox on the page). My code us currently:

iframeParameters: { 'subject': document.getElementById("lead_email_address").value },

 This is just passing in a blank subject field however when I do:

iframeParameters: { 'subject': 'Email Address' },

 This is working. 

Any assistance would be appreciated.

Thanks

Hello ocrmlabs,

Can you please share the complete code which you are trying to use? It will help us figure out the issue you are having.

Is it possible for you to us jQuery code in your page? If yes, I would suggest you to please try the following code and see if that helps you:

iframeParameters: { 'subject':  $('#lead_email_address').val();},

 

We will wait for your response.

Thank you!

 

Hi thanks for you response, I tried using jQuery however I am stilling getting the same results. The full code is (wrapped in the standard <script> tag supplied by JotForm however pasting them in here makes the code disappear):

var JFL_63434163112950 = new JotformFeedback({ formId: '63434163112950', base: 'https://form.jotformpro.com/', iframeParameters: { 'subject': $('#lead_email_address').val() }, windowTitle: 'Sam s Testing form 2', background: '#FFA500', fontColor: '#FFFFFF', type: 'false', height: 500, width: 700, openOnLoad: false });

This is being triggered by this button:

<input class="btn lightbox-63434163112950" name="submit_lead" type="submit" />

I have tried removing the onclick event I added to see if that was causing the issue and the problem is still not fixed.

Thanks in advance :)

 

Hello ocrmlabs,

Sorry for the confusion. Can you please let us know the webpage URL where you have added this lightbox email code? That would help us debug the issue you are having.

We will wait for your response.

Thank you!

Hello,

Sorry for the delay, here is the URL we have this webform hosted: https://billy-hostedjotform-ocrm.opencrm.co.uk/new_website.php

Thanks in advanced :)

Hi, 

Thanks for providing the link. I have put a note to @ashwin_d to look into it, and you will be updated via this thread. 

 

Thank you!

Hello ocrmlabs,

Please delete all the existing codes you have in your webpage and use the following code:

 

<input type="text" name="lead_email_address" id="lead_email_address"> <input type="submit" onDISABLEDclick="createLead()" name="submit_lead">

<input type="submit" style="display: none;" name="hidden_open_jotform" class="btn lightbox-71233645349963">

 

<script src="https://staging.opencrm.co.uk/wp-content/themes/opencrm/js/jquery-3.1.0.min.js?ver=4.7.4" type="text/javascript"></script>

<script src="https://form.jotformpro.com/static/feedback2.js" type="text/javascript"> </script> 

<script type="text/javascript">

    /*

    * Validate Email

    * Checks if an email address is valid

    * @param (string) Email Address to validate

    * @author http://stackoverflow.com/a/46181

    */

    function validateEmail(email) {

        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

        return re.test(email);

    }

    /*

    * Create Lead

    * This will call the OpenCRM api to create a lead based just on the email address

    * @author William Winter

    */

    function createLead()

    {

        // Get the email address from the form

        var email_address = $("#lead_email_address").val();        

        // Check if the email is valid

        if(validateEmail(email_address)){

            // Do an ajax call to the opencrm api, this URL will change when this goes live

            $.ajax({

                type: 'POST',

                url: 'free_trial.php',

                crossDomain: true,

                data: {module: "Leads", email: email_address},

                dataType: 'json'

            });

   var JFL_71233645349963 = new JotformFeedback({

       formId: '71233645349963',

        base: 'https://form.jotformpro.com/',

       iframeParameters: {

           'email': $('#lead_email_address').val()

       },

        windowTitle: 'Free Trial',

       background: '#FFA500',

        fontColor: '#FFFFFF',

       type: '1',

        height: 620,

       width: 700,

        openOnLoad: false

   });

            $("input[name='hidden_open_jotform']").click(); // We need a hidden button on the page to open the jotform, if we use the original button then it opens the form without doing email validation  

        }else{

            // If the email is not valid then we need to alert the user to this

            alert("Email not valid");

        }    

    }

</script>

Hope this helps.

Do get back to us if the issue persists.

Thank you!

Thanks, I have changed my code and all is working perfectly now :)