Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    New Coder
    Join Date
    Sep 2002
    Location
    Australia
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts

    popup value to clicked form field

    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

    Code:
    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?


    Code:
    <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=no,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=no,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
    The problem is IE

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    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?

  • #3
    New Coder
    Join Date
    Sep 2002
    Location
    Australia
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    The problem is IE

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Please try the following.
    If you'd like to see a bit more information on transferring data see
    http://www.huntingground.freeserve.c...ta/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>
    Last edited by Mr J; 08-15-2004 at 09:51 AM.
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #5
    New Coder
    Join Date
    Sep 2002
    Location
    Australia
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for that I will check out the link, your code makes it look nice and simple

    Sabina
    The problem is IE

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    An alternative solution is to create a global variable that keeps track of the clicked text box.
    Code:
    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',...)" ... />

  • #7
    New Coder
    Join Date
    Sep 2002
    Location
    Australia
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

    Code:
    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,width=390,dependent=yes,directories=no,location=no,menubar=no,resizable=yes,scrollbars=no,status=no,toolbar=no')" onChange="oldColor=this.value;setColor(this.value);"
    value="">
    Thanks for your help
    The problem is IE

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    This should work:

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

    ...

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

  • #9
    New Coder
    Join Date
    Sep 2002
    Location
    Australia
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    bummer, That one didn't work in firefox or IE

    any other suggestions?

    Thanks
    The problem is IE

  • #10
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try camelCase....

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

    .....Willy

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Oopps! Got confused with CSS and Javascript. Must have done too much CSS lately.

  • #12
    New Coder
    Join Date
    Sep 2002
    Location
    Australia
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks
    I do a lot of CSS so it looked right to me

    Sabina
    The problem is IE

  • #13
    New Coder
    Join Date
    Sep 2002
    Location
    Australia
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    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
    Code:
    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
    The problem is IE

  • #14
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    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:
    Code:
    else{
       var arr = getElementsByClass(element_id);
       for (var i=0;i<arr.length;i++){
          arr[i].style[element_property]=a;
       }   
    }

  • #15
    New Coder
    Join Date
    Sep 2002
    Location
    Australia
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    The problem is IE


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •