从图像选择数组中设置变量，发送到 PHP

Question

我正在使用下面的代码让用户从表单中的 PHP 图像数组中选择缩略图。我试图找出一种方法，以便当用户提交此表单时，当前显示的图像将通过表单传递到 PHP Post。我不知道该怎么做。从逻辑上讲，如果 image[1] 处于活动状态，我想将该 url 发送到表单。目前，PHP var $knoteImgs[] 是完整的标签，如果我需要将 img 标签放在 JS 中，获取 URL 可能会更干净。

<script type="text/javascript">
var image = new Array(3)
image[1]="<? echo $knoteImgs[0]; ?>"
image[2]="<? echo $knoteImgs[1]; ?>"
image[3]="<? echo $knoteImgs[2]; ?>"
var num = 1;

document.getElementById('next').addEventListener('click', function(galleryNext){
num=num+1
if (num==4)
{num=1}
document.getElementById('knoteImg').src=image[num];
});

document.getElementById('back').addEventListener('click', function(galleryPrevious){
num=num-1
if (num==0)
{num=3}
document.getElementById('knoteImg').src=image[num];
});
</script>

编辑：如果有人甚至可以将我链接到一些有用的相关帖子。不知道要搜索什么。

编辑了我的原始帖子以显示工作代码： 感谢@GaryHayes 和@Brad 的帮助！

<script type="text/javascript">
var image = <?php echo json_encode($knoteImgs); ?>;

var tot = image.length;
var c = 0; // current image (array key index)

function loadImage(){
  $("<img/>").attr({src:image[c], id:"knoteImg", class:"img-thumbnail"}).load(function() {
      $('#thumbnail').html( this );
  }); 
}
loadImage(); // load 1 image

$('#prev, #next').click(function(){
  id= this.id==='next' ? c++ : c-- ;
  c= c==-1 ? tot-1 : c%tot ;
  loadImage(); 

});
function getimage() {
document.getElementById('currentimage').value = document.getElementById('knoteImg').src;
var thumbnail = document.getElementById('currentimage');
alert(thumbnail.value);
}
</script>

alert(thumbnail.value); 被触发：

<input type="hidden" id="currentimage" name="currentimage" />
  <input type="submit" onclick="getimage();" value="Submit" />

Answer 1

您的 HTML 格式：

  <input type="hidden" id="currentimage" name="currentimage" />

    <input type="submit" onclick="getimage();" value="Submit" />

您在 Javascript 中的函数：

function getimage() {
document.getElementById('currentimage').value = document.getElementById('knoteImg').src;
}

类似这样的东西...抱歉，如果不完美...不进行现场测试。