UI Selectable et récupération de value

Bonjour a tous, j'ai un formulaire ou j'affiche des images.

J'utilise ui-selectable pour pouvoir sélectionner mes images et j'aimerai que quand je click sur un bouton submit je récupère le value d'un champ hidden qui est associé a chaque image.

J'essaye d'afficher le résultat de mon value dans une div mais c'est a chaque fois vide, j'ai regarder la doc, mais je crois que je m'y prend de la mauvaise manière, c'est mes début avec jquery... :?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 $(function(){
                $("form.item-forms-remove").submit(function ()
    		{ 
			$("#selectable").change(function () {
          var str = "";
          $("#selectable".selectable).each(function () {
                str += $("#pending_image_id").val() + " ";
              });
          $("div").text(str);
        })
        .trigger('change');
    		});
 
    });
 
 $(function() {
        $("#selectable").selectable();
    });

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<form class="item-forms-remove" action="{% url project.imag.views.edit_album data.id %}" method="post">
	{% csrf_token %}
        <input id="delete_selection" class="jq-button" type="submit" value="Supprimer les images s&eacute;lectionn&eacute;es" />
</form>
 
<div class="grid _edit_album">    
        <ol id="selectable">
        	{% for item in  items %}
        	<li>
            	    <img src="{% ids_images_prefix %}{% for thumb in  item.element_thumb %}{{thumb}}{% endfor %}" alt="{{ item.name }}" title="{{ item.name }}" />
                    <input type="hidden" id="pending_image_id" name="pending_image_id" value="{{ item.id }}" />
        	</li>
    		{% endfor %}
        </ol>
 
  <div> </div>
 
</div>

Merci d'avance pour votre aide !!! ;)