Posting form data and storing the response in a variable using plain JS not JQUERY

Question

I'm doing some exercises trying to learn Javascript and I created a basic webform that will post form data and display the response in an iframe. ( the code is below)

I would like to add to this and store the response from the server in a variable as a string. How can this be done using plain Javascript? I understand that it would be much easier with JQuery but I want to learn the JS basics before I move onto JQuery.

Any help is appreciated.

 <form action="http://BLANK.ASP" method="get" target="hiddenFrame"
    <pre>
    userID:    <input type="text" name="userid"><br>
    password:  <input type="text" name="userpassword"><br>



    <center>
    <button type="submit">Submit</button>    
    </center>

    </pre>



    </form>

    <iframe id="hiddenFrame" name="hiddenFrame" style="width:1000px">hi
    </iframe>

Answer 1

I have a feeling you might be rubbing up against the Same Origin policy . However, if the iframe address is within the same domain, it is possible to access its contents via

document.getElementById('hiddenFrame').contentWindow.document

Then, you could grab information via .innerHTML or any other standard JavaScript method. Unfortunately, if the form processing page is not on the same domain as your webpage, you are going to run into permission errors. (see link above)

Assuming you have control over the page handling your form, you may try to pass that information to the parent page. Hopefully, your iframe is within the same domain and the above is useful to you. If you provide me with some more information about what you're doing, I can update this with some extra information.