PDA

Click to See Complete Forum and Search --> : 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:



<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... (http://www.rgagnon.com/jsdetails/js-0066.html)
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?

<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
<!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
<!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....