Setting a form value from QueryUI draggable - php

Question

I'm trying to set a form value when mulitple draggable objects are dropped onto a form. Once all the draggables have been dropped, I want to press the submit for a PHP code to do some processing with the form values.
I just can't get the drop event to set the form value????
Here's the JqueryUI stuff..
$(function() {
$( ".player" ).draggable({ revert: "invalid" });
$( ".position" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept:".player",
drop: function( event, ui ) {
var playerid = ui.draggable.attr("id");
var target = $(this).attr("id");
alert(playerid); //this works - got the right draggable id
alert(target); //this works - got the right droppable id
//!!!! THIS DOESN'T SET IT!!!!!
$('#resultform').attr('#target','playerid');
}
});
});
Here is the HTML
<div id="result_space">
<div id="player_list" class="player_list">
<p>This is the player space </p>
<div id="pos_1" class="player">
<p>Player 1</p>
</div>
<div id="pos_2" class="player">
<p>Player 2 </p>
</div>
</div>
<div id="pitch">
<form id="resultform" name="resultform" action="results_submit.php" method="post">
<table background="../_images/5_results/pitch_v2.jpg" width="560" border="1px">
<tr height="30"> <td colspan="4" align="center" style="color: #FFFF00; font-size: 24px;">stowupland falcons fc</td></tr>
<tr height="80" valign="bottom"><td colspan="4" align="center"><div class="position" id="goalie"> <input type="text" name="goalie" id="goalie" value="Player 1" /></div></td></tr>
<tr height="110" align="center" valign="middle">
<td width="25%"><div id="defence1"><input class="position" type="text" name="r_def_1" id="r_def_1" value="player 2" /></div></td>
<td width="25%"><div class="position" id="defence2"><input type="hidden" name="r_def_2" id="r_def_2" value="player 3" /></div></td>
</table>
<input name="submit" type="submit" id="submit" value="Submit" />
</form>
</div>
</div>
So as an example, I want to drag Player 1 (pos_1) to Defence 1 and make the form value r_def_1 = pos_1.

Answer 1

I made a few tweaks to get this to work:
I updated the HTML to make the tds droppable. This seems to work a little bit better. I also changed the colspan attribute of the tds appropriately.
Updated HTML:
<div id="result_space">
<div id="player_list" class="player_list">
<p>This is the player space </p>
<div id="pos_1" class="player">
<p>Player 1</p>
</div>
<div id="pos_2" class="player">
<p>Player 2 </p>
</div>
</div>
<div id="pitch">
<form id="resultform" name="resultform" action="results_submit.php" method="post">
<table background="../_images/5_results/pitch_v2.jpg" width="560" border="1px">
<tbody>
<tr height="30">
<td colspan="2" align="center" style="color: #FFFF00; font-size: 24px;" class="">stowupland falcons fc</td>
</tr>
<tr height="80" valign="bottom">
<td colspan="2" align="center" class="position">
<div class="" id="goalie">
<input type="hidden" name="goalie" id="goalie" value="Player 1" />
</div>
</td>
</tr>
<tr height="110" align="center" valign="middle">
<td class="position">
<div id="defence1">
<input class="" type="hidden" name="r_def_1" id="r_def_1" value="player 2" />
</div>
</td>
<td class="position">
<div class="" id="defence2">
<input type="hidden" name="r_def_2" id="r_def_2" value="player 3" />
</div>
</td>
</tr>
</tbody>
</table>
<input name="submit" type="submit" id="submit" value="Submit" />
</form>
</div>
</div>
JavaScript:
$(function() {
$(".player").draggable({
revert: "invalid"
});
$(".position").droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept: ".player",
drop: function(event, ui) {
var playerid = ui.draggable.attr("id");
$("input", this).val(playerid);
}
});
});​
The key is this line:
$("input", this).val(playerid);
which finds the input inside of the droppable td.
CSS (with draggable its useful to limit the width of draggable items):
​.player { width: 75px; }​
Example: http://jsfiddle.net/z8pWN/