Home › Forums › Quform WordPress › Collect HTML Data created with Javascript in an HTML element
- This topic has 4 replies, 2 voices, and was last updated 5 years, 8 months ago by Ally.
- AuthorPosts
- July 30, 2018 at 4:37 pm #26432support-enligneParticipant
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.
July 31, 2018 at 5:46 pm #26457support-enligneParticipantUp ?
August 1, 2018 at 1:06 pm #26474AllySupport StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
August 10, 2018 at 2:11 pm #26618support-enligneParticipantHi 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.August 16, 2018 at 9:47 am #26694AllySupport StaffYou don't have permission to view this content. Please log in or register and then verify your purchases to gain access.
- AuthorPosts
- You must be logged in to reply to this topic.