Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
Antonio Conte

Icons/Colors After Checkbox/Option I Choosen

Recommended Posts

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:

926097.jpeg

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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?

  • Upvote 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×