Request data from server nodejs on button click

Question

I have front end code written this way where on a button click, I need to get certain data from the node server to populate a map that I have on the client side. This map is displayed on : " http://localhost:8080/ "

My code to request from the server looks like this:

<div id="heatmap">
        <input name="heatit" type="submit" value="Heat up!">

        <script>
            $("#heatit").click(function (){

                $.ajax({
                    url:"/heatmap",
                    type: "POST",
                    success: function(result) {
                        console.log("hi");
                    }                
                    });
                });

            </script>
    </div>

And this is my server side code:

app.post('/heatmap', function(req, res) {

  console.log("hey");
  res.send(densityList);

});

When I click on "Heat up!", nothing happens, no request is sent when I examine the browser console, and I also cannot get any log output.

Can anyone tell me how to get the backend data to the front end so I can dynamically change the front end page?

Answer 1

Your script is not be getting called, your input is named heatit but your jQuery is listening for a click on something with an id of heatit . Try setting that id in your html and going from there:

<input id="heatit" name="heatit" type="submit" value="Heat up!">

If you would like to keep your html the same you can change your click listener:

$('input[name=heatit]').on('click', function(){
  //your code
})