CODEWITHSUNDEEP
javascripthtmljquerynode.jsajax
nomadev95
nomadev95

Reputation: 125

Send AJAX data to Node.js

Unable to send data to Node.js from my HTML/AJAX, I have variable selectValue which I want to send to my Node server. While making use of data: { selectValue: selectValue} does not help.

index.html

<script type="text/javascript">
    $(document).ready(function(){   
    var selectElement = document.getElementById('selectDetails');       
    var selectValue='';
        $.ajax({
                 url: "http://localhost:8070/api/route1",
                 type: 'POST',
                 dataType:'json', 

                 success: function(res) {
                     console.log(res);
                     console.log(res.content);
                     $.each(res.content, function(key,value) {
                        console.log(value);
                        selectElement.options[selectElement.options.length] = new Option(value.hostname+":"+value.port);
                    });
                    $("#myButton").click(function(){
                        var selectValue = document.getElementById("selectDetails").value;
                        console.log(selectValue);
                    });
                },
                data: { selectValue: selectValue}
            });   
        });                          
</script>

app.js

router.post('/route1', function(req, res){ 
    var selValue= req.body.selectValue;
    console.log("Select Value"+selValue);
});

console.log("Select Value"+selValue); give an undefined value. How do I send the value of selectValue to my node server.

Upvotes: 0

Views: 58

Answers (3)

Jkarttunen
Jkarttunen

Reputation: 7651

In pseudocode, you need to do something like:


    $(document).ready(function () {

      $.ajax("http://localhost:5000/config", function (data) {
         // Get initial values
         // Render values to Select options

      }) 

      $("#myButton").click(function () {
        // get selected value on click
        var selectedValue = 'foo'
        $.ajax({
          url: "http://localhost:5000/setServer",
          type: "POST",
          dataType: "json",
          data: { selectedValue: selectValue },
          success: function (res) {
            // on success, do what you need to do after data to server has been set.

          },
        });
      });
    });

Upvotes: 1

Jkarttunen
Jkarttunen

Reputation: 7651

This should be moved out of of the post / XHR callback:

$("#myButton").click(function(){
    var selectValue = document.getElementById("selectDetails").value;
    console.log(selectValue);
});

Now you are sending empty string ''; to the server, and editing the value of another variable called 'selectValue' inside call handler. The inner selectValue variable shadows the original value, but the orginal value will never be changed.

something like this could work

<script type="text/javascript">
    $(document).ready(function(){   
    var selectElement = document.getElementById('selectDetails');       
    var selectValue='foo';

     $("#myButton").click(function(){
         // NO VAR HERE, TO NOT SHADOW THE OUTER VARIABLE
         selectValue = document.getElementById("selectDetails").value;
         console.log('1', selectValue);
         $.ajax({
            url: "http://localhost:8070/api/route1",
            type: 'POST',
            dataType:'json', 
            data: {selectValue: selectValue},
            success: function(res) {
               console.log(res);
              console.log(res.content);
            }
         });  
     });

</script>

Upvotes: 0

Bar Levin
Bar Levin

Reputation: 215

note that your url is: "http://localhost:8070/api/monitor" and in your app.js file you're trying to post to /route1

Upvotes: 0

Related Questions