...

View Full Version : popup value to clicked form field



oztinks
08-14-2004, 10:15 AM
My form uses dropdown lists to select colors, I am trying to change this to a popup color editor instead but can't figure out how to make the function that returns the color value work for all my form fields. The color editor will need to be called about 30 times

ColorEditor.html uses a submit button with this function


if (window.opener)
window.opener.setColor(curcol);

but I don't know how to make the value of setColor be applied to the form field that was clicked to open the window?



<form>
<table border=2 cellpadding=10><tr><td id="blah">
Color: <input type=text id="one" onClick="window.open('ColorEditor.html','Color','height=350,width=390,dependent=yes,directories=no,location=n o,menubar=no,resizable=yes,scrollbars=no,status=no,toolbar=no')" onChange="oldColor=this.value;setColor(this.value);">

</td><td id="blab">
Color: <input type=text id="two" onClick="window.open('ColorEditor.html','Color','height=350,width=390,dependent=yes,directories=no,location=n o,menubar=no,resizable=yes,scrollbars=no,status=no,toolbar=no')" onblur="addCSSRule('#blab', 'background-color:'+this.value)" >

</td></tr></table></form>
<script>

var oldColor;
function setColor(a) {
document.getElementById("one").value=a;
document.getElementById("two").value=a;
oldColor=a;
}
</script>

Sabina

Mr J
08-14-2004, 12:44 PM
Lets see if I understand this?

You click a text box which opens a popup that has a colour editor in it.

You then select a colour in the popup which should then change the textbox to that colour

Yes?

oztinks
08-15-2004, 12:13 AM
Yep, thats exactly what should happen.
But I can't figure out how to pass the textbox id to the function, I think that is what I need to do??

Sabina

Mr J
08-15-2004, 09:26 AM
Please try the following.
If you'd like to see a bit more information on transferring data see
www.huntingground.freeserve.co.uk/scripts/passdata/p_data1.htm


Page1.htm

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script>
<!--

function test(d){
data=d
newWin=open("page2.htm?"+data,'mywin','width=200,height=200,top=200,left=250' );
newWin.focus()
}

// -->
</script>

</HEAD>
<BODY>
<form name="f1">
<input type="text" name="t1" value="" onclick="test(this.name)">
<input type="text" name="t2" value="" onclick="test(this.name)">
<input type="text" name="t3" value="" onclick="test(this.name)">
<input type="text" name="t4" value="" onclick="test(this.name)">
<form>
</BODY>
</HTML>

Page2.htm

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script>
<!--
var dataPassed = '';
if (location.search.length > 0)
data = unescape(location.search.substring(1));
document.write(dataPassed);

function colours(col){
opener.document.forms["f1"].elements[data].style.backgroundColor=col
}

// -->
</script>
</HEAD>
<BODY>
<a href="#null" onclick="colours('#00ff00')">Green</a><BR>
<a href="#null" onclick="colours('#ffff00')">Yellow</a><BR>
<a href="#null" onclick="colours('#ff0000')">Red</a><BR>
<a href="#null" onclick="colours('#0000ff')">Blue</a>
</BODY>
</HTML>

oztinks
08-16-2004, 03:39 AM
Thanks for that I will check out the link, your code makes it look nice and simple

Sabina

glenngv
08-16-2004, 04:34 AM
An alternative solution is to create a global variable that keeps track of the clicked text box.


var clickedField;
var oldColor;
function setColor(a) {
if (clickedField) {
clickedField.value=a;
oldColor=a;
}
}
...
<input type="text" id="two" onclick="clickedField=this; window.open('ColorEditor.html',...)" ... />

oztinks
08-18-2004, 05:38 AM
The global variable works great thanks Glengv

but I am still having a little trouble aplying the color to the page style

I have made a function that sets the variables for the element id and propery.
The style wont change if I use the variable for property?



var element_property;
var element_id;

function getstyle(eid,prop){
element_id=eid;
element_property=prop;
}
function setColor(a) {
if (clickedField) {
clickedField.value=a;
document.getElementById(element_id).element_property=a; //this doesn't work
document.getElementById(element_id).bgColor=a; //this works
oldColor=a;
}
}

<input type=text type="text" id="one" onClick="clickedField=this;getstyle('blah','bgColor');window.open('ColorEditor.html','Color','height=350,widt h=390,dependent=yes,directories=no,location=no,menubar=no,resizable=yes,scrollbars=no,status=no,tool bar=no')" onChange="oldColor=this.value;setColor(this.value);"
value="">

Thanks for your help

glenngv
08-18-2004, 11:20 AM
This should work:

document.getElementById(element_id).style[element_property]=a;

...

onClick="clickedField=this;getstyle('blah','background-color');

oztinks
08-19-2004, 11:31 AM
bummer, That one didn't work in firefox or IE

any other suggestions?

Thanks

Willy Duitt
08-19-2004, 12:06 PM
Try camelCase....

onClick="clickedField=this;getstyle('blah','backgroundColor');

.....Willy

glenngv
08-19-2004, 12:47 PM
Oopps! Got confused with CSS and Javascript. Must have done too much CSS lately. :D

oztinks
08-20-2004, 12:06 AM
thanks
I do a lot of CSS so it looked right to me :D

Sabina

oztinks
08-25-2004, 05:32 AM
Hi Guys,

My script has been going great until I ran into some classes instead of elements that need to be changed :(

I found a getElementsByClass script link on this forum but I am not sure how to use the array it returns :confused:

I have my code check if the variable element_id is a element id if it is the code executes fine if not I need it to find all classes element_id and change their style property


var element_property="backgroundColor";
var element_id="body";

function getElementsByClass( _class, el_id )
{
var parent, els, returnArr = new Array(), i = 0;
parent = (el_id) ? document.getElementById(el_id) : document;
els = parent.getElementsByTagName('*') || parent.all;
for (i; i < els.length; i++)
if (els[i].className == _class)
returnArr[returnArr.length] = els[i];
return returnArr;
}

function setColor(a) {


if (document.getElementById(element_id)!= 'undefined')
{
document.getElementById(element_id).style[element_property]=a;
}

else{
getElementsByClass( element_id, el_id );

}
oldColor=a;

}



Sabina

glenngv
08-25-2004, 06:14 AM
Do you mean the value of element_id variable which is "body" can be an id or class? If I'm right, then change the "else" block with this:


else{
var arr = getElementsByClass(element_id);
for (var i=0;i<arr.length;i++){
arr[i].style[element_property]=a;
}
}

oztinks
08-25-2004, 06:40 AM
Thanks for your help again glenngv using body as an id example is a bit confusing sorry but you are right in what I want to achieve.

Couldn't get the code to work if I change id="body" to class="body" the style doesn't work

Sabina

glenngv
08-25-2004, 07:34 AM
Does your CSS look like this?

.body {
background-color:white;
...
}

oztinks
08-25-2004, 08:21 AM
I didn't have a style block at all for the background color but adding it didn't make any difference

this is all of the test page


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>


<style type="text/css">
.body {
background-color:white;

}

</style>
</head>

<body>
<script language="JavaScript" type="text/javascript">
var element_property="backgroundColor";
var element_id="body";

function getElementsByClass( _class, el_id )
{
var parent, els, returnArr = new Array(), i = 0;
parent = (el_id) ? document.getElementById(el_id) : document;
els = parent.getElementsByTagName('*') || parent.all;
for (i; i < els.length; i++)
if (els[i].className == _class)
returnArr[returnArr.length] = els[i];
return returnArr;
}

function setColor(a)
{
if (document.getElementById(element_id)!= 'undefined')
{
document.getElementById(element_id).style[element_property]=a;
}

else
{
var arr = getElementsByClass(element_id);
for (var i=0;i<arr.length;i++)
{
arr[i].style[element_property]=a;
}
}
}

</script>
<a href="#" onClick="setColor('80FFFF');">click</a>
<div class="body" id="one" style="width: 100%; height: 100px;">stuff</div>
<div class="body" id="two" style="width: 100%; height: 100px;">more stuff</div>
</body>
</html>

Thanks for the quick reply no one is usually in "my" time zone :)

glenngv
08-25-2004, 10:21 AM
function setColor(a)
{
var elem = document.getElementById(element_id);
if (elem)
{
elem.style[element_property]=a;
}
else
{
var arr = getElementsByClass(element_id);
for (var i=0;i<arr.length;i++)
{
arr[i].style[element_property]=a;
}
}
}

oztinks
08-27-2004, 01:26 AM
Thanks Glenn,
Obviously much nicer than my messy code and got rid of the undefined error message :thumbsup:

I was wondering if you have any thoughts on a problem I have come across with another function on my form.
It adds a CSS rule to a page
My form has a couple of linked external style sheets that change depending one user input from a php form. Everything has been working fine till I added a background image selection and the only way the background image will work is if I put the contents of the external style sheets into a style block in the header of the page.

Not sure why the background image is being so quirky

this is the code



<script>

function addCSSRule (selectorText, declarations) {
var styleSheet;
if (document.styleSheets) {
if (document.styleSheets.length === 0) {
var styleElement;
if (document.createElement && (styleElement =
document.createElement('style'))) {
styleElement.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(styleElement);
styleSheet = styleElement.sheet;
}
}
if (document.styleSheets.length > 0) {
styleSheet = document.styleSheets[document.styleSheets.length - 1];
if (styleSheet.insertRule) {
styleSheet.insertRule(
selectorText + ' { ' + declarations + ' }',
styleSheet.cssRules.length
);
}
else if (styleSheet.addRule) {
styleSheet.addRule(selectorText, declarations);
}
}
}
}</script>

<p>Page Background image<select onchange="addCSSRule('body','background-image:url(images/'+this.options[this.selectedIndex].value+');')">
<option value=""></option>
<option value="blocks.gif">blocks.gif</option>
<option value="bottomleft.gif">bottomleft.gif</option>
<option value="green.png">green.png</option>
</select></p>


Thanks again for your help
Sabina



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum