jQuery: How to get input value within an ajax call?

Question

I have a jQuery script, in which I need to load data from a CSV from an external URL.

At the same time, I need to combine the data from the CSV with data provided by a frontend user through an input field. My expected result would be that I'd be able to call the jQuery code for fetching the value from the user's entry into the input field. However, while this works when the code is placed outside the ajax call, it does not work inside.

At the same time, I can't place the code for fetching the user's input outside the ajax call, as I need to be able to utilize information from the loaded CSV together with the user input to perform a dynamic calculation.

My code is as below:

HTML:

<input type="text" id="my_input" value="12" maxlength="2">

Javascript:

$.ajax({
    url: csv_url,
    async: false,
    success: function (csvd) {
      var csv = $.csv.toObjects(csvd);
      // XYZ done with the CSV data to populate various fields

      $("#my_input").keyup(function () {
          console.log(this.value);
          // this does not result in anything being logged
      });
    },
    dataType: "text",
    complete: function () {}
  });

$("#my_input").keyup(function creates an event handler. Nothing will be logged until the user types something into the box after the Ajax request has finished. Is that what you intended? It's not quite clear what the flow is supposed to be — ADyson
– ADyson, Commented Oct 17, 2021 at 18:32
I can't place the code for fetching the user's input outside the ajax call, as I need to be able to utilize information from the loaded CSV ... You can. Just put the data from the CSV into a variable whose scope extends outside the Ajax call — ADyson
– ADyson, Commented Oct 17, 2021 at 18:34
The ideal work flow would be as follows: 1) On page load, the CSV file is loaded by the ajax call, resulting in the 'tool' being ready for inputs from the user. 2) The user can then enter a value into the input field. This value is used in a calculation with variables from the CSV to produce an output that is displayed to the user. 3) If the user then changes the input field value, the calculation should be updated accordingly. I am unsure if the best approach would be to try and get the CSV scope to go outside the ajax call - or in contrast get the user input values to extend into the ajax. — mfcss
– mfcss, Commented Oct 18, 2021 at 5:47
Well the Ajax callback will only exist when the response initially comes back from the server. If you don't put the values into a variable which can exist outside that then they won't be available for later use as you described. — ADyson
– ADyson, Commented Oct 18, 2021 at 7:02
@ADyson Thanks for clarifying - in that case, I guess the solution I'm looking for is how to get the CSV data to persist and be available outside of the ajax call, which I assume should resolve my challenge — mfcss
– mfcss, Commented Oct 18, 2021 at 8:12

Afshin Mobayen Khiabani · Accepted Answer · 2021-10-17 18:29:59Z

1

Of course it will not work. You are telling the compiler to add the keyup event listener to input after the ajax call is successful. Which means it will not work until ajax call is completed successfully.

You need to put the keyup event listener outside and inside the ajax call just get the value like below:

let myInputValue = "";

    $("#my_input").keyup(function () {
        console.log(this.value);
        myInputValue  = this.value;

     });
    
    $.ajax({
        url: csv_url,
        async: false,
        success: function (csvd) {
          var csv = $.csv.toObjects(csvd);
          // XYZ done with the CSV data to populate various fields
    
          //And later use the myInputValue here
        },
        dataType: "text",
        complete: function () {}
      });

You have not give us enough info. if you only need the current value in the ajax call you can do like below:

$.ajax({
            url: csv_url,
            async: false,
            success: function (csvd) {
              var csv = $.csv.toObjects(csvd);
              // XYZ done with the CSV data to populate various fields
        
              let myInputValue = $("#my_input").val();//And later use the myInputValue here
            },
            dataType: "text",
            complete: function () {}
          });

edited Oct 17, 2021 at 18:29

answered Oct 17, 2021 at 18:23

Afshin Mobayen Khiabani

1,34914 silver badges24 bronze badges

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

5 Comments

charlietfl Over a year ago

Never ever use async:false. It is a horrible practice and has been deprecated by browser vendors

Afshin Mobayen Khiabani Over a year ago

@charlietfl I just copied the code from question and didn't check that as it was not the part OP had problem.

charlietfl Over a year ago

Just pointing it out. It was deprecated many years ago and produces warning messages in console when used

mfcss Over a year ago

I have now changed the async:false to async:true. What I am trying to achieve is to have the user's inputs in the input field be available within the scope of the ajax call. I tried your first solution above. However, here I can only log the user input changes within the keyup statement - I am not able to log/use the updated value of myInputValue inside the ajax call.

Afshin Mobayen Khiabani Over a year ago

@mfcss I feel like you asked the wrong question or have a wrong understanding of event handlers and/or ajax calls. Can you please explain with details what you mean by using keyup in ajax call? ajax call itself can't have keyup or log pressed keys while calling the endpoint. As you said its a CALL to outer source.

Collectives™ on Stack Overflow

jQuery: How to get input value within an ajax call?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related