We help IT Professionals succeed at work.

JS: How to create a PopUp Form and pass values back to Parent?

jlaidlaw
jlaidlaw asked
on
3,136 Views
Last Modified: 2010-04-21
I'm adding to a Table Wizard to an existing WYSIWIG textarea replacement editor.   When the user clicks a button on the toolbar, a pop-up form opens prompting for the number of rows, columns and other stuff.   When Ok is pressed,  the values need to be passed back to the parent function.  I'm able to get a pop up to display but it immediately disappears, which may be due to calling from a function and not a hyperlink.   As for passing the values, I'm lost.






       
function toolbar_handler(){
         case button1:
                {blah-blah}
                 break();
         case button2:
                valueArray = PopupForm();
                
                (use values to generate table in editor)
         .
         .
         case button-N:
 
}
 
function PopUpForm()
{
var popup = window.open('','Name','height=300, width=500');
	
	popup.document.write('<H1>Table Wizard</p>');
	// Text Input for Header name
	popup.document.write('<form name="tablewiz">');
	popup.document.write('<input type="text" name='tblHeader' />');
 
	// Pulldown List - Number of Rows in Table
	popup.document.write('<select name="tblRow">');
	popup.document.write('<option value="1">1</option>');
	popup.document.write('<option value="2">2</option>');
	popup.document.write('<option value="2">3</option>');
	popup.document.write('<option value="4">4</option>');
	popup.document.write('</select>');
	
                     // Pulldown List - Number of Columns in Table
	popup.document.write('<select name="tblCol">');
	popup.document.write('<option value="1">1</option>');
	popup.document.write('<option value="2">2</option>');
	popup.document.write('<option value="2">3</option>');
	popup.document.write('<option value="4">4</option>');
	popup.document.write('</select>');
	popup.document.write('</form>');
 
}

Open in new window

Comment
Watch Question

Commented:
what browser are you using?

Commented:
I got your code to work.  At least the window stayed open.  Do you have a popup blocker active?  Some popup blockers can't tell a new window from a true popup.

I am working on a solution for passing parameters.

Oh, btw, if you notice I added the line:

popup.document.close();

Without this line, the javascript will keep trying to load more stuff into the new window, even if there is nothing left to load.  Adding this line saves system resources.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function toolbar_handler(button){
alert(button);
 switch (button){
         case "button1":
                
                 break;
         case "button2":
                PopUpForm();
               	break; 
               
}
 
}
 
function PopUpForm()
{
alert("gggg");
var popup = window.open('','Name','height=300, width=500');
        
		popup.document.write('<html><head><title></title></head>');	
popup.document.write('<body>');
        popup.document.write('<H1>Table Wizard</p>');
        // Text Input for Header name
        popup.document.write('<form name=\"tablewiz\">');
        popup.document.write('<input type=\"text\" name=\'tblHeader\' />');
 
        // Pulldown List - Number of Rows in Table
        popup.document.write('<select name=\"tblRow\">');
        popup.document.write('<option value=\"1\">1</option>');
        popup.document.write('<option value=\"2\">2</option>');
        popup.document.write('<option value=\"2\">3</option>');
        popup.document.write('<option value=\"4\">4</option>');
        popup.document.write('</select>');
        
                     // Pulldown List - Number of Columns in Table
        popup.document.write('<select name=\"tblCol\">');
        popup.document.write('<option value=\"1\">1</option>');
        popup.document.write('<option value=\"2\">2</option>');
        popup.document.write('<option value=\"2\">3</option>');
        popup.document.write('<option value=\"4\">4</option>');
        popup.document.write('</select>');
        popup.document.write('</form>');
		popup.document.write('</body></html>');
 		popup.document.close();
}
</script>
</head>
 
<body>
<form name="tst">
<input type="button" name="button2" value="Button2" onClick="toolbar_handler(this.name)">
</form>
</body>
</html>

Open in new window

Author

Commented:
Barry,

First of all, THANKS!!!

Ok, I got that to work and also figured out why the focus kept jumping back to the parent window.    After all the Swtiches in the button handler function, the script sets the focus to the parent.    So, in the case of the button for the table wizard, the new form is opened and the task is done - there's nothing that forces the program to wait for the popup window to close before proceeding.    

I can work around this but I really need help with passing values back to the parent.    I thought about using hidden textboxs in the parent, then using document.opener to write the values from the popup.   This seems tacky - gotta be a more elegant way.
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
I'm getting there.  I tried to embed a javascript function to setValues within the pop-up form but kept crashing:  
EX:  
    popup.document.write('<html><head><title></title>\n');
    popup.document.write('<script type="text/javascript">');
    popup.document.write('function SetValues() {');
       (The idea was to write vales to hidden text fields in the parent using window.opener)                      
    popup.document.write('</script>');                  
    popup.document.write('</head>');      

So, I figured out to access the SetValues in the parent window (Snippet below), but once I run the SetValues function, I don't know how to access the pop-up window.  

Any ideas?
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function toolbar_handler(button){
//alert(button);
 switch (button){
         case "button1":
                
                 break;
         case "button2":
                PopUpForm(button);
               	break; 
               
}
 
var numRows = 2;
 
}
 
function SetValues(ff)
{
	
	//window.opener.document.tst.passedValue.value="HI";
	//document.tst.passedValue.value="hi there";
	alert(ff);
	
	//--------------- DOES NOT WORK --------------------------------<
	var Current=popup.tablewiz.selectRow.selectedIndex;
	alert(Current);
	
	document.tst.passedValue.value = popup.document.tablewiz.selectRow.options[Current].text;
 
	
	//return;
}
 
function PopUpForm(param)
{
var popup = window.open('','Name','height=300, width=500, left=300');
        
		popup.document.write('<html><head><title></title>\n');
		
				
		popup.document.write('</head>');	
		popup.document.write('<body>\n');
        popup.document.write('<H1>Table Wizard</H1>\n');
        // Text Input for Header name
        popup.document.write('<form name="tablewiz">\n');
        popup.document.write('<input type="text" name="tblHeader" />\n');
 
        // Pulldown List - Number of Rows in Table
        popup.document.write('<select name=\"selectRow\">\n');
        popup.document.write('<option value=\"1\">1</option>\n');
        popup.document.write('<option value=\"2\">2</option>\n');
        popup.document.write('<option value=\"2\">3</option>\n');
        popup.document.write('<option value=\"4\">4</option>\n');
        popup.document.write('</select>\n');
        
                     // Pulldown List - Number of Columns in Table
        popup.document.write('<select name=\"tblCol\">\n');
        popup.document.write('<option value=\"1\">1</option>\n');
        popup.document.write('<option value=\"2\">2</option>\n');
        popup.document.write('<option value=\"2\">3</option>\n');
        popup.document.write('<option value=\"4\">4</option>\n');
        popup.document.write('</select>\n');
		
		var greeting = "hi there";
 
		popup.document.write('<input type="button" id = "button3" name="button3" value="Ok" onClick="self.close();window.opener.SetValues(self.tablewiz.selectRow.options[0].text)" />\n');		
        popup.document.write('</form>\n');
		popup.document.write('</body></html>\n');
 		popup.document.close();
}
</script>
</head>
 
<body>
<form name="tst" id="tst" method="post">
<input type="button" id = "button2" name="button2" value="Button2" onClick="toolbar_handler(this.name)">
<input type="text" name="passedValue" id="passedValue">
</form>
</body>
</html>

Open in new window

Author

Commented:
Thanks for the help.   If you have any input on how to address the popup from the parent,  let me know ( my last comment).

Again, thanks

Commented:
OK, I corrected your code.  First, your reference to the window named 'popup' was undefined, and unnecessary.  It was undefined because 'popup' is just what you called it in the PopUpForm function to create it.  The actual window is not called 'popup', so the other function did not recognize it.  

It is unnecessary, because in your popup window code, your submit button is calling the function in the parent window and passing it the actual value of the selection you made.  Therefore, your parent function does not have to re-reference the child, since it already has the value it needs.


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function toolbar_handler(button){
//alert(button);
 switch (button){
         case "button1":
                
                 break;
         case "button2":
                PopUpForm(button);
                break; 
               
}
 
var numRows = 2;
 
}
 
function SetValues(ff)
{
        
        //window.opener.document.tst.passedValue.value="HI";
        //document.tst.passedValue.value="hi there";
        alert(ff);
        
        //--------------- DOES NOT WORK --------------------------------<
        //var Current=popup.tablewiz.selectRow.selectedIndex;
        //alert(Current);
        
        document.tst.passedValue.value = ff;
 
        
        //return;
}
 
function PopUpForm(param)
{
var popup = window.open('','Name','height=300, width=500, left=300');
        
                popup.document.write('<html><head><title></title>\n');
                
                                
                popup.document.write('</head>');        
                popup.document.write('<body>\n');
        popup.document.write('<H1>Table Wizard</H1>\n');
        // Text Input for Header name
        popup.document.write('<form name="tablewiz">\n');
        popup.document.write('<input type="text" name="tblHeader" />\n');
 
        // Pulldown List - Number of Rows in Table
        popup.document.write('<select name=\"selectRow\">\n');
        popup.document.write('<option value=\"1\">1</option>\n');
        popup.document.write('<option value=\"2\">2</option>\n');
        popup.document.write('<option value=\"2\">3</option>\n');
        popup.document.write('<option value=\"4\">4</option>\n');
        popup.document.write('</select>\n');
        
                     // Pulldown List - Number of Columns in Table
        popup.document.write('<select name=\"tblCol\">\n');
        popup.document.write('<option value=\"1\">1</option>\n');
        popup.document.write('<option value=\"2\">2</option>\n');
        popup.document.write('<option value=\"2\">3</option>\n');
        popup.document.write('<option value=\"4\">4</option>\n');
        popup.document.write('</select>\n');
                
                var greeting = "hi there";
 
                popup.document.write('<input type="button" id = "button3" name="button3" value="Ok" onClick="self.close();window.opener.SetValues(document.tablewiz.selectRow.options[document.tablewiz.selectRow.selectedIndex].text)" />\n');             
        popup.document.write('</form>\n');
                popup.document.write('</body></html>\n');
                popup.document.close();
}
</script>
</head>
 
<body>
<form name="tst" id="tst" method="post">
<input type="button" id = "button2" name="button2" value="Button2" onClick="toolbar_handler(this.name)">
<input type="text" name="passedValue" id="passedValue">
</form>
</body>
</html>

Open in new window

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.