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.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need Messy dense input help

    I have posted this request in a couple of places, and gotten CLOSE to a solution, but nothing has really worked yet.

    I need to replicate the input method of a Paper form. If you look at the attached Gif of one sub-section of one page, with a few clicks and a few circles I can select a LOT of Info. I need to replicate the option of circling things. Trying to do this with pull down boxes, radio buttons or anything else just doesn't work. One place tried to do it with radio boxes and took 5 screens to do one sub-section. I need to present 5-8 sections like this one one 10" tablet page.

    I need a JavaScript that will let me select multiple items one one line. (like the second example)

    Note: I don't need to do anything with their selection, the printed page -IS- the final product. So I don't need to upload it or create a Excel file, just print the completed page.
    Attached Thumbnails Attached Thumbnails Need Messy dense input help-section-23.gif   Need Messy dense input help-multi.gif  

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,026
    Thanks
    23
    Thanked 588 Times in 587 Posts
    Quote Originally Posted by rsisson View Post
    I need to replicate the option of circling things. Trying to do this with pull down boxes, radio buttons or anything else just doesn't work.
    Really can't understand why a javascript solution does not work. Also understand that if you have to circle the words a little more programming is needed, but here's a quick js method to bring things to your attention. A second click on the box will put things back to normal.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
    function colo(type){
    		var condition = document.getElementById(type).style.color;
    		if(condition != "red"){
    		document.getElementById(type).style.color = "red";
    		document.getElementById(type).style.backgroundColor = "black";
    	}else{
    		document.getElementById(type).style.color = "black";
    		document.getElementById(type).style.backgroundColor = "";
    	}
    }
    </script>
    </head>
    <body>
    <label id="pipe1" for="pipe2">Copper</label><input type="checkbox" id="pipe1" onchange="colo('pipe1');">/
    <label id="pipe2" for="pipe2">Galvanized</label><input type="checkbox" id="pipe2" onchange="colo('pipe2');">/
    <label id="pipe3" for="pipe3">Plastic</label><input type="checkbox" id="pipe3" onchange="colo('pipe3');">/
    <label id="pipe4" for="pipe3">Lead</label><input type="checkbox" id="pipe4" onchange="colo('pipe4');">
    </body>
    </html>
    Evolution - The non-random survival of random variants.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    That answer is actually a bit of overkill. Plus it contains illegal HTML: The same id is used more than once.

    Also, I know you don't want a checkbox per name. So keep it much simpler:
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <span onclick="colo(this);">Copper</span> |
    <span onclick="colo(this);">Galvanized</span> |
    <span onclick="colo(this);">Plastic</span> |
    <span onclick="colo(this);">Lead</span>
    
    <script type="text/javascript">
    function colo(span)
    {
        if ( this.style.color == "red" )
        {
            this.style.color = "black";
            this.style.backgroundColor = "transparent";
        } else {
            this.style.color = "red";
            this.style.backgroundColor = "black";
        }
    }
    </script>
    
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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