Лучший способ передать информацию о JS / CSS в форму

Question

Я уверен, что это так просто, и я просто огромный огромный нуб.У меня есть форма на странице PHP, и у нее есть несколько обычных элементов формы (1 текстовое поле, 1 текстовое поле).

Я также динамически добавляю на страницу 100 небольших изображений, которые являются случайными, и яЯ использую JQuery, чтобы позволить кому-то выбрать или отменить выбор этих изображений:

Вот HTML-код, который повторяется 100 раз для отображения изображений:

<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»),Я не обращаю на это внимания.

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

Попробуйте это

PHP: добавьте идентификатор друга в html, который у вас был

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

JS: создать пустой массив. Используйте каждую функцию для проталкивания выбранного идентификатора в ваш массив. Затем используйте сообщение для отправки на ваш 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!'); });
    });
​});​

Answer 3

Добавьте идентификатор к каждому изображению, когда его щелкнули, захватите идентификатор, а затем вставьте его в скрытое текстовое поле

<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');
}