Jquery: get text file from link and see if it include input value

Question

I am using Jquery to get a text file from a link, and trying to see if it includes a value entered by user from a form. For now, I am just trying to log out on the browser but it the console does not display anything?

Here is my code:

$(function() {
  $('#numberForm').submit(function() {
    var number = $("#individualNumber").val();

    $.get('https://www.website.com/numbers.txt', function(data) {

      var numberData = data.includes(number);

      console.log(numberData);

    });


  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


<body>


  <form id="numberForm" action="">
    Enter Number:<br>
    <input type="text" id="individualNumber">

    <input type="submit" value="Submit">
  </form>

</body>

Any suggestions?

If you console.log for number, is it show the 'number' ? `console.log(number);` — Abed Putra, Apr 24 '19 at 23:58
It actually does not show anything. Console out blank? Any suggestions? — Zeusox, Apr 25 '19 at 00:25

score 1 · Accepted Answer · answered Apr 25 '19 at 00:35

It's navigating to the form action (action="" means the same page or the base url if <base> tag is present). You have to stop the default action with event.preventDefault() to stop the form submission. Or don't submit the form (i.e. use a <button type="button"> or a link and listen to clicks).

$(function() {
  $('#numberForm').submit(function(e) {
    e.preventDefault();

    var number = $("#individualNumber").val();

    $.get('https://www.website.com/numbers.txt', function(data) {

      var numberData = data.includes(number);

      console.log(numberData);

    });


  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>


<body>


  <form id="numberForm" action="">
    Enter Number:<br>
    <input type="text" id="individualNumber">

    <input type="submit" value="Submit">
  </form>

</body>

Thanks, is there anyway for Jquery include function to get the exact match of what is in the text file? For example, I have 2 numbers on my text file as: 1234 and 1354, so if I search for 1234 it does find it however, if I also search 234 it finds it? It does not bring the exact match of what is on the file? — Zeusox, Apr 25 '19 at 02:00
`includes()` is not jQuery. `includes()` will find _any_ appearance of the given string. (`234` is in `1234` so it'll return `true`). If you want to match whole lines, split the data into lines and compare each line, or use a regular expression. — Gabriel, Apr 27 '19 at 03:40

score 1 · Answer 2 · answered Apr 25 '19 at 00:54

If you wanted to write the values to the page, you could create a div and read the file to the div. This way you could check the existence of the input and verify yourself (even if only for testing purposes). In the code given, I have set the div contents to not visible (or you could use display:none;) and checked the input value against the div contents using :contains. (note: I didn't test the code so there may be an error but the gist is there .. )

$(function() {
  $('#numberForm').submit(function() {
    var number = $("#individualNumber").val();

    $.get('https://www.website.com/numbers.txt', function(data) {
      $("#txtdata").html(data);
      //var numberData = $("#txtdata");

      var contained = false;
      $('#txtdata').find('#IndividualNumber')(function() {
        if (!contained && $("#txtdata:contains('" + number + "')")) {
          contained = true;
        }
      });

      if (contained) {
        console.log('Yep, its in the file' + number);
      }

    });

  });
});

#txtdata {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<body>

  <form id="numberForm" action="">
    Enter Number:<br>
    <input type="text" id="individualNumber">

    <input type="submit" value="Submit">
  </form>
  <div id="txtdata">

  </div>

</body>

Thanks, is there anyway for Jquery include function to get the exact match of what is in the text file? For example, I have 2 numbers on my text file as: 1234 and 1354, so if I search for 1234 it does find it however, if I also search 234 it finds it? It does not bring the exact match of what is on the file? — Zeusox, Apr 25 '19 at 02:00
Yes, in fact that is the solution I used. However, the length check actually checks against two lengths: 4 and 5 otherwise it would have worked! Basically the length does if the inputValue.length is either 4 or 5 then display the results. With that being said, if an input value has 12345 it returns true and when the user inputs 1234 it returns true as an existing number... — Zeusox, Apr 25 '19 at 02:10
Well if it works, that's good! If you find a better way later, you can refine it. There's probably similar questions on the site. Here it's 3:16am so I'll give it a rest... Lol. Zzzzz.... — Rachel Gallen, Apr 25 '19 at 02:14

score 0 · Answer 3 · answered Apr 25 '19 at 00:41

When you're submitting the form, your page is being reloaded (more details) and, by the time your data is loaded, you've already left the page.

For testing purposes, you can prevent the form from being submitted.

This will work, as long as https://www.website.com/numbers.txt is in the same domain than your page:

$('#numberForm').submit(function(e) {  //notice the 'e'
    e.preventDefault();
    ...

The full code:

$(function() {
    $('#numberForm').submit(function(e) {
        e.preventDefault();
        var number = $("#individualNumber").val();
        $.get('https://www.website.com/numbers.txt', function(data) {
            var numberData = data.includes(number);
            console.log(numberData);
        });
    });
});

score 0 · Answer 4 · answered Apr 25 '19 at 00:42

0

Access to XMLHttpRequest at 'http://www.website.com/numbers.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Do you get this error?

Try to debug in HTML DOM

answered Apr 25 '19 at 00:42

Shahzad Shameer

21
5

Yes because that link does not exist! I have another link I am using that works. – Zeusox Apr 25 '19 at 00:43
Can you share that link? – Shahzad Shameer Apr 25 '19 at 10:57
This is not an answer to the question; build your reputation so you can comment — this should have been a _comment_ on the question. I will refrain, but you will likely get downvotes in the future. See [this answer](https://meta.stackoverflow.com/a/258612/17300) on meta. – Stephen P Apr 25 '19 at 17:08

Jquery: get text file from link and see if it include input value

4 Answers4