单击页面元素并将它们用作表单数据[关闭]答案

【问题标题】：Clicking page elements and using them as form data [closed]单击页面元素并将它们用作表单数据[关闭]
【发布时间】：2012-07-19 01:14:54
【问题描述】：

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

【问题讨论】：

你需要处理 Javascript 和 AJAX 请求..
您是否使用单个页面来完成所有这些操作？
我可以用两个来做，我认为它会最小化 javascript

标签： php javascript jquery mysql html

【解决方案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-*-attribute 可以让您指定自己的值，并且是完全有效的 HTML5，而旧版浏览器也可以毫无问题地处理。

但是关于你的想法还有很多需要考虑，我不确定这对于 SO 的问答来说是否太多了。

【讨论】：

这个问题对于 SO Q&A 来说太宽泛了。
为什么我被投了反对票？这个答案有什么问题？
即使问题过于宽泛，这是否意味着答案应该被否决？没想到……

【解决方案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>

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

【讨论】：