将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”）。我在这方面是空白的。

如何添加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'];

这很好，谢谢！ – 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'); 
}

答

试试这个

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

将JS/css信息传递给表单的最佳方法

相关推荐