Pass media upload value to input field

You can use some thing like this to add as many image as you want with the botton click for example add logos or advertisements etc

jQuery(document).ready(function($){
    var mediaUploader;
        /* function to add partner logo */
    function display_ad( button,  title, btnTxt,  inputFieldId,  outputDivId,formClass, e){
        e.preventDefault();
        if (mediaUploader) {
            mediaUploader.open();
            return;
        }
        mediaUploader = wp.media.frames.file_frame =wp.media({
            title: title,
            button:{
                text: btnTxt,
            },
            multiple:false,
        });
        mediaUploader.on('select',function(){
            attachment = mediaUploader.state().get('selection').first().toJSON();


            $( inputFieldId ).val(attachment.url);
            $( outputDivId ).css('background-image','url(' + attachment.url +')' );
            $(formClass).submit();
        });
        mediaUploader.open();
    }

    function remove_ad(inputFieldId, formClass,e){
        e.preventDefault();
        var answer = confirm("Are you sure you want to remove this logo?");
        if ( answer == true ) {
            $(inputFieldId).val('');
            $(formClass).submit();

        }
        return;
    }

    /** Different button clicks **/
    $('#logo-one').on('click',function(e){
            //display_ad( button,  title, btnTxt,  inputFieldId,  outputDivId, e)
            display_ad('#logo-one', 'Choose Logo One','Choose Logo','#sunshine-partner-one','#sunshine-partner-one-preview','.sunshine-admin-form',e);
        });
    $('#logo-two').on('click',function(e){
            display_ad('#logo-two', 'Choose Logo two','Choose Logo','#sunshine-partner-two','#sunshine-partner-two-preview','.sunshine-admin-form',e);
        });
    $('#logo-three').on('click',function(e){
            display_ad('#logo-three', 'Choose Logo Three','Choose Logo','#sunshine-partner-three','#sunshine-partner-three-preview','.sunshine-admin-form',e);
        });
    $('#logo-four').on('click',function(e){
            display_ad('#logo-four', 'Choose Logo Four','Choose Logo','#sunshine-partner-four','#sunshine-partner-four-preview','.sunshine-admin-form',e);
        });
    $('#logo-five').on('click',function(e){
            display_ad('#logo-five', 'Choose Logo Five','Choose Logo','#sunshine-partner-five','#sunshine-partner-five-preview','.sunshine-admin-form',e);
        });
    $('#logo-six').on('click',function(e){
            display_ad('#logo-six', 'Choose Logo Six','Choose Logo','#sunshine-partner-six','#sunshine-partner-six-preview','.sunshine-admin-form',e);
        });
    /*Romove button click*/
    $('#remove-logo-one').on('click',function(e){
        remove_ad('#sunshine-partner-one','.sunshine-admin-form',e);
    });
    $('#remove-logo-two').on('click',function(e){
        remove_ad('#sunshine-partner-two','.sunshine-admin-form',e);
    });
    $('#remove-logo-three').on('click',function(e){
        remove_ad('#sunshine-partner-three','.sunshine-admin-form',e);
    });
    $('#remove-logo-four').on('click',function(e){
        remove_ad('#sunshine-partner-four','.sunshine-admin-form',e);
    });
    $('#remove-logo-five').on('click',function(e){
        remove_ad('#sunshine-partner-five','.sunshine-admin-form',e);
    });
    $('#remove-logo-six').on('click',function(e){
        remove_ad('#sunshine-partner-six','.sunshine-admin-form',e);
    });

});

Related Posts:

  1. Most efficient way to add javascript file to specific post and/or pages?
  2. Combine CSS and JS files from plugins
  3. JqueryUi Dialog giving Uncaught TypeError: this._addClass is not a function error
  4. WordPress Ajax always returns a 404 error
  5. Is there a reason why my wordpress PHP page isn’t loading into my PHP template
  6. How to use WordPress (PHP) functions in AngularJS partials files?
  7. Nice scroll to wordpress
  8. Using an Image Slider twice on the same page
  9. Click loads template via ajax
  10. Display notification only once
  11. Access/update database with jQuery
  12. How to display something in a div when the user clicks on a text in another div – no page refresh [closed]
  13. Using wp_localize_script to store the template url into a variable to use in JS
  14. How to speed up admin-ajax.php in wordpress
  15. JQuery not working on WordPress Admin page [closed]
  16. Colorbox ajax loading of outside HTML content works perfect on localhost but not on server
  17. Sending jsPDF documents to the server
  18. Ajax return code 400
  19. Show post in slider
  20. Using shipped version of jquery
  21. How to test nonce with AJAX – Plugin development
  22. js file in root loading without
  23. class click counter save number
  24. Slider loading issue
  25. AJAX request status 200 but no actual “response”
  26. How to select the contents in the text view textrea in wp_editor?
  27. Save Search System
  28. dynamic dependent select dropdown
  29. Ajax load more button for comments wordpress
  30. How to add a do_action on refreshing of WP customizer?
  31. Menu jumping when calling it via PHP
  32. Setting value of session with Ajax not working
  33. How to add a Custom Mailchimp AJAX Newsletter Subscribe Form
  34. Add / Update Custom Fields After Select Pictures in Media Window
  35. Post repeating with infinite scroll
  36. Fancybox type popup window that’s not an iframe
  37. How do I Import / Upload Files with jQuery AJAX?
  38. WordPress Ajax Call inserting data but success response false
  39. Error – ‘create_function is deprecated’ [closed]
  40. What are the advantages/disadvantages of using jQuery DOM manipulation as opposed to PHP DOM manipulation?
  41. Is it save to use eval for a jQuery callback method coming from the database?
  42. Jquery window.send_to_editor function
  43. How to add drag and drop functionalities to a div inside option panel
  44. Why i can’t get custom fields value or post ID via Ajax?
  45. JS file is not loading when i put wp_head() and wp_footer
  46. Accessing an API with jQuery and AJAX
  47. Replacing WordPress Icons (menu,icons32, etc)?
  48. Covert WordPress Blogname into JQuery
  49. Change Query Arguments (filter) with jQuery/Ajax or PHP?
  50. Hot to check if new posts have been published since page load and notify online users?
  51. WordPress cascading dropdown selection search based on Parent Page & Child Page
  52. Tracking Visitor LatLng with WordPress using JS, PHP. How to put data which was extract using JS into DB
  53. Add other class content with reference class value
  54. Admin-ajax.php 404 error
  55. How to pass values from one function to the other using an array variable
  56. How to use wp_ajax_set_post_thumbnail?
  57. Update $wpdb query with AJAX
  58. AJAX to add to cart multiple products woocommerce
  59. Using wp_editor() when not logged stopped working
  60. Show the subcategory name based on current product
  61. Cannot successfully execute AJAX script to call function.php specific function. Using XAMPP localhost to test
  62. Move Jquery.js to Footer
  63. How to echo a PHP code into WooCommerce variation product?
  64. How can i get the same ajax result using WP REST API instead of admin-ajax?
  65. How to call a function from functions.php with ajax?
  66. WordPress load javascript file if something… (after the page is loaded)
  67. include javascript Multiple files in wordpress through script.js
  68. number of posts with “Load More”
  69. Bootstrap Carousel Indicators Won’t Cycle On Custom WordPress Theme
  70. Is there a reason why my wordpress PHP page isn’t loading into my PHP template
  71. ACF + WP + Slick Slider Repeater Slide Group PHP not Displaying [closed]
  72. Find the method which AJAX GET calls
  73. Default Image not showing up in Customizer for WP_Customize_Cropped_Image_Control
  74. How to create a radio button to alt between settings in wp_options table
  75. Why I’m Not Having Access to “$_POST” Data Outside My AJAX Callback?
  76. Add a downloaded JS file to WordPress
  77. Slider from different widgets
  78. How to call javascript function (jquery) in a shortcode?
  79. 500 (Internal Server Error) of external php file
  80. How can I correctly POST to a WordPress page?
  81. Why this plugin is not working?
  82. Dynamic Gallery
  83. Trying to fix multiple category drop down
  84. Cannot get custom javascript to execute on page
  85. Add specific phrase after every product title including the discounted price? [closed]
  86. Pass a PHP variable (loop-audio.php) to jQuery function (js/script.js)
  87. JSON Object Value Show Undefine
  88. Adding jquery using php function
  89. How to hide .js files on wordpress website using php or wp plugins or any? [closed]
  90. notify users when changed database
  91. get_post_meta returns on side but it doesn’t return on bottom of admin page
  92. Integrating PHP into Javascript to display map markers with Google API
  93. Ajax random number always the same
  94. Run do_shortcode on php template using JS function
  95. Adding extra data to shortcode attributes and pass it to JS with wp_localize_script
  96. defined (‘ABSPATH’) false after AJAX post to other PHP-file
  97. How to load WP_Editor JS files manually (with AJAX)?
  98. Use jQuery and AJAX to get HTML
  99. Loading a post’s content, into a div outside the loop, when it’s title is selected in a list
  100. Weird Javascript:void(0) code in my website

Leave a Comment