SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    two-state button to replace checkbox

    How would one go about replacing a check box with a two-state button?

    -berzerko

  2. #2
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean replacing a checkbox with a radio button?
    Wavelan

  3. #3
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, a button, that when it is shown depressed it is selected.
    and when shown not depressed is unselected.

    Thus, the button itself would operate as the checkbox.

    This of course would use two button graphics.

    -berzerko

  4. #4
    SitePoint Addict
    Join Date
    May 2000
    Posts
    313
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this:
    <HTML>
    <HEAD>
    <TITLE>Change Button</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    count=1
    function change_but()
    {
    if(count==0)
    {
    count++
    document.img1.src="0.gif"
    }
    else
    {
    count=0
    document.img1.src="1.gif"
    }

    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <A HREF="javascript:change_but()"><IMG NAME="img1" SRC="0.gif" BORDER="0"></A>
    </BODY>
    </HTML>

  5. #5
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes like that.

    2nd question: How do I attach an input to a form using that button?
    My inputs have values similar to: name="gid[]" value="$gid5"

    -berzerko

  6. #6
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have been trying,(unsuccessfully), to use a hidden input instead of a checkbox, then have the hidden input relay the selected value on submit.

    A few things that I have noticed;
    1)the values in my input code are never really replaced
    2)the button does not changes,and my inputcode doesn't work .
    3)the button only change when I make the var input line unfunctional

    Question: Is there a way to have javascript actually replace items in the code, or beter yet lines of code?

    Here is the code that I have so far.

    PHP Code:
    <HEAD>
    <
    TITLE>Change Button6</TITLE>
    <
    SCRIPT LANGUAGE="JavaScript">
    count=1
    function change_but()
    {
        var 
    image document.getElementsByTagName("IMG");
        var 
    input document.getElementsByTagName("INPUT");
        var 
    inid input.id()
        {
            if(
    count==0)
            {
                
    count++
                
    image.AA.src="../../../Documents/Sites/Summerfield.com/Assets/blu1.jpg";            
                    
    AB.value="10000"            
            
    }
            else
            {
                
    count=0
                image
    .AA.src="../../../Documents/Sites/Summerfield.com/Assets/red1i.jpg";            
                 
    AB.value="3"            
            
    }
        }
    }
    </SCRIPT>
    </HEAD>
    <BODY>

    <A HREF="javascript:change_but()" ><img id="AA" name="img1" SRC="../../../Documents/Sites/Summerfield.com/Assets/blu1.jpg" BORDER="0"><INPUT id="AB" TYPE=HIDDEN value="500" NAME="gid[]" ></A>
    </BODY>

    </HTML> 
    Also, the code, (as I have it) will require a similar piece of code for every button.

    -berzerko

  7. #7
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I think I'm about to make your life easy. If you can grasp how th initialization works here, then you're set. I made the input's of type TEXT here so both I and you could see what's happening.
    Code:
    <html>
    <head>
    <title>!! TEST !!</title>
    
    <style type="text/css">
    
    form#myForm img {
        cursor: pointer;
        }
    
    </style>
    
    <script type="text/javascript">
    
    function Button( imgId, checkedSrc, elemId, checkedVal, uncheckedVal )
    {
        this.img         = document.images[imgId];
        this.img.onclick = buttonClick;
        this.uSrc        = this.img.src;
        this.cSrc        = checkedSrc;
        this.elem        = document.forms['myForm'].elements[elemId];
        this.cVal        = checkedVal;
        this.uVal        = uncheckedVal;
        this.checked     = false;
    }
    
    Button.prototype.click = function()
    {
        if ( this.checked )
        {
            this.img.src    = this.uSrc;
            this.elem.value = this.uVal;
            this.checked    = false;
        }
        else
        {
            this.img.src    = this.cSrc;
            this.elem.value = this.cVal;
            this.checked    = true;
        }
    }
    
    function initButtons()
    {
        window.imgs =
        {
            AA: new Button( 'AA', '../../../Documents/Sites/Summerfield.com/Assets/red1.jpg', 'AB', 3, 10000 ),
            BA: new Button( 'BA', '../../../Documents/Sites/Summerfield.com/Assets/red2.jpg', 'BB', 4, 11000 ),
            CA: new Button( 'CA', '../../../Documents/Sites/Summerfield.com/Assets/red3.jpg', 'CB', 5, 12000 )
        };
    }
    
    function buttonClick()
    {
        window.imgs[this.id].click();
    }
    
    
    </script>
    
    </head>
    
    <body onload="initButtons()">
    
    <form id="myForm">
    
    <img id="AA" name="img1" src="../../../Documents/Sites/Summerfield.com/Assets/blu1.jpg" border="0">
    <input id="AB" type="text" value="500" name="gid[]">
    <br />
    <img id="BA" name="img2" src="../../../Documents/Sites/Summerfield.com/Assets/blu2.jpg" border="0">
    <input id="BB" type="text" value="600" name="gid[]">
    <br />
    <img id="CA" name="img3" src="../../../Documents/Sites/Summerfield.com/Assets/blu3.jpg" border="0">
    <input id="CB" type="text" value="700" name="gid[]">
    
    </form>
    
    </body>
    </html>
    Last edited by beetle; Jan 16, 2003 at 12:31.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  8. #8
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Beetle,

    I am having difficulty making this work. It won't change the button or value for me (when clicked.)

    -berzerko

  9. #9
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the best I have sofar:

    Code:
    function change_but()
    
    	{
    		if(count==0)
    		{
    			count++
    			document.AA.src="../Assets/blu1.jpg";
    			document.forms['myForm'].elements['AB'].value="";
    		}
    		else
    		{
    			count=0
    			document.AA.src="../Assets/red1i.jpg";
    			document.forms['myForm'].elements['AB'].value="3";
    		}
    	}
    
    
    </script>
    </head>
    
    <body>
    
    <form id="myForm">
    
    <a href="javascript:change_but()"><img name=gid[] id="AA" src="../Assets/blu1.jpg"><input id="AB" TYPE="text" name="gid[]" VALUE="">1<BR></a>
    
    </form>
    This will change the value and the button image on the same click.

    How would I generalize this code to work for a large list of buttons and inputs?

    -berzerko

  10. #10
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, so you cut'n'pasted all the code I gave and it doesn't work? Works like a charm for me!
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  11. #11
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by beetle
    Okay, so you cut'n'pasted all the code I gave and it doesn't work? Works like a charm for me!
    That was my main question. So the code does work then.
    I have noticed that in the past these post page's will occasionaly change the code that is pasted into it. Could that have happened? If it did could you email me a copy of the script?

    -berzerko
    sail@icehouse.net

  12. #12
    SitePoint Addict
    Join Date
    Nov 2002
    Posts
    218
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by berzerko
    That was my main question. So the code does work then.
    I have noticed that in the past these post page's will occasionaly change the code that is pasted into it. Could that have happened? If it did could you email me a copy of the script?

    -berzerko
    sail@icehouse.net
    HOLD ON BEETLE!!! I just re-copied and pasted your code and it works like a charm.

    my first copy must have a gremlin hidden in it somewhere

    thanks plenty for your help

    -berzerko


Bookmarks

Posting Permissions

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