Re-styling a form with jQuery? - php

Question

I have this script set up that echoes all relevant users in a database to a page with check-boxes beside them. You can make a group out of these users in the database by checking some of the boxes and submitting the form. This all works great.
Unfortunately our designer doesn't like this. What she wants is basically a list of six empty fields on the left of the screen. Then, when you click a plus button next to a person's name on the right of the screen, that name appears in the first empty field...and so on with each subsequent plus button that's clicked.
So instead of re-coding all this (it's really not an option) I think I can just 're-style' all this with jQuery. I can style the check-boxes so they look like a plus when they're not selected and a minus when they are selected.
Then I just need to have some sort of event so that when when the check box is clicked, the person's name is taken and inserted into the first empty box. It's all just smoke and mirrors. The empty box could just be a div with a border. Functionally, it will all work the same as before.
Can anyone confirm if this is feasible? My JS knowledge sucks and I'm not sure where to begin. Plus I already have the following jQuery validator function on the page and I don't want this new JS to interfere with it:
$(document).ready(function(){
$("#myform").validate({
debug: false,
rules: {
group: {required: true},
},
messages: {
group: {required: " Field required.", loginRegex: " Invalid character."},
},
submitHandler: function(form) {
$('input[type=submit]').attr('disabled', 'disabled');
$('#results').html('Loading...');
$.post('process_group.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
I suppose what I'm requesting is advice on how to code a check box to insert it's value into some div when it's checked. And to remove that value when it's unchecked.

Answer 1

If I understand you correctly, you need to do the following things with JQuery:
1)Replace your checkboxes () generated by server side code with clickable +/- signs.
You can do this by finding the checkboxes and replacing their default stage with an empty link that has a background image of a +.
$('checkbox').remove().html('Some Name');
Instead of an inline style you should make the plus and minus sign background images CSS classes if you know how.
2)You want to change the + to a - when it is clicked, and 3) have the user's name next to the + sign appear someplace else (in an empty input box?)
To toggle the background image, just change the style (or class if you know how to make the image a CSS class) when clicked. Then take the contents and put it in your target element.
This jsFiddle might help to illustrate what I'm describing above: http://jsfiddle.net/Ap2yW/1/