Reload a field without reloading the whole page

utahfriend · 02-04-2006, 02:25 AM

I have written a program where you click on an icon next to a field and a new window opens with a list to choose from. When you click on an item, the new window closes and the information about the item is stored in a variable. Is it possible to make it so when the new window closes, the field in the original page changes with the new information without reloading the whole page. If I reload the whole page, all the other items that were changed without being saved is lost!

Here is a snipit of the code:

PHP Code:


			
<tr> 

      <td width="100%" bgcolor="#FFFFFF"> 

      <div align="left"> 

        <table border="0" cellpadding="5" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="99%" id="AutoNumber3"> 

          <tr> 

            <td width="17%"> 

            <p align="right"><font face="Verdana" size="2">Choose Logo 1:</font></td> 

            <td width="76%"><font face="Verdana"> 

            <input name=logo_1 size="72" value="<?PHP echo $logo ?>"</font></td> 

            <td width="7%"> 



<a href="select_image.php"> <img border="0" src="http://store.globalmarketingplus.com/images/ig_treeFolder.gif" width="16" height="20"></a> 



            

          </tr>

***bpat1434*** · 02-04-2006, 12:37 PM

Javascript and the whole parent.form.fieldname="someval" might work... not sure though....
Here you go...

utahfriend · 02-04-2006, 02:20 PM

That works fantastic if I use a submit button. I am building a page with images that thier url is stored in a database. I have the images load on a page using the database and I want to be able to click an image and put the url in the field in the parent. I worked the code you sent, but I can't make it so when I click the image the Script works. Can you see what I am doing wrong?

Code:

<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript"><!--
function updateParent() {
    opener.document.parentForm.pf1.value = document.childForm.cf1.value;
    opener.document.parentForm.pf2.value = document.childForm.cf2.value;
    self.close();
    return false;
}
//--></SCRIPT>
</HEAD>
<BODY>
<?php
include "g/global/database.php";

?>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber28">
      


<FORM NAME="childForm" onClick="return updateParent();">
<?php
$middle = "<tr>";
$sql = mysql_query("SELECT * FROM web_images WHERE `user_id` = '14'" );
while($row = mysql_fetch_array($sql)){
  foreach($row AS $key => $val){
    $$key = stripslashes($val);
  }
  $middle = $middle . "<td width=\"20%\" align=\"center\"><input border=\"0\" src=\"$image_url\" name=\"cf1\"  . $size .  type=\"image\" size=\"20\"></td>";
}
	
$middle = $middle . "<td width=\"20%\" align=\"center\"><input border=\"0\" src=\"$image_url\" name=\"cf1\"  . $size .  type=\"image\" size=\"20\"></td>";
$middle = $middle . "</tr>";	
?> 
<tr>
<?PHP echo $middle; ?>
</tr>
</FORM>
</table>
</BODY>
</HTML>

***bpat1434*** · 02-04-2006, 02:48 PM

Use an Image button for submission....

***bpat1434*** · 02-04-2006, 06:05 PM

In response to your PMs, this code works for me:

page1.html

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> page1 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script language="JavaScript">
<!--
function openChild(file,window){
	childWindow=open(file,window,'resizable=no, width=200,height=400');
	if(childWindow.opener==null) childWindow.opener=self;
}
-->
</script>
<BODY>
<form name="myForm1">
	<input type="image" src="edit_button.jpg" width="32" height="32" onClick="openChild('page2.html', 'myChild')"> Edit/Update<br>
	<b>Name:</b> <input type="text" name="p_name" disabled><br>
	<b>Phone:</b> <input type="text" name="p_phone">
</form>
</BODY>
</HTML>

page2.html

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> myChild Page </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<script language="JavaScript">
<!--
function updateParent(){
	opener.document.myForm1.p_name.value=document.myChildForm.c_name.value;
	opener.document.myForm1.p_phone.value=document.myChildForm.c_phone.value;
	self.close();
	return false;
}
-->
</script>
<BODY>
<form name="myChildForm" onSubmit="return updateParent();">
	Name: <input type="text" name="c_name"><br>
	Phone: <input type="text" name="c_phone"><br>
	<input type="submit" value="Update">
</form>
</BODY>
</HTML>

Notice I do use an image-button, and you need to specify the "onClick" action....