將JS/css信息傳遞給表單的最佳方法

我相信這很容易，我只是一個巨大的新手。我在PHP頁面上有一個表單，它有幾個常規表單元素（1個文本區域，1個文本字段）。將JS/css信息傳遞給表單的最佳方法

我也動態地添加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」）。我在這方面是空白的。

來源

2012-03-18 Cocorico

如何添加100張圖片？ – Starx 2012-03-18 07:00:40

您需要爲這些圖像添加帶有某種標識符的隱藏輸入，並根據選擇的圖像切換這些輸入的狀態。事情是這樣的：

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'];

來源

2012-03-18 06:27:53 DCoder

這很好，謝謝！ – Cocorico 2012-03-18 19:14:59

添加一個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'); 
}

來源

2012-03-18 06:32:41 Philip

試試這個

PHP：爲朋友添加ID到HTML你有

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

JS：創建一個空數組。使用每個函數將選定的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!'); }); 
    }); 
});

來源

2012-03-18 07:23:53 codaniel

將JS/css信息傳遞給表單的最佳方法

回答

相關問題