@juanh64 - What you are trying to do is called ajax. Ajax is a method in which you submit a form, or otherwise make a web request to a server (in this case your agent), and only reload part of the page. I don’t think we have any documentation about AJAX right now, so here we go (also worth noting that we have a task in our todo list to make a good ajax primer for Electric Imp)!
(If you just want the solution… skip to the VERY END, which has modified agent + HTML code for you to use).
The first thing you’ll need to do is add a new element in your HTML for the response to be displayed in. Add the following after your form:
<span id="response"></span>
I like to use a Javascript framework called jQuery, since it’s free, and simplifies pretty much everything about Javascript and working with the DOM (the elements on your webpage). To include jQuery, we need to add the following line to your HTML’s head:
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js'></script>
Next, we’re going to rejigger your HTML to make it a bit easier to work with. We’re going to remove the form, and change the “submit” element to a “button” element. At this point, your HTML should look like this (don’t worry, we’re almost done):
`
Submit
`
You’ll notice we did a couple extra things in here as well: We added an “id” attribute to the text input, this will make it easier for us to find it with jQuery. We wrapped the input form, and the span in separate “p” tags, this will just give them a bit more space on the page. And finally, along with changing the submit element to a button element, we added an ‘onclick’ event - this function will be fired whenever the button is clicked.
So the last thing we need to do is create a our “sendToAgent” javascript function. This is where the jQuery comes in handy. We’re going to add the following right below the script tag for jQuery (in line comments explain what’s going on):
<script> function sendToAgent() { // grab the data var data = $("#data")[0].value; // make an ajax request $.ajax({ // where we're sending the data to url: "https://agent.electricimp.com/abc123...", // the data we're sending data: "data="+data, // what method we're using method: 'POST', success: function(response) { // if the request was successful, change the response span to say success $("#response").html("Success - sent data to agent"); }, error: function (request, status, error) { // if the request failed, change the response span to say what went wrong logError('Whoops!', request.responseText, false); $("#response").html("ERROR - " + request.responseText); } }); } </script>
Finally (I promise), we need to add an extra header to the agent’s http response to let your webpage know that AJAX requests to the agent are ok:
http.onrequest(function(req, resp){ server.log("Got a request"); if (req.method == "POST"){ local body = http.urldecode(req.body) server.log(body.data); } resp.header("Access-Control-Allow-Origin", "*"); resp.send(200, "OK"); });
So with ALL of these changes your http.onrequest() function should like above, and your HTML should look like the following:
`
Submit
`