单击页面元素并将其用作表单数据

Question

我正在制作一个有照片页面的网站。在照片页面上，我想有专辑和单张照片。我还希望用户能够创建一个新专辑，只需单击我的“+创建专辑”按钮，然后只需单击他们想要存储在该专辑中的图像。我不确定我需要知道怎么做。我知道如何创建一个表单，这基本上是我需要的，并使用php将数据存储在我的数据库中以创建相册，但我不知道该怎么做的是用户从我的表单中输入的值只需单击相册中所需的图像即可。这是一个插图，带有步骤。

Answer 1

基本上回答关于“如何将图像中的用户定义值转换为表单”的问题，您可以使用：

样本

http://jsfiddle.net/insertusernamehere/DdNZz/

的JavaScript

$(document).ready(function () {

    // add event handler to the image
    $('#image').click( function(event) {

        // put value into the input field
        $('#input').val( $(this).data('myvalue') );
    });
});

HTML

<img id="image" src="http://lorempixel.com/output/nightlife-q-c-200-200-4.jpg" data-myvalue="image one clicked" alt="">
<input type="text" id="input" value="">

使用data-* - 属性可以指定自己的值，并且是完全有效的HTML5，而较旧的浏览器也可以毫无问题地处理它。

但是关于你的想法还有很多想法，我不确定，这对于问答安排是否会有很大的影响。

Answer 2

<img class="click-the-picture" src="photo1.jpg">
<img class="click-the-picture" src="photo2.jpg">
<img class="click-the-picture" src="photo3.jpg">

<form id="theform">
<button>Save</button>
</form>

<script>
$(function(){
   $('.click-the-picture').live('click',function(){
       $('#theform').append('<input type="hidden" name="photo[]" value="' + $(this).attr('src') + '"');
   });
});
</script>

您可以尝试使用此代码为每个图片点击生成隐藏的输入，然后将其发送到数据库