Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm trying to allow multiple images to be uploaded to the media library where I can then take the URL of the image and insert it into a custom page on the website but for some reason, when I click on the other input buttons, it doesn't work and doesn't display the media library upload dropdown and selects the first inputs text field. I can't figure out why I can't use the other inputs and upload multiple images at once.

Can anyone see what I am doing wrong?

This is the JS:

<script language="JavaScript">
    jQuery(document).ready(function() {
    jQuery('#upload_image_button').click(function() {
    formfield = jQuery('#upload_image').attr('name');
    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('#upload_image').val(imgurl);
    tb_remove();
    }

    });
    </script>

This is the input fields form:

<tr valign="top">
        <td>Upload Ad for Position 1</td>
        <td><label for="upload_image">
            <input id="upload_image" type="text" size="36" name="upload_ad1_doc" value="<?php echo $gearimage; ?>" />
            <input id="upload_image_button" type="button" value="Upload Image" />
            <br />Enter an URL or upload an image for the ad.
            </label>
        </td>
    </tr><br /><br />
    <tr valign="top">
        <td>Upload Ad for Position 2</td>
        <td><label for="upload_image">
            <input id="upload_image" type="text" size="36" name="upload_ad2_doc" value="<?php echo $gearimage; ?>" />
            <input id="upload_image_button" type="button" value="Upload Image" />
            <br />Enter an URL or upload an image for the ad.
            </label>
        </td>
    </tr><br /><br />
    <tr valign="top">
        <td>Upload Ad for Position 3</td>
        <td><label for="upload_image">
            <input id="upload_image" type="text" size="36" name="upload_ad3_doc" value="<?php echo $gearimage; ?>" />
            <input id="upload_image_button" type="button" value="Upload Image" />
            <br />Enter an URL or upload an image for the ad.
            </label>
        </td>
    </tr>

function wp_gear_manager_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_enqueue_script('jquery');
}

function wp_gear_manager_admin_styles() {
wp_enqueue_style('thickbox');
}

add_action('admin_print_scripts', 'wp_gear_manager_admin_scripts');
add_action('admin_print_styles', 'wp_gear_manager_admin_styles');
share|improve this question
    
I changed the name attribute on the inputs to see if it would work or not, otherwise they are all named 'image_upload' –  user1086337 Feb 5 '13 at 22:54
add comment

1 Answer 1

You have three input elements with id="upload_image" and three with id="upload_image_button". So jQuery is working with first elements only.

Remember, id means identity.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.