デモ: http://jsfiddle.net/mjmitche/sTzCS/39/
このフォームの中に順序付けられていないリストがあります。jquery の sortable() 関数をリストに追加したので、ユーザーはフォーム要素を上下に移動して、チームが終了する順序を示すことができます。以下の jquery は、ユーザーが配置した順序を決定します。リスト要素ごとに入力フィールドを作成して、ユーザーが各チームが獲得するポイント数を入力できるようにします。
たとえば、ユーザーが Winnipeg をリストの一番上に移動し、入力フィールドに値 95 を入力するとします。したがって、ウィニペグが 1 位になり、95 ポイントで終了します (ユーザーのチーム順位の予測によると)。
私の質問は、フォーム要素がチームに関連付けられるような方法で、各フォーム要素の入力値にアクセスするにはどうすればよいかということです。たとえば、Winnipeg が最初に配置された場合、以下のコードに従ってresult[0]
、配列の でアクセスできます。ただし、入力値は配列の一部ではないと思うので、それらにアクセスする方法がわかりません。
を使用して最初のチームにアクセスできました が、入力値が子要素のように見えattribute.first
てもポイントを取得できませんでした。attribute.first.child
最終的には、各チームをその位置番号 (ソート位置によって決定される) とポイント (ユーザーの手動入力によって決定される) とともにデータベースに保存できるようにしたいと考えています。
html
<form<form id="new_entry">
<ul id="sortlist">
<li id="Vancouver">Canucks<input type="text" name="name" id="vanpoints"></li>
<li id="Toronto">Toronto<input type="text" name="name" id="torontopoints"></li>
<li id="Montreal">Montreal<input type="text" name="name" id="montrealpoints"></li>
<li id="Ottawa">Ottawa<input type="text" name="name" id="ottawapoints"></li>
<li id="Calgary">Calgary<input type="text" name="name" id="calgarypoints"></li>
<li id="Edmonton">Edmonton<input type="text" name="name" id="edmontonpoints"></li>
<li id="Winnipeg">Winnipeg<input type="text" name="name" id="winnipegpoints"></li>
</ul>
<input type="submit" value="Add">
</form>
コード
$("#sortlist").sortable({
stop: function(event, ui) {
result = $("#sortlist").sortable("toArray");
var attributes;
attributes = {
first: result[0],
second: result[1],
third: result[2],
fourth: result[3],
fifth: result[4],
six: result[5],
seventh: result[6]
};
alert(attributes.first.child);
}
});