This code works, but the way I integrated it is breaking the media uploader. How can I integrate it properly?

Question

This code right here is in my functions.php file and was written to change the text in the media upload button, since I'm using the media uploader to allow site users to upload a personal business card if they choose. When I realized I'd actually like to hide several page elements in the WP uploader, as well as pulling the contents of the "link URL" field in an uploaded file, this function was the only place where the JQuery and CSS would actually work. How can I integrate this code into the site in the "proper" way? Are there hooks I can use to attach these lines of JQuery and CSS properly?

add_filter('attachment_fields_to_edit', 'my_action_button', 20, 2);

function my_action_button($form_fields, $post) {
    $send = "<input type='submit' class='button' name='send[$post->ID]' value='" . esc_attr__( 'Use Photo' ) . "' />";
    $form_fields['buttons'] = array('tr' => "\t\t<tr class='submit'><td></td><td class='savesend'>$send</td></tr>\n"); ?>
<!-- This breaks the media uploader, but it does what it's supposed to do. Probably needs to be on a different page, but I don't know where. -->
    <script>
        jQuery('.savesend input[type=submit]').click(function(){  
            var url = jQuery(this).parents('.describe').find('.urlfile').data('link-url');
            var field = jQuery(this).parents('.describe').find('.urlfield');
            field.val(url);
        });
    </script>
    <style>
        #media-head-125, #imgedit-response-125, .savebutton.ml-submit, .image-size, .align, .post_content, .post_excerpt, .image_alt, .post_title.form-required, .media-types.media-types-required-info, .url {
            display: none !important;
        }
    </style>
    <?php return $form_fields;
}

Answer 1

Well first of all, never use jQuery or JavaScript or CSS code at filter hook. Cause the filter hooks are not designed that way. It is designed to get an input modify or manipulate the input and return it back to where ever it(input) has come. So it has no function to echo anything. And no echo means no script placing for HTML.

Secondly, you can divide your code into two piece and put the jQuery and CSS code into a separate file, then enqueue that script file with admin_enqueue_scripts or wp_enqueue_scripts. It'll be a long example, so I'm not mentioning it here. Please do some search. I'm sure you'll find an example of it.

Thirdly, you can enqueue that script inline with HTML by hooking that script directly to admin_head or admin_footer ( For front-end it would be wp_head or wp_footer ). Now for your case I assume you need to hook that to your admin back-end. SO the code will be like below-

add_filter('attachment_fields_to_edit', 'the_dramatist_action_button', 20, 2);
function the_dramatist_action_button( $form_fields, $post ) {
    $send = "<input type='submit' class='button' name='send[$post->ID]' value='" . esc_attr__( 'Use Photo' ) . "' />";
    $form_fields['buttons'] = array('tr' => "\t\t<tr class='submit'><td></td><td class='savesend'>$send</td></tr>\n");
    return $form_fields;
}

add_action( 'admin_footer', 'the_dramatist_footer_scripts' );
function the_dramatist_footer_scripts() {
    ?>
    <script>
        //jQuery('.savesend input[type=submit]').click(function(){
        //  var url = jQuery(this).parents('.describe').find('.urlfile').data('link-url');
        //  var field = jQuery(this).parents('.describe').find('.urlfield');
        //  field.val(url);
        //});

        // I prefer writing your jQuery code like below.
        (function($){
            'use strict';
            $(funtion(){
                $('.savesend').on( 'click', 'input[type=submit]', function() {
                    var url = $(this).parents('.describe').find('.urlfile').data('link-url');
                    var field = $(this).parents('.describe').find('.urlfield');
                    field.val(url);
                });
            });
        })(jQuery)

    </script>
    <style>
        #media-head-125, #imgedit-response-125, .savebutton.ml-submit, .image-size, .align, .post_content, .post_excerpt, .image_alt, .post_title.form-required, .media-types.media-types-required-info, .url {
            display: none !important;
        }
    </style>
    <?php
}

Also notice I've tried to rewrite your jQuery code in a better approach. Writing jQuery code this way is better.

Notice: I haven't tested this code. Please test it before going live.