jquery append innerHTML by id in new window after load

Question

I'm trying to use jquery to :

1. open a new window/tab (same domain, different page)
2. then add text to a text box (id = "BUpdates_SQL_Statement")
3. then click this button: <input type="submit" value="Apply Changes" name="BUpdates_Submit" id="BUpdates_Submit">
4. then close the window

here's the onclick element in the starting page (we'll call it www.mydomain.com/firstpage):

<li id="MainNav_Update"><span class="MainMenuText" onclick="runUpdateWindow();">Update</span></li>

and here's the area I want to edit in the new window (we'll call it www.mydomain.com/secondpage)

<textarea id="BUpdates_SQL_Statement"></textarea>

<input type="submit" value="Apply Changes" id="BUpdates_Submit">
<a onclick="v$('BUpdates_Submit').click();return false;" href="javascript:void(0);"><span>Apply Changes</span></a>

side note: v$('BUpdates_Submit').click();return false;" is for another external js file that has nothing to do with what I'm trying to do here. and here's my jquery:

   function runUpdateWindow() {
        var updateWindow = window.open("www.mydomain.com/secondpage", "blank");
    }
        var updateSQL = 'UPDATE TABLE ...';

        $(updateWindow).on("load", function (){
        $("BUpdates_SQL_Statement", updateWindow.document).append(updateSQL);

$('BUpdates_Submit').trigger('click');
        });

        updateWindow.close();

The www.mydomain.com/secondpage is opening in a new tab, but the BUpdates_SQL_Statement should be:

<textarea id="BUpdates_SQL_Statement">
UPDATE TABLE...
</textarea>

but it's still blank.

I would sincerely appreciate any input. Thanks in advance!

Answer 1

From what I understand, what you're trying to do is automate filling out and submitting a form, and have selected a seemingly rather straightforward way of doing that. Whether or not that works, though, there's probably a simpler way.

Think about what happens when you open that other page, fill out the form, and press submit. If it's a normal HTML form with no JavaScript interfering with it, you'll probably just get a POST request. If I had this form, say:

<form action="run-sql" method="post">
    <textarea name="sql"></textarea>
    <input type="submit" value="Run query">
</form>

When I submitted it with some SQL, the browser would send a POST request to run-sql with one parameter, sql. Firing off a POST request is relatively simple to do from JavaScript, at least in comparison to automating another web page. Firing off an HTTP request from JavaScript is typically called AJAX, and fortunately, jQuery makes it easy with its $.post function.

So how would one use it? In that specific example, it would be as simple as this:

var mySQL = "select * from employees";  // e.g.
jQuery.post("run-sql", {sql: mySQL}, function() {
    alert("Success!");
});

Now, some forms are not so simple as this, but it's worth a shot to see if your form is.

Answer 2

Went with doing an iframe rather than a new window:

function runUpdateWindow() {
    var frame = document.createElement('iframe');

      frame.src = "www.mydomain.com/secondpage";

    document.body.appendChild(frame);

    var frameWindow = frame.contentWindow

    var updateSQL = 'UPDATE TABLE...';

    frameWindow.onload = function (){
        var textarea = frameWindow.document.getElementById("BUpdates_SQL_Statement");
        var button = frameWindow.document.getElementById("BUpdates_Submit");

        textarea.value = updateSQL;

frameWindow.v$('BUpdates_Submit').click();
    };

}

a huge thank you to Dagg Nabbit for helping me figure this out!