Setting variable from image select array, send to PHP

Question

I am using the code below for users to select a thumbnail from a PHP array of images in a form. I am trying to figure out a way so that when the user submits the form this is on, which ever image is displayed currently will be passed through the form to the PHP Post. I'm not sure how to do this. Logically think of it as, if image[1] is active, I want to send that url to the form. Currently, the PHP var $knoteImgs[] are full tags, if I need to put the img tag in the JS it may be cleaner to obtain the 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>

Edit: if anyone could even link me to some relevant posts that would be useful. In not sure what to search for.

Edited my original post to show working code: Thanks to @GaryHayes and @Brad for the assistance!

<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); is triggered by:

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

You realize that the argument to the callback function in addEventListener is the event, not a gallery ? — adeneo
– adeneo, Commented Mar 23, 2014 at 3:04
Careful... you're not escaping data for use in JavaScript properly. Try var image = <?php json_encode($knoteImgs); ?>; instead. — Brad
– Brad, Commented Mar 23, 2014 at 3:14
@adeneo I'm not sure I follow 100%. I have a link to toggle forward and backward through the images. — dcclassics
– dcclassics, Commented Mar 23, 2014 at 3:37
Place a hidden input field in your form and apply image info to it on submit button press, just before processing. It works nicely, I do it all the time. — Gary Hayes
– Gary Hayes, Commented Mar 23, 2014 at 15:10
@GaryHayes this is what I'm trying to do. I can work out the hidden input, but I'm not sure how to pass the info from JS as to which image is currently displayed? — dcclassics
– dcclassics, Commented Mar 23, 2014 at 15:14

Gary Hayes · Accepted Answer · 2014-03-23 15:20:00Z

1

Your HTML in form:

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

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

Your Function in Javascript:

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

SOmething like this... sorry if not perfect... not testing live.

answered Mar 23, 2014 at 15:20

Gary Hayes

1,7881 gold badge15 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dcclassics Over a year ago

This is working for me, I will likely use this as answer. Just a note, I tried to bind the onclick="getimage();" to my "Previous" and "Next" buttons on the image gallery, so that when you click them it will just update the variable, but that is not a good solution, because it returns the current value, rather than the one that will load when clicked. Thanks for the solution :)

Collectives™ on Stack Overflow

Setting variable from image select array, send to PHP

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related