0

I'm trying to create a visual questionare that works in a way that if a user clicks on a button, that button's data attribute is taken and filled in into the iframe's fields. However, if you try to manually add in any additional info or interact in any way with the iframe, it removes all the auto-filled info.

Also if you try to submit the info it says that the input fields are empty.

Kind of stuck here.

<html>
<a href="#" onclick="autofill(this)" data-filled-value="USA">United States of America</a>
</html>

<script>
function autofill(element)
{
    $("#form-iframe").contents().find("#country-field").val(element.dataset.filledValue);
    evt.preventDefault();
 
}
</script>
Broda
  • 9
  • 1
  • Is the iframe of the same domain? Do you have access to source of the iframe? Is you code changing the value of given fields at all? – async await Dec 09 '21 at 08:48
  • @async await The iFrame is from a different domain (hubspot form) and I technically do have real access to it. The code I've put runs and adds value inside the field, but if I try to Submit the form or type in a value into another field it removes the value and shows that it's empty. – Broda Dec 09 '21 at 10:27
  • As far as I understand, iFrame has a same-origin security policy that prevents you from manipulating the document with js cross origin. However, there are [ways to circumvent the same origin policy](https://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy). That may be your issue, let me know if it helps. – async await Dec 09 '21 at 19:13

0 Answers0