Posting values to an api using jQuery not working as intended

Question

I'm trying to create a html form, from which the user can submit the values written in the text fields to an external api (ThingSpeak). This api works on the values received from this form and returns a plot in an iframe. The script I've written works fine, only when the file is just opened. It fails to push the new values upon reloading and resubmitting using the same file. And the output ends up showing the last plot embedded in the iframe.

The html file containing the form:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>ThingSpeak Portal</title>
</head>
<body>
    <form>
        <label id="1" for="signal">Enter Signal: ex - @(t)sin(t): </label><br>
        <input type"text" id="signal"><br>
    </form>
    <button>Submit</button>
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                var input = $("#signal")[0].value;
                if (input!="" && input!=null) {
                    $.post("https://api.thingspeak.com/update.json" ,{
                    api_key : "XXXXXX",
                    field1: input},
                    function(){
                        alert("Directing to output...");
                        // location.reload();
                        window.location = "output1.html";
                    });
                }
                else {
                    alert("Error!");
                    location.reload();
                }
            });
        });
    </script>
</body>
</html>

The html file containing the output in form of an iframe:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <iframe id="plot" width="450" height="260" style="border: 1px solid #cccccc;" src="https://thingspeak.com/apps/matlab_visualizations/435674"></iframe>
    <script>
        var iframe = document.getElementById('plot');
        iframe.src = iframe.src;
    </script>
</body>
</html>

It would be amazing if anyone can spot the problem and help me resolve it. Thanks in advance!

score 0 · Answer 1 · edited Nov 20 '21 at 11:21

It appears that a successful API POST request from the form page (index.html) only redirects the user to output1.html which has a plot hardcoded in the iframe:

src="https://thingspeak.com/apps/matlab_visualizations/435674"

So this output plot will always be loaded, since the src is hardcoded and never updated. Also, nothing is being done with the data returned from the successful POST request, which should contain the url to the plot if I understood the api documentation correctly.

Here is a way to access the data returned from the request:

$.post("https://api.thingspeak.com/update.json" ,{
                api_key : "XXXXXX",
                field1: input},
                function(data){
                   console.log(data) // log anything returned to the console
                }
);

As for displaying the new plot:

An option would be to add the iframe in index.html, where the iframe src can be automatically updated with javascript using the necessary data returned from the POST request.
If you would like to display the results in output1.html, you need a way to transfer the returned data with your request, which would be used to change the src of the iframe of that page. This should help you with that: How do I redirect to an HTML page and bring in attached data?

Posting values to an api using jQuery not working as intended

1 Answers1