Announcement

Collapse
No announcement yet.

Simple dialog html question.

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Simple dialog html question.

    I have created a simple html drop-down select option dialog to allow users to find out what time classes I'm hosting are occurring in their own time zone.

    The trouble begins when I incorporate that html into a page or product.

    On pages, if I use the visual editor, the code automatically gets reformated so the drop down no longer functions. Well, fine, just stay away from the visual editor.
    If I incorporate it into a Woocommerce product however, the code gets reformated within a an hour or so. It can be working just fine when I update the product, test to confirm, close. Re-open, re-test... then I look later that day and it's been reformated.

    So, I was told the better way to handle this is to build the code as a php function. Then I could just put the shortcode in anywhere I want to make this little dialog show up.

    The trouble is, I can't seem to figure out where I'm supposed to create this. I tried the functions page, but that didn't seem to go.
    I'm looking at the php builder, but I do not know what option to select to create the function and the shortcode.

    Any help is appreciated.

    The page the dialog is working correctly on is: https://www.coachmansdelight.com/onl...nline-classes/

    The code that's making it is:
    <form>
    Select Your Location:
    <select id="mySelect">
    <optgroup label="United States & Canada">
    <option value="10:30pm">Newfoundland Time</option>
    <option value="10pm">Atlantic Time</option>
    <option value="9pm">Eastern Time</option>
    <option value="8pm">Central Time</option>
    <option value="7pm">Mountain Time</option>
    <option value="6pm">Pacific Time</option>
    </optgroup>
    <optgroup label="Australia">
    <option value="12pm + 1 day">Australian Eastern Standard Time</option>
    <option value="1pm + 1 day">Australian Eastern Daylight Time</option>
    <option value="11:30am + 1 day">Australian Central Standard Time</option>
    <option value="12:30pm + 1 day">Australian Central Daylight Time</option>
    <option value="10am + 1 day">Australian Western Standard Time</option>
    </optgroup>
    <optgroup label="New Zealand">
    <option value="3pm">New Zealand Daylight Time</option>
    <option value="3:45pm">Chatham Daylight Time</option>
    </optgroup>
    <optgroup label="Europe">
    <option value="2am + 1 day">Western European Time</option>
    <option value="3am + 1 day">Central European Time</option>
    <option value="4am + 1 day">Eastern European Time</option>
    </optgroup>
    </select> <button type="button" onclick="myFunction()">Show Time</button> <b id="demo"></b>
    </form>
    </P>

    <script>
    function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = x;
    }
    </script>

  • #2
    Dynamik Custom - Hook Boxes. Paste the code in and set the hookbox to shortcode and save. Then use that shortcode where you need it.

    https://docs.cobaltapps.com/article/...tom-hook-boxes

    Comment


    • #3
      Wow, that WAS easy!

      Thanks SIGa!

      For others who read this post:
      Actually, it was easier than the reference article indicates. Following those instructions sent me off in another direction looking at widgets and 'do_shortcode'.
      Really just pasting into the hook box and naming it was all I had to do.

      Comment


      • SiGa
        SiGa commented
        Editing a comment
        Glad to hear it worked for you!
    Working...
    X