0

I have a selection field with a meta_key (for example:'text_style') and 3 values (for example:'normal', 'bold', 'italic'), and an element after it (for example: a div with a text in it).

Now i need to update "changeable-class" for each values, when a user select them without reloading page (I can do it).

How do it using AJAX (or any other way that is simpler and faster in loading)? Do I need to use meta_key to do it really?

Regard

magic-boy
  • 11
  • 6
  • you don't need AJAX for this, just a small piece of javascript, if you use jQuery it'll be easier for you. but you should share the code you tried at least .. – moped Dec 29 '18 at 21:40
  • @moped ,Thanks a lot! You're right! I do it :-) – magic-boy Dec 29 '18 at 21:50

1 Answers1

0

This is my solution (thanks and regard to @moped):

//JavaScript
document.getElementById('StyleSelection').onchange = function(){
    document.getElementById('myDiv').className = this.value;
};
/* css */

.normal { font-style: normal;} 
.bold {font-weight: bold;} 
.italic {font-style: italic;} 
<!-- html -->

<form id="myform" action="#"> 
    <select id="StyleSelection"> 
      <option value="">Please select...</option>
      <option value="normal">Normal</option>
      <option value="bold">Bold</option>
      <option value="italic">Italic</option>
    </select> 
</form> 

<div id="myDiv">This is myBox</div>

If every body have a solution using meta_key, I really thank him... Regard

magic-boy
  • 11
  • 6