How to update form fields via popup box?

  • Profile Image
    sacdesigner
    Asked on April 21, 2011 at 08:52 AM

    I have customized my Jot form a bit by adding a link within the form that opens up a popup window with different image selections. When a user clicks on the image they want, it passes the image name and number back to the form. I have all that working perfect. What I would like to know is how to make it work so when a user clicks on an image, the popup box will automatically close and update the form in the parent window. Right now it updates the form fields I want but opens the form with the updated fields in the popup window. Any help on gegtting this to work the way I need it to?

     

    Thanks for any help in advance!!

  • Profile Image
    NeilVicente
    Answered on April 21, 2011 at 09:47 AM

    Hi,

    First off, I'd like to commend you for taking your forms to the next level. Your form has the word "Professional" written over it.

    With regards to your question, I have found an excellent tutorial which you can learn from to achieve the effect that you want. Head over to this Javascript: Popup Windows tutorial for more information.

    Hint: Example 1 & 4 perfectly defines the script that you need.

    Hope this helps. Let me know if you're having problems making it work. I'd gladly create examples for you.

    Good luck with your project!

    Regards,
    Neil

  • Profile Image
    sacdesigner
    Answered on April 21, 2011 at 12:12 PM

    Yes an example would be of some help... I'm getting how to implement the close popup function but not getting how to implement the update form in the parent window function along with the code for the URL parameters...

  • Profile Image
    NeilVicente
    Answered on April 21, 2011 at 01:09 PM

    Hi,

    The codes that should go to your color picker page is in Example 4 on that tutorial.

    Take a look at this Example Form I have made with a sample popup color picker.

    Here are the source codes for both page:

    example.html

    colorpicker.html

     

    Feel free to inspect the codes to learn how I used the tutorial I mentioned in my previous post to achieve this effect.

  • Profile Image
    sacdesigner
    Answered on April 21, 2011 at 01:48 PM

    Ok I implemented the code as you have shown in your examples but it is still not working. Please see www.jolzy.com/signup.html

    In the signup form you will see a link that says VIEW DESIGNS. If you click on that link, a popup window opens with a list of designs. If you choose one of the designs in the list you will see nothing at all happens. It should close the popup window and prepopulate the design number for the design you selected into the form in the original window. Could you please review the code I implemented into the design list popup window and see if I missed something?

     

    Again, thank you so much for your help

  • Profile Image
    NeilVicente
    Answered on April 21, 2011 at 01:56 PM

    Yes you missed your closing script tags

    <script type="text/javascript">
    function openURL(sURL) {
    opener.document.location = sURL;
    self.close();
    }
    </script>
    </head>

  • Profile Image
    NeilVicente
    Answered on April 21, 2011 at 02:21 PM

    I see that you're form is working flawlessly now. Congratulations!

    Glad to be of help.

  • Profile Image
    sacdesigner
    Answered on April 21, 2011 at 10:38 PM

    Unfortunately it is not working flawlessly. Still nothing happens when you choose a design image from the list in the popup window. Please test the form in the choose design style section and see that nothing works when you click the view designs link and choose a design. I tested it in IE and Firefox. Do you think it coulsd be a conflict with the Jquery I am using to display the design images?

  • Profile Image
    NeilVicente
    Answered on April 22, 2011 at 02:14 AM

    Hi,

    I can't seem to replicate what you're experiencing. This might have been an issue with the browsers you're using. Please watch the short screencasts below to see how it works flawlessly on my end.

    http://www.screencast.com/t/9NN7G6JiyrJ

    http://www.screencast.com/t/Dp4bbedChMbP

     

    Let us know if it is still not working on your end.

  • Profile Image
    liyam
    Answered on April 22, 2011 at 02:45 AM

    Hello,

    What your pop-up window does is it returns back to the parent browser a new URL with the URL parameter.  You should wait for it to load/refresh the page so for you to see the prepopulated text field.

    Hope this helps.

  • Profile Image
    sacdesigner
    Answered on April 22, 2011 at 08:38 AM

    Ok, I have made a screencast of me testing the form on my end. You can view it here. This was using Firefox 4.0. I tested the form in IE 8 as well with the same results. As you can see when you watch the screencast, I attempt to click on several of the design images in the list of designs. But absolutely nothing happens no matter which design I click on.

     

    So out of curiousity I looked at it using the Firebug console for Firefox and it displays the following error for the javascript used to update the form from the image links:

    Permission denied to access property 'document'
    http://www.jolzy.com/popup/designspopup.html


    It states the error is on Line 19 of the page's code and the code on Line 19 is as follows:

    opener.document.location = sURL;

     

    I tested the form on 2 different computers in my home and still have the same results. Could this be a browser issue or a browser setting maybe? I know I am missing something here. Thank you guys for hanging in there w/ me on this one. You all are great!

  • Profile Image
    NeilVicente
    Answered on April 22, 2011 at 02:21 PM

    Hi,

    After going back and forth with your website, and your screencast as well, I finally figured out the reason why this is not working for you.

    You access your site with the url http://jolzy.com/signup.html then open a pop-up with the url http://www.jolzy.com/popup/designspopup.htm which effectively violates the Same Origin Policy for client-side scripting languages such as JavaScript.

    To solve this problem, replace the link codes

    <a target="_blank" href="javascript:popUp('http://www.jolzy.com/popup/designspopup.html')">

    with

    <a target="_blank" href="javascript:popUp('popup/designspopup.html')">


    Hopefully, this should really make your popups work. Update us on your progress. Thanks.

  • Profile Image
    sacdesigner
    Answered on April 22, 2011 at 07:23 PM

    You are amazing!! Thank you for all your help. That was in fact the problem. It all seems to work perfectly now. I cannot thank you enough!

  • Profile Image
    mliz
    Answered on April 22, 2011 at 10:43 PM

    Hi Sacdesigner,


    Good to know that our support team was able to help out
    with the problem.

    Thank you for using JotForm.

    Best Regards,
    Mliz

  • Profile Image
    NeilVicente
    Answered on April 23, 2011 at 06:01 PM

    You're welcome. Glad to be of service.

    Neil