Question 165740 in Wordpress Question posted in
The official Wordpress documentation can be found here.

“How can I clone a hidden input’s value & append it to another div in WordPress?”

Is there a way to get the value of a hidden div and clone the value to another div? I have a color picker in a ACF option page and am looking for a way show what that color would look like in another div.

To put it in another way if the value of a hidden input has #2b0059, it gets the value and copies it to another div.

My code so far:

jQuery(document).ready(function ($) {
    $(document).on( "click", '#update', function() {      $("#color1").clone().appendTo("#output .acf-input")
    });
});
.acf-input {height:100px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="color1">
<input type="hidden" name="acf[field_60d4d8ef09c78]" value="#2b0059">
</div>
<div id ="output">
  <div class="acf-input"></div>
</div>
<button id="update">Update</button>
Tags:

2

Answers


  1. 0

    Looks like you don’t actually need to clone it, so how about just getting the value and adding a css background-color to the div ?
    Something like this:

    jQuery(document).ready(function ($) {
    $(document).on( "click", '#update', function() {
      $('.acf-input').css({
        backgroundColor: $('#color1 input').val()
      })
    });
});
    .acf-input {height:100px}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="color1">
<input type="hidden" name="acf[field_60d4d8ef09c78]" value="#2b0059">
</div>
<div id ="output">
  <div class="acf-input"></div>
</div>
<button id="update">Update</button>
    Login or Signup to reply.
  2. 0

    It’s pretty simple you just need a proper selector.

    jQuery(document).ready(function ($) {
     
    $(document).on( "click", '#update', function() {   
      var clonedObj=$("#color1 input").clone();
      $("#output .acf-input").append(clonedObj);
      console.log($(".acf-input").html());
      alert("cloned")
    });
});
    .acf-input {height:100px}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="color1">
  <input type="hidden" name="acf[field_60d4d8ef09c78]" value="#2b0059">
</div>
<div id ="output">
  <div class="acf-input"></div>

</div>
<button id="update">Update</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search