フォームにJS/CSS情報を渡す最も良い方法

Question

私はこれがとても簡単で、私はちょうど巨大なnoobだと確信しています。私はPHPページ上にフォームを持っており、いくつかの通常のフォーム要素（1テキストエリア、1テキストフィールド）を持っています。

私も動的にランダムである、ページに100枚の小さな画像を追加していて、私は誰かがこれらの画像を選択または選択解除できるようにするjQueryのを使用しています

：ここ

は、画像を表示するために100回ループhtmlです：

<div class='avatar'><img class='avatar_image' src='$this_profile_image' name='$thisfriend'></div> 

、ここではjQueryのです：私は何をしたいか

<script type="text/javascript"> 
$(document).ready(function() { 
     $(".avatar_image").click(function() { 
       $(this).toggleClass("red"); 
     }); 
}); 
</script> 

は、フォームが送信されたときに、それを処理するスクリプトのことができるようにしている、ありますそれらの100個の画像のどれが選択されているかを教えてください（クラスは "avatar_image"ではなく "red"になります）。私はこれを空白にしています。

Answer 1

画像に何らかの種類の識別子を含む隠し入力を追加し、選択した画像に基づいて入力の状態を切り替える必要があります。このような何か：

Change your image markup: 
<div class='avatar'> 
    <img class='avatar_image' src='$this_profile_image' name='$thisfriend'> 
    <input type="hidden" name="avatar_image[]" value="$this_profile_image" disabled="disabled" /> 
</div> 

---

Change jQuery binding (and use event delegation, maybe pick a better container than document.body): 
<script type="text/javascript"> 
$(function() { 
     var selClass = 'red'; 
     $(document.body).on('click', ".avatar_image", function() { 
       var $this = $(this); 
       var $inp = $this.siblings('input[type="hidden"]'); 
       var isSelected = $this.hasClass(selClass), willBeSelected = !isSelected; 
       $this.toggleClass(selClass); 
       if(willBeSelected) { 
        $inp.removeAttr('disabled'); 
       } else { 
        $inp.attr('disabled', 'disabled'); 
       } 
     }); 
}); 
</script> 

---

Read the submitted data in PHP (assuming you're submitting via a POST form): 
$selectedImages = $_POST['avatar_image']; 

Answer 2

そのクリックされたグラブID、各画像にIDを追加して、隠されたテキストフィールド

<input type="hidden" name="avatar" id="avatar" value="" /> 


$(".avatar_image").click(function() { 

    $(this).toggleClass("red"); 

    //assign its id to the hidden field value 
    $("input[name='avatar']").attr('value', $(this).attr('id')); 

    // pass that to your DB 
}); 

に注入

私はこのデータを取得するためにあなたのajaxを使用すると推定します

success : function(callback){ 
    $("image[id*='"+callback.avatar+"']").addClass('red'); 
} 

Answer 3

この

PHP試してください：あなたは

<div class='avatar'> 
    <img class='avatar_image' src='$this_profile_image' name='$thisfriend' data-id='$thisFriendsId> 
</div> 

JSを持っていたHTMLに友人のためにIDを追加します。空の配列を作成します。各機能を使用して、選択したIDを配列にプッシュスルーします。その後、あなたのPHPに提出するために投稿を使用してください。

selected = []; 
$(function(){ 
    $(".avatar_image").click(function() { 
     $(this).toggleClass("red"); 
    }); 
    $('.submit').click(function(){ 
     $('.red').each(function(){ 
      var selectedId = $(this).data('id'); 
      selected.push(selectedId);  
     }); 
    $.post ('http://mysite.com/process.php', selected, function() { alert('succes!'); }); 
    }); 
​});​