Solved

Using a popup window to retrieve user input like using prompt

Posted on 2004-09-24
8
190 Views
Last Modified: 2006-11-17
Hi All

Im trying to get some information from a user while a script is actually in the process of running and at the moment im using prompts to get the info from the user.

What i would like would be to have 1 pop up window appear with form boxes in it, then when the user clicks ok on the form, these variables are passed back to the main script and converted into variables

so this is what i have so far

function writeIt()
{
var varA== prompt('Enter var A:', '1');
var varB== prompt('Enter var B:', '1');
var varC== prompt('Enter var C:', '1');
var varD== prompt('Enter var D:', '1');

document.write(varA+varB+varC+varD);
}

<a href="#" onClick="writeIt()">click</a>


so that will get each variable by using the prompt window and write the results to the screen when the user clicks on the link click.

anyone know how i can do the same thing but just pop up a window and do it

ive tried window.opener but it just freezes the parent page because i assume its trying to assign values when the code is still running in the background

so ive tried this

function writeIt()
{
var newWindow;
var urlstring = 'testpop.htm';
var myWindow = window.open(urlstring,'','height=200,width=280,toolbar=no,minimize=no,status=no,memubar=no,location=no,scrollbars=no');
myvar=document.myform.fa.value;

document.write(myvar);
}

(on this page is a text field called fa in a form called myform)

the testpop.htm code is like this

function retVals()
{
window.opener.document.myform.fa.value=document.form1.tfa.value;
}

and is ran when the user submits the form.

This doesnt work though as i say the main page just freezes.

Any ideas?
0
Comment
Question by:harveyball
  • 5
  • 2
8 Comments
 
LVL 16

Expert Comment

by:ellandrd
ID: 12142024
the popup window contains a form & I want to pass back the form data to a javascript function in the parent window right?


well use

<input type="button" onClick="opener.functionName(this.form.myField.value)" VALUE="Send">
0
 

Author Comment

by:harveyball
ID: 12142080
yes but the pop up is called from the function

sooooo

function blah()
{
open the window

get the vars

write the vars
}

will not work because the function will not wait for you to get the vars

this works however


function blah()
{
open the window

alert(blah)
get the vars

write the vars
}

so you have to type the details into the pop up window hit the submit on the popup, then hit the alert button on the main window

but that looks messy, i want a way of passing the variables back from the pop up window from within the function call

i thought about a while loop to wait until the pop up was closed but a. that would be a silly loop and b. while(!window.opener.closed) didnt do anything
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 12142293
right ok, give me a few mins as im trying to figure out a way to solve your problem...

your solution is kinda working, but want to make a few changes before i post it! ok?

sean
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 12142319
do you want the popup window to open as soon as the parent window is opened on runtime or do you want the user to click a button to open the popup window??
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 9

Accepted Solution

by:
riyasjef earned 125 total points
ID: 12142643
Hi

put thes fn in ur parent window

function display()
{

var myvar=document.myform.fa.value;
document.write(myvar);

}

function writeIt()
{
var newWindow;
var urlstring = 'testpop.htm';
var myWindow = window.open(urlstring,'','height=200,width=280,toolbar=no,minimize=no,status=no,memubar=no,location=no,scrollbars=no');
}


and change the fn in popup as

function retVals()
{
window.opener.document.myform.fa.value=document.form1.tfa.value;
window.opener.display();
}



0
 
LVL 16

Expert Comment

by:ellandrd
ID: 12142781
<###### HTML code for main.html ######>

<html>
<head>
<script language="javascript">
<!--
var ls_value = 0;
function call() {
      newWin =window.open("childwnd.html", 'TheNewWin', 'height=500, width=700, top=180, left=180,fullscreen=no, scrollbars=yes, resizable=yes, menubar=yes, toolbar=yes, location=yes, directories=yes, status=yes');
}

function getValue() {
      document.write("Value is : " + ls_value);
}
//-->
</script>
</head>
<body onload="call();">
<a href="#" onClick="getValue();">Value from pop window</a>
</body>
</html>


<###### HTML code for childwnd.html ######>
<html>
<head>
<script language="javascript">
<!--
function call_return() {
      //var ls_text = document.frm_child.text1.value
      var ls_text = document.frm_child.t1.value;


      self.opener.ls_value = ls_text
      self.close();
}
//-->
</script>
</head>
<body>
<form name ="frm_child">
<input type="text" name="t1" size="20">
<input type="button" value="Submit" name="btn1" onClick ="call_return();">
</body>
</form>
</html>

should work now

any problems post them back

regards
 
-sean-
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 12144082
UPDATE ON ABOVE CODE!

i made it work better as i found a different way to solve your prob and this is works better...

try this...


<###### HTML code for main.html ######>
<html>
<head>
<script language="javascript">
<!--
function call() {
      newWin =window.open("childwnd.html", 'TheNewWin', 'height=500, width=700, top=180, left=180,fullscreen=no, scrollbars=yes, resizable=yes, menubar=yes, toolbar=yes, location=yes, directories=yes, status=yes');
      document.forms.val.value = "";
}
//-->
</script>
</head>
<body onload="call();">
<form name="forms">
 <input type="text" name="val" value="">
</form>
</body>
</html>


<###### HTML code for childwnd.html ######>
<html>
<head>
<script language="javascript">
<!--
function call_return() {
      var ls_text = document.frm_child.t1.value;
      self.opener.forms.val.value = ls_text
      self.close();
}
//-->
</script>
</head>
<body>
<form name ="frm_child">
<input type="text" name="t1" size="20">
<input type="button" value="OK" name="btn1" onClick ="call_return();">
</body>
</form>
</html>

Now when "main.html" is loaded at runtime, a popup window opens with a simple form on it as you require.

the user adds info and clicks OK.  the popup closes, and the input box on the parent window "main.html" receives the info from the pop up window form which you wanted...

hope your happy with my work?!

Sean

0
 

Author Comment

by:harveyball
ID: 12164681
Thanks for the code sean, but the other way of calling a function from the other form was the easier option but i do appreciate your help.
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now