How to select the text inserted into a text field with jQuery?

Question

I created a search form where the user has to insert the name of a city.

I associated the JS file to a JSON file containing the name of several cities. I want to display the whole list where a specific city has been included whenever the user types the name of it and clicks on the Search button.

I need a jQuery method to select which word has been written into the text field. I used the CSS selector input[type=text] here but I don't think it's the correct one:

$.ajax({
  url: "http://localhost/prove/infoFrancigena_3.json",
  dataType: "json",
  success: function (data) {
    console.log("getJSON wit AJAX method has been activated");
    for (var i in data.tappe) {
      //if (i.includes($("#inlineFormInputCittà"))) {
      //if ($("#inlineFormInputCittà").val() === "Rome")

      if (i.includes($(input[type=text]))) {
        console.log("JSON file has been activated");
        $("#tbody").append(i);

      } else {
        return false;
      }
    }
  }
});

The JSON file is the following:

{
  "tappe": [
    {
      "name": "Tappa22 - Passo della Cisa - Pontremoli",
      "state": "Italy",
      "region": "Toscana",
      "city": "Groppoli(Mulazzo)"
    },
    {
      "name": "Tappa22 - Passo della Cisa - Pontremoli",
      "state": "Italy",
      "region": "Toscana",
      "city": "Groppodalosio"
    }        
  ]
}

How may I select the text inserted into a text field with jQuery?

Possible duplicate of [How do I get the value of a textbox using jQuery?](https://stackoverflow.com/questions/463506/how-do-i-get-the-value-of-a-textbox-using-jquery) — Heretic Monkey, Jun 12 '19 at 13:53
You've got quite a few syntax errors that should be showing up in your console. To answer any other errors you might have, we'll need to know what `i` is. — Heretic Monkey, Jun 12 '19 at 13:55
The jquery selector `input[type=text]` will search the dom for any input element with an attribute `type="text"`. You might want to be more specific and search only for the ID of your search element (add an ID if it doesn't have one). Then, once you have the jQuery object, you can get it's value using `.val()` — KyleMit, Jun 12 '19 at 13:56
Hey franz, if you can, try to squeeze down your question into only the bare minimum amount of information possible to reproduce as well as breaking up your question into different sections that you're working through. For example, you can just cherry pick a couple of cities from the JSON file instead of including the whole thing. If you're having trouble getting a value from an input, *only* include that javascript. If you're having trouble returning an ajax result, ask a separate question with *only* that info. If you're trying to filter json results, yup, new question. — KyleMit, Jun 12 '19 at 14:42
@KyleMit , ok, I edited the question, thank you for the suggestion. — franz1, Jun 12 '19 at 14:54

score 3 · Accepted Answer · answered Jun 12 '19 at 13:48

3

Given that your input field has an id equal to field_id:

var text = $('#field_id').val();

answered Jun 12 '19 at 13:48

Antonis Koursoumis

91
3

Thank you Antonis, I created a variable but the function doesn't work (I edited the Question) – franz1 Jun 12 '19 at 14:32
Could you post the HTML of your form? – Antonis Koursoumis Jun 12 '19 at 19:00

score 1 · Answer 2 · answered Jun 12 '19 at 13:56

1

Alternatively, in Vanilla JS:

var cityName = document.getElementById('search-field-id').value

answered Jun 12 '19 at 13:56

KyleMit

30,350
66
462
664

How to select the text inserted into a text field with jQuery?

2 Answers2