conditional logic for css if a selection field (with meta_key) have specific value using ajax/jquery












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










share|improve this question

























  • 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
















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










share|improve this question

























  • 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














0












0








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










share|improve this question
















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







php ajax wordpress conditional meta-key






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Dec 29 '18 at 22:14







magic-boy

















asked Dec 29 '18 at 15:57









magic-boymagic-boy

15




15













  • 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



















  • 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

















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





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





@moped ,Thanks a lot! You're right! I do it :-)

– magic-boy
Dec 29 '18 at 21:50












1 Answer
1






active

oldest

votes


















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






share|improve this answer

























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53971054%2fconditional-logic-for-css-if-a-selection-field-with-meta-key-have-specific-val%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    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






    share|improve this answer






























      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






      share|improve this answer




























        0












        0








        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






        share|improve this answer















        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






        //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>





        //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>






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Jan 6 at 14:31

























        answered Dec 29 '18 at 22:01









        magic-boymagic-boy

        15




        15






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53971054%2fconditional-logic-for-css-if-a-selection-field-with-meta-key-have-specific-val%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Monofisismo

            Angular Downloading a file using contenturl with Basic Authentication

            Olmecas