Jquery GET in plain javascript

Question

I call my_function on form submit. The function looks inside a text file for the number entered by the user in my_input. If this number does not exist, the function pops an alert and should stop form submit.

My problem: the alert is shown, but when I close it, the form gets submitted. My problem is similar with this thread: How do I return the response from an asynchronous call?

One of the solutions there is to do the GET in plain javascript. Can someone help please? This is too advanced for me.

function my_function() {
  $.get("http://www.example.com/file.txt", function(contents) {
    var my_number = document.getElementById("my_input").value;
    var hasString = contents.includes(my_number);
  });
  console.log(hasString); // **ALWAYS RETURNS UNDEFINED**
  if (hasString == false) {
    alert('Number does not exist in text file!');
    return false;
  }
}

I was just asking for my particular code, how to do the get without jquery. — Malasorte, Oct 12 '16 at 16:43
Have you tried one of the methods from the post you linked, specifically parts about letting functions accept callbacks as parameters? — showdev, Oct 12 '16 at 16:43
Do not have the know how. Was just hoping that somone will magically change the code for me :) — Malasorte, Oct 12 '16 at 16:44
There are plenty of tutorials on performing AJAX calls with plain Javascript. — Barmar, Oct 12 '16 at 16:45
I do not know how to transform this $.get("http://www.example.com/file.txt", function(contents) { var my_number = document.getElementById("my_input").value; var hasString = contents.includes(my_number); }); to plain javacript — Malasorte, Oct 12 '16 at 16:45
@Malasorte Perform the AJAX request with `XMLHttpRequest`. The function that sets the variables goes into the `xhr.onreadystatechange` function. Read an AJAX tutorial for the details. — Barmar, Oct 12 '16 at 16:47
Show where `my_function()` gets called. The submit issue is a bit trickier than some other async issues — charlietfl, Oct 12 '16 at 16:50
Try use: $.getScript("path"+filenum+".txt").done() , call the file and execute as javascript... if you can change to .js extension like done this. before this you can add inside the done a function callback to run/call your script for this instance — , Oct 12 '16 at 17:15

score 0 · Answer 1 · edited May 23 '17 at 12:19

hasString is a local variable of the callback function provided to $.get as second argument. This is why it's undefined outside said function. Note just moving the variable declaration to the outer scope won't fix the problem, as the callback function will be executed after the check hasString == false anyway (it will be executed when the get request finishes).

Answering your question more directly: either perform the get request synchronously (and properly declare the variable in the scope you need to use it) or restructure your code to use the information retrieved by the get request only inside the callback. Read the post @abc123 mentions for more information.

Jquery GET in plain javascript

1 Answers1