Enter function from .click on link

Question

I am obtaining values from a text input field.

jQuery:

$('.submitLocation').click(function(){

    // get value from input field
    var city = $(".city").val();
});

HTML

<input type="text" name="city" class="city" placeholder="City Name">
<button class="submitLocation">Set location</button></br>

I want the same thing to happen when a user clicks on a list item comprised of historic searches. I am able to list the results, but unable to get the function to fire again when a list item is selected.

I have tried to address this by assigning the city class to the list items and then creating a function that fires the initial function.

var weather = [];
var weatherLength;
var text;
var i;

function showCurrent(currentWeather) {
console.log(currentWeather);
console.log(currentWeather.name);

weather.push( currentWeather.name );

if (typeof(Storage) !== "undefined") {

    // Store
    // saves name/s in local storage (for histoy list)
    localStorage.setItem("weather", JSON.stringify( weather ) );

    // saves name in session storage for current use
    sessionStorage.setItem("name", currentWeather.name);

    // Retrieve
    // Retrieves name from session storage 
    document.getElementById("name").innerHTML = sessionStorage.getItem("name");

    weatherLength = weather.length;
    text = "<ul>";
    for (i = 0; i < weatherLength; i++) {
        text += "<li class='city'>" + "<a href='location.html' class='submitExistingLocation'>" + weather[i] + "</a>" + "</li>";
    }
    text += "</ul>";
    document.getElementById("record2").innerHTML = text;

    $('.submitExistingLocation').click(function(){
        $('.submitLocation').click(); // Trigger search button click event
    })

html

<div id="record2"></div>

Answer 1

You are creating multiple list items that have CSS class city on them:

text = "<ul>";
for (i = 0; i < weatherLength; i++) {
    text += "<li class='city'>" + "<a href='location.html' class='submitExistingLocation'>" + weather[i] + "</a>" + "</li>";
}
text += "</ul>";

Then, in your click event handler, you are getting the value using $(".city").val();. According to documentation of .val() function in jQuery:

[It gets] the current value of the first element in the set of matched elements...

Notice that in your case the first element is not necessarily the element that's been clicked.

To correct the selector, you can use event.target property to get the element that has been clicked, and store it in a global variable so that it is available in the click handler for .submitLocation.

---

Another problem is the city class is being set on an <li> element, which doesn't have a value attribute. So .val() would return undefined. In order to get the text inside the list item, you should be calling .text() instead of .val().

Here's how your code might look like in the end:

var clickedElement = undefined;
...

$('.submitLocation').click(function(){
    if(clickedElement !== undefined) {
        // Get the TEXT from clicked list item.
        var city = $(clickedElement).text();

        // Clear the value of clicked element.
        clickedElement = undefined;
    } else {
        ...
    }
}     

...
$('.submitExistingLocation').click(function(event){
    // Keep track of the element that was clicked.
    clickedElement = event.target;

    //Trigger search button click event
    $('.submitLocation').click();
});