Get dynamic inputs value from one string input with jQuery

Question

I have followed this Question to get all inputs value into one input value and it's working fine: Clone multiple input values into one input field

Working fiddle: https://jsfiddle.net/yt4qeo6k/

jQuery(document).ready(function($){
  $(function(){
      $('.copy').on('keyup blur', function(){        
          var bgcolor = $(".bgcolor").val();
          var textcolor = $(".textcolor").val();
          var padding = $(".padding").val();
          var linkcolor = $(".linkcolor").val(); 

          $('.full').val( '#masthead {background-color:' + bgcolor + ';color:' + textcolor + ';padding:' + padding + 'px;} #masthead a{color:' + linkcolor + ';}');

       }).blur();
  });
});

// Body Classes
function setting_dynamic_body_classes() { ?>
<input type="text" name="dynamic-bg-color" data-alpha="true" data-default-color="" class="bgcolor copy color-picker" value="">
<input type="text" name="dynamic-text-color" data-alpha="true" data-default-color="" class="textcolor copy color-picker">
<input type="range" name="dynamic-padding" class="rangeslider padding copy"  value="" step="1" min="0" max="100">
<input type="text" name="dynamic-link-color"  data-alpha="true" data-default-color="" class="linkcolor copy color-picker">
<input type="text" name="dynamic-body-classes" id="dynamic-body-classes" value="" data-alpha="true" data-default-color="" class="full" style="width:100%;"/><br>
<strong>current Value: </strong><?php echo get_option('dynamic-body-classes'); ?>
<?php }

the Field dynamic-body-classes is saved in a custom options page in Wordprsss. Now the issue after saving the form in Wordpress the Inputs value is empty because only the field "dynamic-body-classes" was saved in the database.

and the value of "dynamic-body-classes" e.g will look like following:

#masthead {background-color:#1e73be;color:#dd9933;padding:95px;} #masthead a{color:#81d742;}

How can i add the value of each field (dynamic-bg-color, dynamic-bg-color, dynamic-padding, dynamic-link-color ) based on the value "dynamic-body-classes" ?

before changing the values of each field

after changing the values of each field

After Saving the form the current value is showing up as expected but the dynamic field are empty

I am not sure i am doing this the right way, but what i need is to add many dynamic fields that their value get saved as css in one field for dynamic Theme styling.

Really not enough known about how this is saved or where the code is to update the fields — charlietfl
– charlietfl, Commented Jul 11, 2019 at 10:49
@charlietfl Thanks, i have edited the question. Its saved in a custom Theme options page in wordpress. please see attached images. — Nash
– Nash, Commented Jul 11, 2019 at 10:56
Suggest using a more structured object for your saving process is the point — charlietfl
– charlietfl, Commented Jul 11, 2019 at 11:02

Titus · Accepted Answer · 2019-07-11 10:58:38Z

You can use regex to extract the values from the saved string, here is an example:

const full = $("#currentValue").text();
const values = full.match(/#masthead {background-color:([^;]+);color:([^;]+);padding:([^;]+)px;} #masthead a{color:([^;]+);}/);

$(".full").val(full);
$(".bgcolor").val(values[1]);
$(".textcolor").val(values[2]);
$(".padding").val(values[3]);
$(".linkcolor").val(values[4]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="dynamic-bg-color" data-alpha="true" data-default-color="" class="bgcolor copy color-picker" value="">
<input type="text" name="dynamic-text-color" data-alpha="true" data-default-color="" class="textcolor copy color-picker">
<input type="range" name="dynamic-padding" class="rangeslider padding copy"  value="" step="1" min="0" max="100">
<input type="text" name="dynamic-link-color"  data-alpha="true" data-default-color="" class="linkcolor copy color-picker">
<input type="text" name="dynamic-body-classes" id="dynamic-body-classes" value="" data-alpha="true" data-default-color="" class="full" style="width:100%;"/><br>
<strong>current Value: </strong><span id="currentValue">#masthead {background-color:#1e73be;color:#dd9933;padding:95px;} #masthead a{color:#81d742;}</span>

Collectives™ on Stack Overflow

Get dynamic inputs value from one string input with jQuery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related