Multiple instance of same lightbox on the same webpage: How to dynamically populate the field of Lightbox form without having to add lightbox script c

  • Profile Image
    m4mpfi
    Asked on December 28, 2014 at 11:11 PM

    Hi

    My iframe Parameters should be different depending on which button I click to promp the jotform lightbox. For example I have two buttons: "Open Jotform lightbox with default value 20" and "Open Jotform lightbox with default value 100".

    How can I solve this with JS without copy the whole code (constuctor) for each parameter I need?

    I tried to bind another click function to the button and overwrite iframeParameters object, after defining JotformFeedback as a variable, but  that didn't work.

    Any advice?

     

    I tried this:

     var JFL_1337 = new JotformFeedback({
                      formId:'1337',
                      base:'https://secure.jotformeu.com/',
                      windowTitle:'Shop',
                      background:'#FFA500',
                      fontColor:'#FFFFFF',
                      type:1,
                      height:500,
                      width:700,
                      openOnLoad:false,
                      iframeParameters: {
                           'total':'2000'
                      }
     });

     $('#testbtn').on('click', function(e){
        JFL_1337.iframeParameters = {
              'total':'999'
         }
      });

  • Profile Image
    ashwin_d
    Answered on December 29, 2014 at 06:03 AM

    Hello m4mpfi,

    Have you checked our guide already on how to add parameters in lightbox form? Please take a look at the following guide:  http://www.jotform.com/help/83-Adding-parameters-in-Lightbox-and-Feedback-forms 

    I am currently testing custom script code to pass the value on a javascript call. This is taking some time and I will get back to you soon on this.

    Thank you!

  • Profile Image
    m4mpfi
    Answered on December 29, 2014 at 06:28 AM

    Hi ashwin_d,

    Thanks a lot for creating a new thread and for quick reply. I've already checked the guide and I know that there's also an example by using variables. However, I couldn't figure it out to use an overwritten variable value within the constructor. I tried to wrap the constructor ( new jotformFeedback ) into a separate function and call it after changing the variable by clicking a button, but it didn't fire anymore.

    I also tried the code below, but since the JotformFeedback is using the initial variable it doesn't work to open a lightbox with a button that passes another value of that variable:

    var amount = '0';
    var JFL_1337 = new JotformFeedback({
                      formId:'1337',
                      base:'https://secure.jotformeu.com/',
                      windowTitle:'Shop',
                      background:'#FFA500',
                      fontColor:'#FFFFFF',
                      type:1,
                      height:500,
                      width:700,
                      openOnLoad:false,
                      iframeParameters: {
                       'total': amount
                     }
    });

    $('#testbtn').on('click', function(e){
      amount = '99';
    });

     

    I'm not a javascript expert so maybe you know a solution? :)

    Thanks in advance!

  • Profile Image
    ashwin_d
    Answered on December 29, 2014 at 08:21 AM

    Hello m4mpfi,

    I am trying to populate the JavaScript variable through the function call. There seems to be something wrong and it is not working currently. 

    I will check it latter in my free time and get back to you.

    Thank you!

  • Profile Image
    m4mpfi
    Answered on December 29, 2014 at 01:58 PM

    Ok, thanks a lot for your support!

  • Profile Image
    Shadae
    Answered on December 29, 2014 at 03:00 PM

    Hi m4mpfi,

    On behalf of my colleague, you are most welcome. We are happy to assist you.

    Ashwin will get back to you as soon as an update is available.

    Thank you.

  • Profile Image
    m4mpfi
    Answered on January 07, 2015 at 04:48 AM

    Hi Ashwin, could you find a solution?

  • Profile Image
    ashwin_d
    Answered on January 07, 2015 at 06:42 AM

    Hello m4mpfi,

    I did try several possible ways to achieve this but did not succeed. I am unable to populate the text box field from a JavaScript.

    I request you to give some more time to me before I seek help form our back end team.

     

    Thank you!

  • Profile Image
    m4mpfi
    Answered on January 11, 2015 at 01:20 PM

    No problem. I added my jotform to a separate html page now, in that way prepopulating fields is no problem. And I just used a 3rd party plugin to open this page in a lightbox, which works pretty fine.

    However, it would be very nice to pass parameters with the built in lightbox in future.

    Thanks a lot for your help!

     

  • Profile Image
    BibleLeagueCanada
    Answered on June 15, 2015 at 12:38 PM
  • Profile Image
    Charlie
    Answered on June 15, 2015 at 12:54 PM

    @BibleLeagueCanada

    It seems like you already have an opened thread of your own regarding this matter, here's the link to your thread: http://www.jotform.com/answers/425641, one of my colleague's is already assigned on it and you'll receive a response shortly. If you have follow up questions or concerns please post it there, for us to better assist you.

    Thank you for your understanding.