Submit to external form with "action:javascript" using javascript

Question

I have a form on one page (one.html) that has a javascript funtion as its submit action:

<form id="the_form" action="javascript:myfunc('input_text');" method="post">
    <input type="text" id="input_text" name="input_text">
    <input type="submit">
</form>

I have another page (two.html) with a button that when clicked I would like to submit the form on one.html, along with a value for input_text. Is this possible with ajax or any other way for that matter? If possible, I would also like to redirect to the page I submit the form too although this is optional.

Can you show us all the code on the two different pages please? — Nebula, Nov 30 '15 at 21:03
How could two.html submit a form from one.html that will be empty while on two.html? — Matthew Herbst, Nov 30 '15 at 21:11
@towerofnix They're both 1000s of lines with JS, so I can't really. Both pages work fine on their own, I'm just trying to connect them. — James, Nov 30 '15 at 21:15
(Thousands of lines of code - yikes!) I'm not sure how you would do this.. perhaps a node.js serer may be better for this? — Nebula, Nov 30 '15 at 21:20
Yeah, there is lots of interactive stuff with d3, so they become quite large. Both sites were made separately (and need to stay that way) but now we need to integrate them as well. Rather than writing a new third site, I'd rather just try and link them which should be fine except for this little problem. — James, Nov 30 '15 at 21:26

score 1 · Accepted Answer · answered Dec 01 '15 at 08:11

this code should be on second form:

$(document).ready(function(){
var QueryString = function () {
    // This function is anonymous, is executed immediately and
    // the return value is assigned to QueryString!
    var query_string = {};
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i=0;i<vars.length;i++) {
        var pair = vars[i].split("=");
        // If first entry with this name
        if (typeof query_string[pair[0]] === "undefined") {
            query_string[pair[0]] = decodeURIComponent(pair[1]);
            // If second entry with this name
        } else if (typeof query_string[pair[0]] === "string") {
            var arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ];
            query_string[pair[0]] = arr;
            // If third or later entry with this name
        } else {
            query_string[pair[0]].push(decodeURIComponent(pair[1]));
        }
    }
    return query_string;
}();

if(QueryString.preview){
    console.log(QueryString.preview);
}

});

this sample read query and parse.

So, first you can send your form as GET, like http://asd.com/?param1=a&param2=b and then just use QueryString.param1 and QueryString.param2 in your another page.

Perfect! Works well. I had hoped there would be a simple answer. — James, Dec 01 '15 at 15:55

score 0 · Answer 2 · edited May 23 '17 at 12:07

Based on the comment under this post, I'm asuming you want to send it info from pageA to a php file that returns a resulting file:

Based on the comments under your question, I'm assuming you want to post from pageA to new page (pageB) with javascript.

Quick answer: Not possible (in a userfriendly way).
More useful answer:
It requires a bit more work, but based on the info given, this might work:

Submit the form from pageA via either GET or POST to pageB
Create hidden fields (<input type="hidden"/>) and fill those with the corresponding GET or POST values. This might be easier with a serverside language like PHP, but isn't impossible in JS
Set a hidden input and name it like <input type="hidden" id="linkedSubmit" value="1" />
Create some javascript to see if $('#linkedSubmit').val()==1, if so continue to submit the form on pageB

This isn't the prettiest solution and on a slow connection the user will see page hopping. And because it is javascript it's clientside, thus a user can manually change the value to 1 and trick your page. This should not become a security problem.

Thanks Martijn. Seeing your answer I feel more and more like I'm over complicating things with this setup. Essentially pageA produces a file (server-side) which I'd like to pass to pageB (that runs purely client-side) without the user having to download it. All I need to do is pass the file name from pageA to pageB and have B retrieve the file, load it and display it. Alternatively if the user already has their needed file locally, they can directly specify it to B without needing A. This seems simple but I can't seem to think of a simple solution to support this. — James, Nov 30 '15 at 23:35

Submit to external form with "action:javascript" using javascript

2 Answers2