Selecting elements in a div and send data to database - php

Question

i have the following form which populates a div element, more specifically a Bootstrap's modal form by a user's twitter's followers profile image.
This is the form : http://d.pr/i/ZJMk
This is the code that does the work.
<div class="modal-body">
<?php
$follower_url = "http://api.twitter.com/1/statuses/followers/Mozammil_K.xml";
$twFriends = curl_init();
curl_setopt($twFriends, CURLOPT_URL, $follower_url);
curl_setopt($twFriends, CURLOPT_RETURNTRANSFER, TRUE);
$twiFriends = curl_exec($twFriends);
$response = new SimpleXMLElement($twiFriends);
foreach($response->user as $friends){
$thumb = $friends->profile_image_url;
$url = $friends->screen_name;
$name = $friends->name;
?>
<a title="<?php echo $url;?>" href="#"><img class="photo-img" src="<?php echo $thumb?>" border="2" alt="" width="40" onClick="highlight(this)" /></a>
<?php
}
?>
</div>
I want to give the user's the option to click on the photos and selecting the elements. They can also click on the photos again and deselect it. This has been achieved by the following javascript.
<script>
function highlight(elem) {
if(elem.style.border == '2px solid blue') {
elem.style.border = '';
}
else{
elem.style.border = '2px solid blue';
}
}
</script>
On clicking the create button, the form should get the title of the highlighted elements and send the elements' title to the database. I have not found any way of doing this besides saving elements into an array and send data through JSON. I am not really familiar with JSON. Is there any other way (simpler) to do it? Perhaps JQuery?
Regards.

Answer 1

I think this would be the solution for your problem,
I added these three attribute to <a class='a-img'> tag
"rel=<?echo $thumb?>"
"id=<?echo $name?>"
"title=<? echo $url;?>" //these will be the diffrent attr to be send on the database
and these 3 attribute must be pass to a hidden input if you click the "a.a-img"
must add 3 hidden fields:
<input type="hidden" id="sname"/>
<input type="hidden" id="fname"/>
<input type="hidden" id="thumb"/>
<a title="<?php echo $url;? class='a-img'>" href="#">
<img class="photo-img" src="<?php echo $thumb?>" border="2" alt="" width="40"
onClick="highlight(this)" /></a>
$(document).ready(function(){
$("#create").click(function(){
//get the value of the 3 hidden fields
var sname = $("#sname").val(sname);
var fname = $("#fname").val(fname);
var thumb = $("#thumb").val(thumb);
$.ajax({
type:"POST",
url:"//your savetodb.php"
data:{'sname':sname, 'fname':fname, 'thumb':thumb},
success: function(data){
//do success message
}
});
});
$("a.a-img").click(function(){
var sname = $(this).attt('title');
var fname = $(this).attr('id');
var thumb = $(this).attr('rel');
//these 3 attrbute will pass to a hidden input
$("#sname").val(sname);
$("#fname").val(fname);
$("#thumb").val(thumb);
});
});
Hope this will help you.