Avatar of mmoore
mmoore
Flag for United States of America asked on

binding event to form in window.open

I am trying to open a pop-up window which has a form. Eventually the user will close the window, but before that I want to send a form value back to the parent window using localStorage. If I use dev-tools to execute my javascript commands I am successful. So I don't think it's a problem  there. I suspect the problem is I am not able to bind the localStorage.setItem to the form on the pop-up.
Here are the relevant bits of code from the parent window.
        // onload
        j$(document).ready(function() {
            // disable ajax request caching for security best practice
            j$.ajaxSetup({ cache: false });

            // open modal and query available record types when page loads
            openModal();
            
            //
            j$(".modalSubmit").click(function(event) {
                validateRecordTypeSelected();
            });

           window.addEventListener('storage',function(event) {
               console.log(event);
           });

        });

Open in new window


and
        function openModal2() {
           console.log('running openModal2');
           var popup = window.open("/apex/wrapwiz", "myWindow", "width=600, height=400, toolbar=no, menubar=no");
           j$('popup, #j_id0\\:j_id1\\:i\\:f').bind('submit', function( event ) {
              alert( "Handler for .submit() called." );
             localStorage.setItem(document.getElementById('j_id0:j_id1:i:f:pb:d:Company.input').value);
                                                          
              });
         }

Open in new window


openModal2 is being called by a button on the screen and I know that works because the pop-up opens when the button is clicked.

Here are what I believe are the relevant parts of the pop-up window
<form id="j_id0:j_id1:i:f" name="j_id0:j_id1:i:f" method="post" action="https://c.cs14.visual.force.com/apex/wrapwiz" enctype="application/x-www-form-urlencoded" onkeypress="return FlowLoadingScreen.noenter(event);" onsubmit="FlowLoadingScreen.showLoadingScreen(this)">

Open in new window


and

<td class="labelCol requiredInput"><label class="FlowText" for="j_id0:j_id1:i:f:pb:d:Company.input" id="j_id0:j_id1:i:f:pb:d:Company.prompt"><span class="assistiveText">*</span>Account Name</label></td><td class="dataCol col02"><div class="requiredInput"><div class="requiredBlock"></div>

<input  id="j_id0:j_id1:i:f:pb:d:Company.input" maxlength="255" name="j_id0:j_id1:i:f:pb:d:element___input____Company" size="20" type="text" value="" /></div></td><td class="labelCol last empty">&nbsp;</td><td class="dataCol last empty">&nbsp;</td></tr>

Open in new window


If there is a better way to accomplish my objective, I'm open to scrapping this.

Thanks,
Mike
JavaScript

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
SOLUTION
Mukesh Yadav

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Leonidas Dosas

Did you serialize the values of the form into string using JSON.stringify() before close the modal;And after when you want to get these values did you parsing via JSON.parse()  the data?
ASKER CERTIFIED SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
mmoore

ASKER
Hi experts, thanks for the answers. I will be studying and working with each of them over the next 24 hrs. I'll be back.
mmoore

ASKER
This is what I came up with.
This is the visualforce page (Salesforce) that wraps the wizard.
<apex:page showheader="false" sidebar="false">
<flow:interview name="New_Account_Wizard"></flow:interview>
<!-- New_Account_Wizard is a multi page flow with a form on each page -->
<!-- so at different stages of the flow the DOM will look different -->   
<script>
   window.onload = function () {
   
     var frm = document.getElementById('j_id0:j_id1:i:f');
     // do this only if the target FORM is on the curent page
     if (typeof(frm) != 'undefined' && frm != null)
     {
     
        var accountNameField = document.getElementById('j_id0:j_id1:i:f:pb:d:Company.input');
        // do this only if the target accountNameField is on the curent page
        if (typeof(accountNameField) != 'undefined' && accountNameField != null)
        {
           // Load the local Storage when the user hits the NEXT button. NEXT button does SUBMIT and goes to next page
           frm.addEventListener('submit',function(evt) {
               localStorage.setItem('AccountName', document.getElementById('j_id0:j_id1:i:f:pb:d:Company.input').value);
           });
        }
     }
     
     var finishBtn = document.getElementById('j_id0:j_id1:i:f:pb:pbb:finish');
     if (typeof(finishBtn) != 'undefined' && finishBtn != null)
     {
        // override the FINISH button on the last screen of the wizard. If you don't,
        // the natural behaviour is to restart the wizard at page one.
        finishBtn.addEventListener('click',function(evt2) {
            evt2.preventDefault();
            window.close();
        });
     }
   }
</script>                
</apex:page>

Open in new window


This is the bit from the Parent window that captures the event and stuffs it in a field
           window.addEventListener('storage',function(event) {
               if (event.key == 'AccountName') { ;
                  j$(".accountNameField").val(event.newValue);
                }
           });

Open in new window


Suggestions for improvements are welcome.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
Julian Hansen

What is the result of running this code? Does it work?
mmoore

ASKER
Yes, it works! It's not clear how to close this issue. I clicked on Best Solution and Assisted Solution for another. Oh wait, I now see a Next button at the bottom of the screen.
mmoore

ASKER
Thanks for the help.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Julian Hansen

You are welcome.