'Insert Text into a Form in iFrame and click on Submit

Alright. I basically want to create an iframe on my website which leads to my other website.

On my iFramed website I have a form with a Text Field and a Submit button. I would like to insert some text to the Text Field and then Click on the submit button WHEN I click on a button at Site A (the one which contains the iframe).

Is it possible in some way?

I have tried the follwoing but it doesn't seems to work:

<script type="text/javascript">
    function insertTxt() {
        var textstring = "test successful";
        window.frames["iframeAB"].document.documentElement.getElementsByTagName("textarea")[0].value = textstring;
    }
</script>

<iframe name="iframeAB" src ="index.html" id="qab" width="100%" height="210" style="border:1px solid #009ee0">
    Your browser doesn't handle iframes
</iframe>
<input type="button" value="Go" onclick="top.frames['iframeAB'].window.document.body.getElementById('text_field').value='test successful';"/>
<a href="#" onclick="insertTxt();">test</a>
javascriptjqueryhtmliframe


Solution 1:[1]

Try using window.frames["iframeAB"].documentContent instead of window.frames["iframeAB"].document

Solution 2:[2]

Try this using jQuery:

// Include the jQuery file inside the head tag
// Download the latest version, this is in the jQuery website
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script>
// Then call the code inside ready method like this
$(document).ready(function () {
    // Get the iFrame jQuery Object
    var $MyFrame = $("iframe[name='iframeAB']");

    // You need to wait for the iFrame content to load first
    // So, that the click events work properly
    $MyFrame.load(function () {
        var frameBody = $MyFrame.contents().find('body');

        // Find the textarea by id
        var textarea = frameBody.find('#text_field');

        // Set the value here...
        textarea.val(textstring);
    });
});

</script>

Solution 3:[3]

You might try this solution:

It uses JQuery

Your HTML

<iframe name="iframeAB" src ="index.html" id="qab" width="100%" height="210" style="border:1px solid #009ee0">
    Your browser doesn't handle iframes
</iframe>
<input type="button" value="Go" onclick="top.frames['iframeAB'].window.document.body.getElementById('text_field').value='test successful';"/>
<a href="#" onclick="insertTxt();">test</a>

insertTxt() method in JS file 

$("#qab").ready(function() {
    $("#qab").contents().find("body").find('textarea').val('Test Successful');
});

Solution 4:[4]

This should work, try know

<script>
    let preFillForm = () => {

        //name attribute of iframe in box bracket
        let iframe = window.frames["myiframe"].document

        iframe.getElementById("email").value = '[email protected]'
        iframe.getElementById("password").value = 'kdbagwe007'

        //click button after 4 seconds of iframe load or whenever u want
        setTimeout(() => {
            console.log('click')
            iframe.getElementById("submit").click();
        }, 4000);
    }
</script>

<iframe name="myiframe" width="600px" height="400px" src="your-url"
    onload="preFillForm()"
>
</iframe>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Phil
Solution 2
Solution 3 Buddybear
Solution 4 Kaustubh Bagwe

Related Questions