jQuery question -- triggering a "submit" button to pass the value inside an input field

jQuery question -- triggering a "submit" button to pass the value inside an input field
0

#1

I’m stuck. I have a “submit” button that’s next to an input field. I’d like to have the user input a zip code, and then click that “submit” button. Once clicked, the numeric zip code value would then be available for some other code to use.

I cannot figure out how to do it. Tried several different things, but the stuff I’ve tried does not seem to work.

Any help would be greatly appreciated! Thank you. Here is my codepen:


#2

Here are a couple of mistakes you can look into first.

  1. When accessing an element by ID you need to use the # symbol.
 $("#zipcode").on("click", function(){});
  1. Your functions don’t return a value or assign values into a variable.
function getZipCode (zipcode) {
	return document.getElementById("zipcode").value;
};
  1. For getZipCode, you pass in parameter, but you don’t use it in your code.
function getZipCode (zipcode) {
	return document.getElementById("zipcode").value;
};

#3

Thanks!

I redid the code.

Now I can get the value of the input box to actually display after the user clicks the “submit” button, but I can’t get that value to pass through to the weather.open line directly below it.

What am I doing wrong?


#4

Here is my interpretation of refactoring your code.
Please let me know if you have any questions.

	'use strict';

	//Declare global variable
	var zipcode = "";
	
	//jQuery document ready - short version
    $(function() {
        $("input[value=SUBMIT]").on("click keypress", function(){
            getZipCode();
            CallService(); 
        }); 
    });

	//Fuction to call Weather Underground API
	function CallService(){
		var xhr  = new XMLHttpRequest();
		
		xhr.onload =  function(){
			if (this.readyState == 4) {
				if(this.status == 200){
					// Typical action to be performed when the document is ready:                       
					var xhrData = JSON.parse(xhr.response);
					var dis = "Current Zip Code: " + xhrData.current_observation.display_location.zip;
					var temp = xhrData.current_observation.temperature_string;
					var wind = xhrData.current_observation.wind_string;					
					
					// Calling function to process data
					getWeather("weather", dis);
					getWeather("temp", temp);
					getWeather("wind", wind);
				}
				else{
					alert("Something went wrong!");
				}  
			} 
		};

		xhr.open("GET", "http://api.wunderground.com/api/946b8e24c6bbf51b/conditions/q/" + zipcode + ".json", false);
		xhr.send(null);        
	}
	
	// Function to populate global variable
	function getZipCode() {
		zipcode = document.getElementById("zipcode").value;
	}

	// Function to process data.
	function getWeather(id, res) {    
	  document.getElementById(id).innerHTML = res;
	}