Question

I have a script that generates multiple images from a external site using jQuery. I am attempting to add functionality to select multiple images and submit them to a php script to archive the URLs.

My current iteration of the site is able to highlight all of the images without issue. However I am stumped as to how to use all highlighted images in a post to my php script. I added id= and data-value= to the imgsrc line and that is properly generating the img src lines with that code with unique id values.

The image generation code is as follows:

$('#images').append("<img id='" + id + "' src='http://example.com/" + id +
  "s.png' height='110' width='110' data-value='" + id + 
  "' onclick='clickpick(this)' />");

The onclick function is allowing me to highlight the clicked images with the following code:

function clickpick(item) {
    if (item.style.borderWidth == '5px') {
        item.style.border = '';
    } else {
        item.style.border = '5px solid blue';
    }
}

The end result is I would like to have a drop down box on the page which will select a group and any highlighted images will be posted to a php script as referenced by that group selection.

Any help or tips would be greatly appreciated.

Answer 1

I suggest you use jQuery and webservices.

I have made an example for you, you can find it on http://jsfiddle.net/c685V/

What I did is push the highlighted images in an array. Then with ajax, I call my webservice (webservices.php/mywebservice) which is accepting a string as a parameter.
The parameter is a JSON string, and I parse the array to a JSON string with the JSON.stringify command.

$.ajax({
    type: "POST",
    url: "webservices.php/mywebservice",
    data: "{'images':'" + JSON.stringify(arr) + "'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        if (msg.d === "OK") {
            //do something
        }
    },
    fail: function (msg) {
        document.location = "/errorPage.php";
    }
});

I am not a PHP coder, but you can find examples on Google how to make a webservie and deserialize a JSON string back into an array.