0

since last two days i've been trying to achieve to auto fill fields in third party form in iframe exactly like this

$("#btn1").click(function() {
  $("#test1").val("10");
  $("#test2").val("1.5");
  $("#test3").val("1000");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Formula 1:
  <input type="text" id="test1" value="">
</p>
<p>Formula 2:
  <input type="text" id="test2" value="">
</p>
<p>Formula 3:
  <input type="text" id="test3" value="">
</p>
<p>What the answers to these formulas?</p>
<br>
<button id="btn1">Hint</button>

I have gone through so many tutes that i even forgot where i had started.

I have gone through this solution but it is not what exactly i want.

Another similar solution is here Fill input field inside an iframe when link outside of iframe is clicked

but the user is using her/his own javascript as jquery.postmessage.min.js

Any idea about how to achieve this?

3

1 Answer 1

0

You can access the inner HTML of an iframe using something like this

document.querySelector('iframe').contentWindow.window.document.querySelector('Tag you wanna select')

You might encounter this error blocked a frame of origin null from accessing a cross-origin frame . A fix to this is already answered here.

While this might just selected the select the element in the iframe, I'm still unsure if you can actually fill the form in the iframe.

Edit- Just tried it, you actually can alter the innerHTML of frame this way. Hope this helps.

1
  • Slightly shorter... document.querySelector("iframe").contentDocument.querySelector("input[name=myfield]").value = "my value"
    – doublejosh
    Apr 18, 2022 at 21:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.