Passing Values from Popup Form to Main Form

chrislopezz · 03-07-2005, 09:11 AM

Hello,

Ive found this forum very interesting and helpful thanx to the enthusiastic people out here helping each other in resolving coding obstacles. Well i have come across one problem and any inputs from your end would be appreciated.

I have a Form (something like creating a New Task or Email) which the user needs to enter details in. Now one of the feature i want to have in this form is a File Attachments Feature where-in users can attach a file to the Task/Email and submit the attached file-names to the DB. Ive taken care of the DB submission, File Upload part but came to an obstace where-in -- when the user is entering data into the main form, he should be able to click an "Attach File" button which opens up a File Upload feature where-in he uploads his File Attachments and those file names are passed into a textbox of the Main form (preceding form). Basically this is a Passing Values from Popup Window to Main Window scenario.

Im not proficient in JavaScript hence would appreciate some code examples or ideas throwing light on this.

Thanx in advance for your help !!!

Chris.

sde · 03-07-2005, 09:42 AM

hi, welcome to the site

the code below will send text from child to parent in i.e., .. but you'de probably have to do a little more research to find out how it would work for firefox. i don't have that answer off the top of my head.

parent.html

HTML Code:

<html>
<head>
<title>Parent</title>
<script language="JavaScript">
<!--
var win = null;

function pop(width,height,resize) {
  win = window.open('child.html', 'childwin', 'width='+width+',height='+height+',toolbar=0,scrollbars='+resize+',resizable='+resize+',location=0,statusbar=0,menubar=0');
  win.focus();
  return false;
}
-->
</script>
</head>
<body>
<form name="f" method=post action="child.html" onsubmit="return send();">
<input type="text" name="parentfield">
<br>
<a href=# onclick="return pop(640,480,'no');">Open Child</a>
</form>

</body>
</html>

child.html

HTML Code:

<html>
<head>
<title>Child</title>
<script language="JavaScript">
<!--
function send(){
  var v = document.f.childfield.value;
  window.opener.f.parentfield.value=v;
  return true;
}
-->
</script>
</head>
<body>
<form name="f" method="post" action="#"  onsubmit="send();javascript:window.close();">
<input type="text" name="childfield"> <input type="submit" name="submit" value="Send and Close">
</form>

</body>
</html>

idx · 03-07-2005, 06:22 PM

Perhaps I'm misreading the question [skimmed it], but I don't believe you can modify a file upload box with javascript. If so then what's stopping the site from uploading _any_ file on your PC?

You can certainly do this for any other form element, but for file uploads I've always had to use the standard.

Code:

<input type="file" name="foo">

Note, the form must POST and must contain enctype="multipart/form-data" in the form definition.

-r

chrislopezz · 03-08-2005, 12:17 AM

Hi guys

Thanx for the replies ... will test and let you know how it went today.

Rgds
Chris,

BCN · 03-27-2005, 08:09 PM

Hello,

in the child.html part of the send text from child to parent form info, how would you create a list of checkboxes or radio buttons to allow for mulitple options?

I tried this;
<input type="checkbox" name="childfield" value="A">
Option 1<br>
<input type="checkbox" name="childfield" value="B">
Option 2<br>

but it seems more than one option won't propogate to the parent form.
Rgds,
Dave

sde · 03-28-2005, 11:41 AM

first off, check boxes allow for multiple selections. are you sure you want to be using multiple checkboxes here? if so, then your programming logic is going to have to support checking if each one is selected, so it would make sense to give all your checkboxes different names, and a value of 0 or 1.

i re-created the examples to demonstrate the use of check boxes and radio buttons. keep in mind that this ONLY works on IE. =/ .. i haven't spent enough time with javascript to figure out how to make this work across non IE browsers.

parent.html

HTML Code:

<html>
<head>
<title>Parent</title>
<script language="JavaScript">
<!--
var win = null;

function pop(width,height,resize) {
  win = window.open('child.html', 'childwin', 'width='+width+',height='+height+',toolbar=0,scrollbars='+resize+',resizable='+resize+',location=0,statusbar=0,menubar=0');
  win.focus();
  return false;
}
-->
</script>
</head>
<body>
<form name="f" method="post" action="child.html" onsubmit="return send();">
Checkbox 1 value: <input type="text" name="checkbox1"><br>
Checkbox 2 value: <input type="text" name="checkbox2"><br>
Radio value: <input type="text" name="radio_option"><br>
Text Field value: <input type="text" name="parentfield"><br>
<a href=# onclick="return pop(640,480,'no');">Open Child</a>
</form>

</body>
</html>

child.html

HTML Code:

<html>
<head>
<title>Child</title>
<script language="JavaScript">
<!--
function send(form){
  // set text field
  window.opener.f.parentfield.value=form.childfield.value;
  // set check box 1
  window.opener.f.checkbox1.value=form.checkbox1.value;
  // set check box 2
  window.opener.f.checkbox2.value = form.checkbox2.value;
  
  // loop through radio group to see which one is checked
  for (x = 0; x < form.radio_option.length; x++){
    if(form.radio_option[x].checked == true)
      // set radio option from the selected button
      window.opener.f.radio_option.value = form.radio_option[x].value;
  } 

  window.close();
  return true;
}
-->
</script>
</head>
<body>
<form name="f" method="post" action="#"  onsubmit="send(this);">

<b>Check Boxes</b><br>
<input type="checkbox" name="checkbox1" value="1">Option 1<br>
<input type="checkbox" name="checkbox2" value="1">Option 2<br><br>

<b>Radio Boxes</b><br>
<input type="radio" name="radio_option" value="this is the first option">Option 1<br>
<input type="radio" name="radio_option" value="this is the second option">Option 2<br><br>

<b>Text Field</b><br>
<input type="text" name="childfield"> <input type="submit" name="submit" value="Send and Close">
</form>

</body>
</html>

hope that helps.

sde · 03-28-2005, 11:42 AM

p.s. .. keep in mind that this forum is breaking up the word 'value' in my code example .. just fix them and it should work fine.

DJMaze · 03-28-2005, 12:45 PM

Quote:

Originally Posted by chrislopezz

Now one of the feature i want to have in this form is a File Attachments Feature where-in users can attach a file to the Task/Email and submit the attached file-names to the DB. Ive taken care of the DB submission, File Upload part but came to an obstace where-in -- when the user is entering data into the main form, he should be able to click an "Attach File" button which opens up a File Upload feature where-in he uploads his File Attachments and those file names are passed into a textbox of the Main form (preceding form). Basically this is a Passing Values from Popup Window to Main Window scenario.

Everyone talked about a "1 step" popup where the onsubmit="send(this);" sends the data to the main window.

However with file uploads it doesn't work that way.
The popup should verify the upload and on success it should return a page which contains javascript that gets executed immediatly to the 'opener'

PHP Code:


			
<html><head><title>File upload</title>

<php

if (isset($_FILES['upload'])) {

  // do upload checking and the uploaded file

?>

<script language="javascript" type="text/javascript"><!--

opener.document.forms['f'].elements['file_path'].value = '<?php echo $file_name; ?>';

//--></script>

</head>

<body>

File upload succeeded<br />

The file is stored at http://something.com/<?php echo $file_name; ?>

<?php

} else {

  // show file upload form

?>

</head>

<body>

<form>bla di bla</form>

<?php

}

?>

</body></html>