Antonio Conte Posted July 12, 2011 Share Posted July 12, 2011 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: Is this possible with Ajax? Anyone willing to help a forum member in need out with this? Link to comment Share on other sites More sharing options...
Larry Posted July 20, 2011 Share Posted July 20, 2011 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. Link to comment Share on other sites More sharing options...
HartleySan Posted July 25, 2011 Share Posted July 25, 2011 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? Link to comment Share on other sites More sharing options...
Antonio Conte Posted July 25, 2011 Author Share Posted July 25, 2011 Very good. The technique really does not matter as long as it works. Link to comment Share on other sites More sharing options...
HartleySan Posted July 26, 2011 Share Posted July 26, 2011 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 Link to comment Share on other sites More sharing options...
Antonio Conte Posted July 26, 2011 Author Share Posted July 26, 2011 Yes. Just by adding some style like background: url(); this is absolutly perfect. *Adding to toolbox* Link to comment Share on other sites More sharing options...
HartleySan Posted July 26, 2011 Share Posted July 26, 2011 Cool. Link to comment Share on other sites More sharing options...
Antonio Conte Posted September 4, 2011 Author Share Posted September 4, 2011 Thanks again, Jon. I've now implemented it in some of my scripts. It's REALLY a time saver for us. Link to comment Share on other sites More sharing options...
HartleySan Posted September 4, 2011 Share Posted September 4, 2011 Cool. As long as I'm able to provide some assistance, I'm happy. Thanks for letting me know. 1 Link to comment Share on other sites More sharing options...
Recommended Posts