Collect HTML Data created with Javascript in an HTML element

Home Forums Quform WordPress Collect HTML Data created with Javascript in an HTML element

This topic is: resolved

This topic contains 4 replies, has 2 voices, and was last updated by  Ally 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #26432

    support-enligne
    Participant

    Hi there,

    first of all thank you very much for this very great plugin.

    I created a big form with a lot of possibilities, and it works fine.
    But now I ‘m stucked about HTML data.

    I add some text, html code, by clicking a button for example in a DIV.
    Basically it’s like this :

    <script>
    document.getElementById(“myDiv”).innerHTML = “myArea”;
    </script>

    myDiv appears on the form, perfect !

    source code is like this : <div id=”myDiv”>myArea>/div>

    But when I send the form, this field is not transmitted.
    When I add some HTML by hand and save it, it’s ok.

    So, how could I get the HTML content generated dynamically with Javascript ?

    note: if I step forward and back (before sending), html data is still written

    I really need this “html” code, cause I can add/remove some text with a button, and I use HTML tag for this.

    I tried to copy dynamically my div content to a Quform_textarea but it doesn’t work.

    Any idea ?

    Thanks for your support.

    Phil.

    #26457

    support-enligne
    Participant

    Up ?

    #26474

    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

    #26618

    support-enligne
    Participant

    Hi there,

    thank you for your answer, I give you here my complete solution if someone needs something similar.

    Context :

    1 external HTML Button, I added myself.
    I want this button to add its own value to the Quform Textarea to collect it.

    And I want to see its value in an HTML area (between DIV for example)

    Problem, I need an action “onclick” to get value correctly reported in textarea.
    Maybe because of a conflict between Quform JQuery and an other plugin I use (WP Google Map Pro)

    In fact I want to click on a flag on the map, and get the city name in my textarea.

    SOLUTION :

    => WORDPRESS

    Hhtml custom Button :
    <input type=”button” value=”Add” id=”button1″ onclick=”insertText(‘txt1’, ‘MyvalueToCollect’);”>

    with : “txt1” as ID div destination, and “MyvalueToCollect” as any value you want to collect

    => QUFORM²

    – My HTML DIV Area to show up the value I clicked

    <div id=”txt1″></div>

    – My Hidden Textarea (and readonly) to collect the data.

    id = 1_384 (for example)

    => CUSTOM JS

    jQuery(function ($) {

    $( ‘div’).click(function() {
    var mycities = $( ‘#txt1’ ).text();
    $(‘.quform-field-1_384’).val(myCities);
    });

    });

    function insertText(zoneTxt, city) {

    var elem = document.getElementById(zoneTxt);
    elem.innerHTML += ‘<div>’+city+'</div>\n’; // add the value in the DIV, 1 by line

    }

    ================

    Hope that will be helpfull.

    I joined a GIF (bad quality to be under 2Mb)
    The “remove city” option is not in the code above, to be lighter.

    Thanks again for your great plugin, we can make so many things 🙂

    Attachments:
    You must be logged in to view attached files.
    #26694

    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

Be inspired. © 2018 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy