i using image picker http://rvera.github.io/image-picker/ . with multiple selected image ,i want to send output data from javascript data to php form submit, sample code here
HTML/JS
<div role="group" aria-label="Image Option Buttons">
<div class="btn-group">
<a href="#" id="toggleAll" data-toggle="" aria-pressed="false" autocomplete="off"> Select All</a>
</div>
</div>
<select multiple='multiple' class='image-picker show-labels show-html hide' name='imageList'>
<option data-img-src="http://placekitten.com/220/200" name="satu" value="satu">Cute Kitten 1</option>
<option data-img-src="http://placekitten.com/180/200" value="dua">Cute Kitten 2</option>
<option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>
<option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>
</select>
<form method="post" name="myform" action="save.php">
<input type="hidden" name="data" value="">
<input type="submit" name="send" value="submit" onclick="imgg()" />
</form>
<script type="text/javascript">
$(".image-picker").imagepicker({
});
function imgg() {
$("*[multiple=multiple]").find("option:selected").each(function(index, item) {
var src = $(item).attr("data-img-src");
document.myform.data.value = src;
document.forms["myform"].submit();
console.log(src);
});
$('#toggleAll').on('click', function() {
// click event listener
if ($(this).attr('aria-pressed') == 'false') {
//checks if toggled on or off, any other property can be used
$('.image-picker').find($('option')).prop("selected", "selected");
//looks for the image picker option list and sets everything to selected
$('.image-picker').data('picker').sync_picker_with_select();
//now triggers the sync function to reinitialise all of the selected images.
$('.image-picker').find($('option')).prop("selected", "selected").each(function(index, item) {
$("submit").click(function() {
var src = $(item).attr("data-img-src");
document.myform.data.value = src;
document.forms["myform"].submit();
console.log(src);
});
});
} else {
//does the exact opposite of above.
$('.image-picker').find($('option')).prop("selected", false);
$('.image-picker').data('picker').sync_picker_with_select();
console.log($(item).attr("data-img-src"));
$('.image-picker').find($('option')).prop("selected", "selected").each(function(index, item) {
});
}
});
}
</script>
PHP
if (isset($_POST['data'])) {
$names = $_POST['data'];
print_r ($names) ;
}
but this only show one value like
http://placekitten.com/270/200
i tested and see console.log output, it work show array like
http://placekitten.com/220/200
http://placekitten.com/180/200
http://placekitten.com/130/200
http://placekitten.com/270/200
but not for save.php
