Send AJAX data to Node.js

Question

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.

That works for me. Are you using bodyparser? Do you see the post in browser devtools? — Jkarttunen
– Jkarttunen, Commented Jun 2, 2020 at 11:43
var bodyParser = require('body-parser'); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()) — nomadev95
– nomadev95, Commented Jun 2, 2020 at 11:44
If i console.log(selectValue) i do see the value in the browser but the same is not being reflected on my node server irrespective of get/post call — nomadev95
– nomadev95, Commented Jun 2, 2020 at 11:46

Jkarttunen · Accepted Answer · 2020-06-02 12:41:32Z

1

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.

          },
        });
      });
    });

answered Jun 2, 2020 at 12:41

Jkarttunen

7,7014 gold badges30 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nomadev95 Over a year ago

let me give it a try

Bar Levin · Accepted Answer · 2020-06-02 12:21:01Z

0

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

answered Jun 2, 2020 at 12:21

Bar Levin

2151 silver badge12 bronze badges

1 Comment

nomadev95 Over a year ago

Yeah I kept a dummy route before posting it here, it is pointing to /monitor in both index and app

Jkarttunen · Accepted Answer · 2020-06-02 12:28:28Z

0

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>

edited Jun 2, 2020 at 12:28

answered Jun 2, 2020 at 11:59

Jkarttunen

7,7014 gold badges30 silver badges29 bronze badges

9 Comments

nomadev95 Over a year ago

so where exactly do I put it?

Jkarttunen Over a year ago

Now things were happenign in this order: 1. Set outer 'selectValue' = ''; 2. Send post with selectValue: ''; 3. After post return success : Attach click handler to button 4. After user clicks the button: Define and set another variable also called ' selectValue', but with scope inside clickhandler function. Set value to whatever was in the text input.

nomadev95 Over a year ago

Okay so I have followed all the steps but now I don't see my <select> options like before. let me update the code again

nomadev95 Over a year ago

Could you pls look at it now?

Jkarttunen Over a year ago

Yeah, left out some lines that were not essential for the POST request to be send.

|

Collectives™ on Stack Overflow

Send AJAX data to Node.js

3 Answers 3

1 Comment

1 Comment

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related