Submit a form and get a JSON response without jQuery

Question

I have a simple HTML form like this:

            <div class="border-little text-center grey">
                <form action="https://www.THIS IS MY URL.php" method="get">
                    <input name="player" id="player" value="1" class="hidden">
                    <label for="number">Enter a number</label>
                    <input type="text" id="number" name="number" placeholder="">
                    <input type="submit" value="Submit">
                </form>
            </div>

The operation is as follows: The player enters a number, and the server answers using a JSON format.

My issue: When I press "submit" My webpage leaves and redirects to the server page display a JSON formatted answer.

What I want to do: I want to stay on my page and be able to receive the answer in JSON format and display them below my form instead of being redirected to the server page.

More details: example of JSON answer I get from the server:

{"guess": "lower"}

I cannot use any kind of JavaScript library so JQuery is forbidden.

https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery ajax is one of those things that are significantly less verbose using a help library. — ippi, Jun 17 '18 at 10:53
Add named iframe tag below the form and submit the form to this iframe by name.
... — Alex S., Jun 17 '18 at 10:55
@AlexS. the iframe is a really good Idea thank you a lot it works, by the way do you have an idea how to check the answers and do something if the number in the right one like when I receive {"guess": "YouWon!"} — Ced, Jun 17 '18 at 11:02
To process json from iframe in main window get it contents by the following way: var myframe = document.getElementsByTagName("iframe")[0], content = (myframe.contentDocument || myframe.contentWindow.document).textContent, json = JSON.parse(content); — Alex S., Jun 17 '18 at 11:20
I am sorry @AlexS. I don't understand what you did on the comment above, can you please give me more details ? — Ced, Jun 17 '18 at 15:29
I got : Uncaught TypeError: Cannot read property 'contentDocument' of undefined at ?player=1&number=:47 — Ced, Jun 17 '18 at 16:00

score 2 · Answer 1 · answered Jun 17 '18 at 12:22

you just use ajax method of js

function r_submit() {
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "https://www.THIS IS MY URL.php", true);
var params = {"player":document.getElementById("player").value};
xhttp.send(params);
xhttp.onload = function() {
    alert(xhttp.responseText);
}
}

and execute r_submit() function button when you click button

here your html code will be like

 <div class="border-little text-center grey">
                <input name="player" id="player" value="1" class="hidden">
                <label for="number">Enter a number</label>
                <input type="text" id="number" name="number" placeholder="">
                <input type="submit" value="Submit" onsubmit='r_submit()'>
            </form>
        </div>

I am sorry it doesn't work @manan5439 maybe can you give me more details about what were you trying to do ? — Ced, Jun 17 '18 at 15:50

score 0 · Answer 2 · answered Jun 17 '18 at 11:11

i've written years ago a simple js part, that allows you to send XHR requests easily. it's a little deprecated but it is a simple template to understand how you CAN go on. you could modernize it by using webworkers and make it closer to your setup. if you wish i could post an old prototype in JS from me with webworkers and so on (but some names of variables are in german..)

function getElement(inp)
{
    return document.getElementById(inp);
}

function put(data,div)
{
    getElement(div).innerHTML = data;
}

//information: autoput means: do you wish to write the raw response in a div? [0,1] - when 1 then put the id of the div in var div at the call of the function
function get(url,data,method,autoput,div)
{
    var req;
    if(window.XMLHttpRequest)
    {
        req = new XMLHttpRequest();
    }
    else
    {
        req = new ActiveXObject("Microsoft.XMLHTTP");
    }

    req.onreadystatechange = function()
    {
        if(req.readyState == 4 && req.status == 200)
        {
            if(autoput == 1)
            {
                put(req.responseText, div);
            }
        }
    }

    if(method.toLowerCase() == "get")
    {
        req.open("GET",url+data,true);
        req.send();
    }
    else
    {
        if(method.toLowerCase() == "post")
        {
            if(data !== "")
            {
                req.open("POST", url, true);
                req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                req.send(data);
            }
        }
    }
}

score 0 · Answer 3 · answered Jun 17 '18 at 17:37

It's possible to use iframe technique when jQuery is forbidden. Submit the form to the named iframe and wait for onload event. Modified html and js code will look like:

<div class="border-little text-center grey">
    <form action="https://www.THIS IS MY URL.php" method="get" target="myframe">
        <input name="player" id="player" value="1" class="hidden">
        <label for="number">Enter a number</label>
        <input type="text" id="number" name="number" placeholder="">
        <input type="submit" value="Submit">
    </form>
</div>
<iframe id="myframe" name="myframe"></iframe>


<script>
    var myframe = document.getElementById("myframe");
    myframe.onload = function() {
        var iframeDocument = myframe.contentDocument || myframe.contentWindow.document; // get access to DOM inside the iframe
        var content = iframeDocument.textContent || iframeDocument.body.textContent; // get text of iframe
        var json = JSON.parse(content);

        if (json && json.guess) {
            // process the json here
            alert(json.guess);
        }
    }
</script>

Submit a form and get a JSON response without jQuery

3 Answers3