Jump to content



Photo

Icons/Colors After Checkbox/Option I Choosen


  • Please log in to reply
8 replies to this topic

#1 Antonio Conte

Antonio Conte

    Advanced Member

  • Members
  • PipPipPip
  • 1,059 posts
  • LocationOslo, Norway

Posted 11 July 2011 - 11:04 PM

Hey everyone

First off; I have NO knowlage of Ajax. I do not intend to learn it as this point neither. I'm working of saving huge amount of football statistics, but I still need the powers of Ajax!

I hope you will let this one slide. ;)

I'm displaying information about the players this way:

<div style="width: 100%; float: left;">
	<p><input type="checkbox" name="player[0][id]" value="1" />Gianluigi Buffon</p>
	<input type="text" name="player[0][time]" value="" />
	<select name="player[0][sub]">
		<option value="0">Full match</option>
		<option value="1">Subbed Inn</option>
		<option value="2">Subbed Out</option>
	</select>
</div>

<div style="width: 100%; float: left;">
	<p><input type="checkbox" name="player[1][id]" value="13" />Alexander Manninger</p>
	<input type="text" name="player[1][time]" value="" />
	<select name="player[1][sub]">
		<option value="0">Full match</option>
		<option value="1">Subbed Inn</option>
		<option value="2">Subbed Out</option>
	</select>
</div>

.........

.........


What I want to achive:
- Every clicked checkbox gets a BLUE icon to the right
- Players subbed inn gets a GREEN icon to the right
- Players subbed out gets a RED icon to the right.

Something like this:

Posted Image

Is this possible with Ajax? Anyone willing to help a forum member in need out with this? :)
  • 0

#2 Larry

Larry

    Administrator/Writer

  • Administrators
  • 3,845 posts
  • LocationState College, PA (USA)

Posted 20 July 2011 - 3:41 PM

I admire your honesty in saying you're not even trying to learn Ajax, but as you can tell, that has an impact in terms of responses. I definitely appreciate the help you've offered others here, but you're going to have to do some work on this one (i.e., be willing to learn some things in the process). What you'd do is a combination of Ajax to update the database on the server and DOM manipulation to make icons appear and disappear as needed. I personally find jQuery the easiest and most reliable way to do Ajax and DOM manipulation these days.
  • 0

#3 HartleySan

HartleySan

    Advanced Member

  • Members
  • PipPipPip
  • 2,892 posts
  • LocationColumbus, OH USA

Posted 25 July 2011 - 3:34 AM

Actually, Antonio, unless I am misunderstanding something, I don't think you need Ajax for this at all. Naturally, you will have to use JavaScript/jQuery, but if that's acceptable, I think you can do what you want to do very easily. How does that sound?
  • 0

#4 Antonio Conte

Antonio Conte

    Advanced Member

  • Members
  • PipPipPip
  • 1,059 posts
  • LocationOslo, Norway

Posted 25 July 2011 - 8:09 AM

Very good. The technique really does not matter as long as it works.
  • 0

#5 HartleySan

HartleySan

    Advanced Member

  • Members
  • PipPipPip
  • 2,892 posts
  • LocationColumbus, OH USA

Posted 26 July 2011 - 12:32 AM

I made a basic script for handling the checkboxes. Naturally, the styles and all that would have to be changed to adapt to your site, but the JavaScript is pretty universal.

<!DOCTYPE html>

<html lang="en">
  
  <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <title>JS checkboxes</title>
    
    <style type="text/css">
      
      div {
        
        clear: left;
        
      }
      
      p {
        
        float: left;
        
        margin: 10px 40px 10px 10px;
        
      }
      
      .blueBox {
        
        background: blue;
        
        height: 20px;
        
        width: 20px;
        
      }
      
    </style>
    
  </head>
  
  <body>
    
    <form method="#" action="#">
      
      <div>
        
        <p><input type="checkbox" id="one">Football Player #1</p>
        
        <p id="boxone"></p>
        
      </div>
      
      <div>
        
        <p><input type="checkbox" id="two">Football Player #2</p>
        
        <p id="boxtwo"></p>
        
      </div>
      
      <div>
        
        <p><input type="checkbox" id="three">Football Player #3</p>
        
        <p id="boxthree"></p>
        
      </div>
      
      <div>
        
        <p><input type="checkbox" id="four">Football Player #4</p>
        
        <p id="boxfour"></p>
        
      </div>
      
    </form>
    
    <script>
      
      var init, formElemsLen, i, blueBox;
      
      window.onload = init;
      
      function init() {
        
        formElemsLen = document.forms[0].elements.length;
        
        for (i = 0; i < formElemsLen; i += 1) {
          
          if (document.forms[0].elements[i].type === 'checkbox') {
            
            document.forms[0].elements[i].onclick = blueBox;
            
          }
          
        }
        
      }
      
      function blueBox() {
        
        if (this.checked === true) {
          
          document.getElementById('box' + this.getAttribute('id')).className = 'blueBox';
          
        } else {
          
          document.getElementById('box' + this.getAttribute('id')).className = '';
          
        }
        
      }
      
    </script>
    
  </body>
  
</html>

A very similar style would be used for the green and red boxes as well. You'd have to set an onchange event to the select elements, and check the value selected every time a select element is changed. If it's changed to the value you want, then you'd display the appropriate colored box. Of course, graphics, etc. can also be used. I just demonstrated with CSS-generated boxes, because it's the quickest.

Is that the answer you were looking for?
  • 1

#6 Antonio Conte

Antonio Conte

    Advanced Member

  • Members
  • PipPipPip
  • 1,059 posts
  • LocationOslo, Norway

Posted 26 July 2011 - 7:13 AM

Yes. Just by adding some style like background: url(); this is absolutly perfect. :D

*Adding to toolbox*
  • 0

#7 HartleySan

HartleySan

    Advanced Member

  • Members
  • PipPipPip
  • 2,892 posts
  • LocationColumbus, OH USA

Posted 26 July 2011 - 9:12 AM

Cool.
  • 0

#8 Antonio Conte

Antonio Conte

    Advanced Member

  • Members
  • PipPipPip
  • 1,059 posts
  • LocationOslo, Norway

Posted 4 September 2011 - 4:52 AM

Thanks again, Jon. I've now implemented it in some of my scripts. It's REALLY a time saver for us. :)
  • 0

#9 HartleySan

HartleySan

    Advanced Member

  • Members
  • PipPipPip
  • 2,892 posts
  • LocationColumbus, OH USA

Posted 4 September 2011 - 7:06 AM

Cool. As long as I'm able to provide some assistance, I'm happy. Thanks for letting me know.
  • 1