Forum Moderators: open
A/ I have a form in a window where user can tick few keywords related to the content of the pic they want to submit. I use array checkbox, e.g. <input type="checkbox" name="tick[]" value="keyword_A">Keyword_A
B/ At the end of the line, there is javascript link which say "MORE KEYWORDS..."
C/ This will open a new window with more keywords. I just want to return ticked keywords from the popup window to the main window using window.opener.document.getElementById('form').tick.value
D/ But I do not know how to add value to the checkbox array.
I spend my day on it and manage to do it using a text field (that is remove/adding ticked variable in a hidden text field using onchange) but it is not exactly what I want!
Any help is as usual highly appreciated
Thank you
Tomda
SO, I took my Javascript Bible and finally found a way of passing variable between the opener and popup windows using checkbox array.
Try it! It may be useful to some of you...
NONETHELESS, as expected, there are a small cross-browsing problems (in Netscape 6.2 and Opera 7). I am sure the problem is minor but can't find it :(
Any Javascript Gurus? Could one of you have a look and help me finding where the problem is?
FIRST FILE - TO BE SAVED AS LOAD_PIC.HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Send your pictures</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="robots" content="none">
<script type="text/javascript">
<!--
function openit(url) {
var largeur=720; var hauteur=550;
var gauche = (screen.width - largeur)/2;
window.open(url,"secondefenetre","width="+largeur+",height="+hauteur+",left="+gauche+",top="+0+",dependent=yes,resizable=1,scrollbars=1,toolbar=1") }
//-->
</script>
</head>
<body>
<form method="post" name="formfer" id="formfer" action="">
<input type="text" id="tags_array_mammals" name="tags_array_mammals" size="100" style="font-size:10px; border:1px solid #FFF;" readonly>
<p><b>CATEGORIES » Tick a category...</b></p>
<p>
<input type="checkbox" name="coche[]" value="mammals"><b><u>MAMMALS</u></b>
- Get <a href="javascript:openit('pop_pic.html')">more</a> keywords...
</p>
<p style="margin-left:43px; font-size:10px; font-weight:bold; color:#CC3300; background-color:#FFF; border-top:1px dotted #CCCC99; margin-top:2px;"><b>Ticked keywords:</b>
</p>
<div id="load_opener_mammals" style="margin-left:43px; padding-left:4px; font-size:10px; font-weight:bold; color:#336699; background-color:#FFF; border-bottom:1px dotted #CCCC99;"></div>
<p style="margin-left:43px;">
<input type="checkbox" name="coche[]" value="bovids_antelopes_gazelles_buffalo">Bovids (antelopes, gazelles & buffalo)
<input type="checkbox" name="coche[]" value="other_ungulates">Other ungulates
<input type="checkbox" name="coche[]" value="carnivores">Carnivores
<input type="checkbox" name="coche[]" value="primates">Primates
<input type="checkbox" name="coche[]" value="other_mammals">Other mammals
</p><br>
<input type="submit" name="send" value="OK! SEND THE PICTURE" class="form1 marg10">
</body></html>
SECOND FILE - TO BE SAVED AS POP_PIC.HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Tick more keywords</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript">
function Change(tags, tags2) {
// DECODE PHP-URL ENCODED TAGS2
var tags2 = decodeURI(tags2);
// REPLACE ALL "+" BY A WHITE SPACE
var regex1= /\+/gi
tags2 = tags2.replace(regex1, ' ');
// REPLACE ALL "&" BY "AND"
var regex2= /\%26amp%3B/gi
tags2 = tags2.replace(regex2, ' and ');
// REPLACE ALL "/" BY "/"
var regex3= /\%2F/gi
tags2 = tags2.replace(regex3, '/');
// REPLACE ALL "," BY ","
var regex4= /\%2C/gi
tags2 = tags2.replace(regex4, ', ');
// GET HTML.TEXT & FIELD.VALUES IN DOCUMENTS
var Value = opener.document.getElementById('load_opener_mammals').innerHTML;
var Value_array = opener.document.getElementById('tags_array_mammals').value;
var Value2 = document.getElementById('load_popup').innerHTML;
// CHECK IF TAGS.VALUE ALREADY EXIST
if(Value2.match(tags)) {
// YES -> DELETE VALUES
Value=Value.replace(''+tags2+' / ', ' ');
Value_array=Value_array.replace(''+tags+' ', '');
Value2=Value2.replace(''+tags+'', '');
opener.document.getElementById('load_opener_mammals').innerHTML = Value;
opener.document.getElementById('tags_array_mammals').value = Value_array;
document.getElementById('load_popup').innerHTML = Value2;
document.getElementById('load_popup2').innerHTML = Value;
} else {
// NO -> ADD VALUES
opener.document.getElementById('load_opener_mammals').innerHTML += ''+tags2+' / '
opener.document.getElementById('tags_array_mammals').value += ''+tags+' ';
document.getElementById('load_popup').innerHTML += ''+tags+' ';
document.getElementById('load_popup2').innerHTML += ''+tags2+' / ';
}
}
// RESET HTML.TEXT & FIELD.VALUE IN DOCUMENTS
function Reset_all() {
document.forms["ff"].reset();
opener.document.getElementById('load_opener_mammals').innerHTML = '';
opener.document.getElementById('tags_array_mammals').value = '';
document.getElementById('load_popup').innerHTML = '';
document.getElementById('load_popup2').innerHTML = '';}
// -->
</SCRIPT>
</head>
<body onload="Reset_all();">
<p><b>Ticked keywords are:</b> <sup><a href="javascript:Reset_all();">Reset ALL</a></sup></p>
<div id="load_popup2" style="margin-left:20px; font-size:12px; font-weight:bold; color:#FFF; background-color:#CCC; border:1px dotted #666;"></div>
<div id="load_popup" style="font-size:6px; color:#FFF;"></div>
<input type="button" name="view results" class="marg20 form3" value="OK! CLOSE" onclick="javascript:self.close();">
<hr>
<form id="ff">
<p><b><u>MAMMALS</u></b></p>
<!-- SUBCATEGORY 1 -->
<p style="margin-left:10px; color:#CC3300;">
<input type="checkbox" name="coche[]" value="bovids_antelopes_gazelles_buffalo" onclick="Change('bovids_antelopes_gazelles_buffalo','Bovids+%28antelopes%2C+gazelles+%26amp%3B+buffalo%29')"><b>BOVIDS (ANTELOPES, GAZELLES & BUFFALO)</b></p>
<p style="margin-left:30px;">
<input type="checkbox" name="coche[]" value="antelopes" onclick="Change('antelopes','Antelopes')"><b>ANTELOPES</b></p>
<p style="margin-left:60px; font-size:14px;">
<input type="checkbox" name="coche[]" value="roan_antelopes" onclick="Change('roan_antelopes','Antelope+%28roan%29')">Antelope (roan)
<input type="checkbox" name="coche[]" value="bush_bucks" onclick="Change('bush_bucks','Bushbuck')">Bushbuck
<input type="checkbox" name="coche[]" value="cattle_zebus_domesticated" onclick="Change('cattle_zebus_domesticated','Cattle+%28zebus+%26amp%3B+domesticated%29')">Cattle (zebus & cows)
<input type="checkbox" name="coche[]" value="duikers_common_bush" onclick="Change('duikers_common_bush','Duiker+%28common%2Fbush%29')">Duiker (common/bush)
<input type="checkbox" name="coche[]" value="hartebeests_coke_bubals" onclick="Change('hartebeests_coke_bubals','Hartebeest+%28Coke%27s%29')">Hartebeest (Coke's)
</p>
<p style="margin-left:30px;">
<input type="checkbox" name="coche[]" value="gazelles" onclick="Change('gazelles','Gazelles')"><b>GAZELLES</b></p>
<p style="margin-left:60px; font-size:14px;">
<input type="checkbox" name="coche[]" value="dik_diks_kirk" onclick="Change('dik_diks_kirk','Dik-dik+%28Kirk%27s%29')">Dik-dik (Kirk's)
<input type="checkbox" name="coche[]" value="harvey_duikers_red" onclick="Change('harvey_duikers_red','Duiker+%28Harvey%27s%2Fred%29')">Duiker (Harvey's/red)
</p>
<p style="margin-left:10px; color:#CC3300;">
<input type="checkbox" name="coche[]" value="other_ungulates" onclick="Change('other_ungulates','Other+ungulates')"><b>OTHER UNGULATES</b></p>
<p style="margin-left:30px;">
<input type="checkbox" name="coche[]" value="pig_like_ungulates" onclick="Change('pig_like_ungulates','Ungulates+%28pig-like%29')"><b>UNGULATES (PIG-LIKE)</b></p>
<p style="margin-left:60px; font-size:14px;">
<input type="checkbox" name="coche[]" value="hippopotamuses_rivers" onclick="Change('hippopotamuses_rivers','Hippopotamus+%28river%29')">Hippopotamus (river)
<input type="checkbox" name="coche[]" value="giant_forest_hogs" onclick="Change('giant_forest_hogs','Hog+%28giant+forest%29')">Hog (giant forest)
<input type="checkbox" name="coche[]" value="bush_pigs" onclick="Change('bush_pigs','Pig+%28bush%29')">Pig (bush)
<input type="checkbox" name="coche[]" value="warthogs_common" onclick="Change('warthogs_common','Warthog+%28common%29')">Warthog (common)
</p>
<p style="margin-left:30px;">
<input type="checkbox" name="coche[]" value="odd_toed_ungulates" onclick="Change('odd_toed_ungulates','Ungulates+%28odd-toed%29')"><b>UNGULATES (ODD-TOED)</b></p>
<p style="margin-left:60px; font-size:14px;">
<input type="checkbox" name="coche[]" value="rhinoceroses_black" onclick="Change('rhinoceroses_black','Rhinoceros+%28black%29')">Rhinoceros (black)
<input type="checkbox" name="coche[]" value="rhinoceroses_white" onclick="Change('rhinoceroses_white','Rhinoceros+%28white%29')">Rhinoceros (white)
<input type="checkbox" name="coche[]" value="zebras_grevy" onclick="Change('zebras_grevy','Zebra+%28Grevy%27s%29')">Zebra (Grevy's)
</p>
<p style="margin-left:30px;">
<input type="checkbox" name="coche[]" value="near_like_ungulates" onclick="Change('near_like_ungulates','Ungulates+%28near-like%29')"><b>UNGULATES (NEAR-LIKE)</b></p>
<p style="margin-left:60px; font-size:14px;">
<input type="checkbox" name="coche[]" value="elephants_bush_african" onclick="Change('elephants_bush_african','Elephant+%28African+bush%29')">Elephant (African bush)
<input type="checkbox" name="coche[]" value="hyraxes_rock" onclick="Change('hyraxes_rock','Hyrax+%28rock%29')">Hyrax (rock)
</p>
<p style="margin-left:30px;">
<input type="checkbox" name="coche[]" value="others_ungulates" onclick="Change('others_ungulates','Ungulates+%28other%29')"><b>UNGULATES (OTHER)</b></p>
<p style="margin-left:60px; font-size:14px;">
<input type="checkbox" name="coche[]" value="aardvaks_ant_bears" onclick="Change('aardvaks_ant_bears','Aardvak%2FAnt+bear')">Aardvak/Ant bear
<input type="checkbox" name="coche[]" value="giraffes_maasai" onclick="Change('giraffes_maasai','Giraffe+%28Masai%29')">Giraffe (Masai)
</p>
<!-- SUBCATEGORY 2 -->
<p style="margin-left:10px; color:#CC3300;">
<input type="checkbox" name="coche[]" value="carnivores" onclick="Change('carnivores','Carnivores')"><b>CARNIVORES</b></p>
<p style="margin-left:30px;">
<input type="checkbox" name="coche[]" value="dog_like_carnivores" onclick="Change('dog_like_carnivores','Dog-like+carnivores')"><b>DOG-LIKE CARNIVORES</b></p>
<p style="margin-left:60px; font-size:14px;">
<input type="checkbox" name="coche[]" value="dog_hunting" onclick="Change('dog_hunting','Dog+%28hunting%29')">Dog (hunting)
<input type="checkbox" name="coche[]" value="fox_bat_eared" onclick="Change('fox_bat_eared','Fox+%28bat-eared%29')">Fox (bat-eared)
<input type="checkbox" name="coche[]" value="jackals_common_golden" onclick="Change('jackals_common_golden','Jackal+%28common%2Fgolden%29')">Jackal (common/golden)
</p>
<p style="margin-left:30px;">
<input type="checkbox" name="coche[]" value="cat_like_carnivores" onclick="Change('cat_like_carnivores','Cat-like+carnivores')"><b>CAT-LIKE CARNIVORES</b></p>
<p style="margin-left:60px; font-size:14px;">
<input type="checkbox" name="coche[]" value="caracal_1" onclick="Change('caracal_1','Caracal')">Caracal
<input type="checkbox" name="coche[]" value="cheetah_1" onclick="Change('cheetah_1','Cheetah')">Cheetah
<input type="checkbox" name="coche[]" value="civets_african" onclick="Change('civets_african','Civet+%28African%29')">Civet (African)
</p>
</form>
</body></html>
