Tearing my hair out a little bit here! I'm trying to create multiple image-selection boxes so users can upload as many images as they like to the species profile they've created.
I'm using the following code in a .js file:
jQuery(document).ready(function() {
var i = 2;
jQuery('a#add_media').click(function() {
input_code = '<p>' +
'<input id="upload_image-' + i + '" type="text" size="36" name="upload_image" value="" />' +
'<input id="upload_image_button-' + i + '" type="button" value="Upload Image" />' +
'</p>';
jQuery(input_code).appendTo('#upload_wrapper');
i++;
});
jQuery('[id^="upload_image_button"]').click(function() {
str = jQuery(this).attr('id');
substring = str.substring(str.length, str.length - 1);
id_to_pass = 'upload_image-' + substring;
alert(id_to_pass);
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#' + id_to_pass).val(imgurl);
tb_remove();
}
});
If I then view the DOM using Firebug, I can see that my input boxes appear correctly:
<div id="upload_wrapper" style="margin:0; padding:0;">
<label>Attach Image</label>
<p>
<input id="upload_image-1" type="text" value="" name="upload_image" size="36">
<input id="upload_image_button-1" type="button" value="Upload Image">
<span>
</p>
<p>
<input id="upload_image-2" type="text" value="" name="upload_image" size="36">
<input id="upload_image_button-2" type="button" value="Upload Image">
</p>
<p>
<input id="upload_image-3" type="text" value="" name="upload_image" size="36">
<input id="upload_image_button-3" type="button" value="Upload Image">
</p>
Yet only the first button opens the upload frame?
Thanks in advance.