Selecting attendance

[davy_yg]

Hello,

I am looking for Javascript codes where you can move the list of data in left side to the right side. For example:

Attendance:

John Albert
Albert Victory
Kim >> James
Kayla
Victory
James

Out of the 6 people only 3 students attend the class. All the registered students are on the left box whereas the total attendance are on the right box (the admin can choose the attendance by selecting the student names and clicking the arrow to copy the name to the right box.

I would like to be able to create something like that with Javascript (someone told me that I have to use Javascript to do this), yet I do not know how to do it.

Can anyone help me to do this?

Is there any free script of the finished work or tutorial on how to do this?

Thanks in advance.

[JorgeM]

That kind of boxes (elements)? Are these divs, or textareas?

Yes, with Javascript, or better jQuery, it can be done. I suppose that each item in this list could be assigned its own unique ID and class. With a click event on the class, you can use jQuery to delete the item from that parent element, then append it to the other box (element).

[JJenZz]

Something like this? http://jsbin.com/sisahoji/1/edit

(function($) {
  var selector = '.attendance',
      $students = $(selector + '__students'),
      $attended = $(selector + '__attended');

  function init() {
    $(document).on('click', selector + '__student', toggleAttendance);  
  }

  function toggleAttendance() {
    var $student = $(this),
        isSelected = !!$student.closest($attended).length;
    $student.appendTo(isSelected ? $students : $attended);
  }

  $(init);
}(jQuery));

Or if you need to be able to submit their selection via a form, then this is probably more like what you'd need: http://jsbin.com/sisahoji/2/edit

[davy_yg]

Hello,

I try to copy your code to my localhost and I wonder why my javascript doesn't seem to work.

I copy the code exactly like it is. I already check the link and even try to unite the js with the php file.

I only see the good php view but unable to move the students to the right side.

[davy_yg]

Hello @JJenZz,

I have tried to reaccess your link file, it seems now it turns into chaos. Can you repost it. I still wonder why my js doesn't work in my localhost, I already copy it exactly the same like what you posted.

All, is there another option to do this?

If I have to search google for it, I do not know the correct key words for it.

Thanks before.

[iamthwee]

http://jsfiddle.net/bdMAF/38/