I'm implementing a virtual tour application, and want to add ajax functionality to the tour build process.
I have a number of mini-forms on the page, the number of which is determined by the count of images in a specified directory.
So the page currently looks like
---------------------------------------------------
| | Location
| | Latitude
| Thumb | Longitude --------
| | | Save |
|-------------- --------
|
---------------------------------------------------
---------------------------------------------------
| | Location
| | Latitude
| Thumb | Longitude --------
| | | Save |
|-------------- --------
|
---------------------------------------------------
---------------------------------------------------
| | Location
| | Latitude
| Thumb | Longitude --------
| | | Save |
|-------------- --------
|
---------------------------------------------------
and goes on for n number of images.
What I'd like to do is have the save button execute an ajax function to save the information without refreshing the page. My issue has to do with the button IDs. As the form is rendered via PHP echo statements in a loop, I can add the loop number to the button ID, but how can I use said ID in a jquery function?
Specifically,
$("#save").click(function(){
//ajax POST code goes here
});
won't work when the #save
has a number added to the end.
What other options do I have to implement ajax functionality to these forms?