JavaScript issue with pulling form input

Question

I want to pull from the form the city name. and place it in the var at top where it say dallas so that when some one enters the city name it will auto update the var with right city name. I apologize for the early long winded remark. Stack overflow wanted more.

Turn HTML Form Input into JavaScript Variable

and

Obtain form input fields using jQuery?

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css"></style>
  <script type="text/javascript" rel="script" type="script" href="script.jss"></script>
  <script type="text/javascript" src='http://code.jquery.com/jquery-1.10.2.min.js'></script> 
  <script type="text/javascript">

        $(document).ready(function() {

           // $("#submit").click(function(){
           // alert("The paragraph was clicked.");
           // });  // Submit button click


            var city = "dallas"       <==== code to pull from form   
              console.log(city);         

           $.get("http://api.openweathermap.org/data/2.5/weather?q="+ city + "&&units=imperial&APPID=46468f48fc0759e3d79e69e4127838da"   //api call with imperial units
          ,function(data){
            console.log(data);
          $("#weather").append(data.name);   // City name
          $("#temp").append(data.main.temp)  //temp pull
           });
       });       

  </script>


</head>
<body>
    <div id='wrapper'>

         <div id = "formdiv">

        <form id= "forminfo">

          <input  type="text" name="city" value="cityname"  >   <---this 
          <input id = "submit" type="submit" ></input>
        </form>


        </div>
      <div id = 'weather'> </div>
      <div id='temp'> <p></p> </div>


</body>
</html>

Eduardo Escobar · Accepted Answer · 2017-03-04T22:11:03.873

0

If you're talking about grabbing the value of this field form:

<input  type="text" name="city" value="cityname"  >

You can do it this way:

var city = $("input[name='city']").val();

Here's an example of the whole implementation:

$(document).ready(function() {
    $("#forminfo").on("submit", function(e) {
        e.preventDefault();
        var city = $("input[name='city']").val(); 
        console.log(city);         
        $.get("http://api.openweathermap.org/data/2.5/weather?q="+ city + "&&units=imperial&APPID=46468f48fc0759e3d79e69e4127838da"   //api call with imperial units
        ,function(data){
            console.log(data);
            $("#weather").append(data.name);   // City name
            $("#temp").append(data.main.temp)  //temp pull
        });
    });
});

edited Mar 04 '17 at 22:11

answered Mar 04 '17 at 22:03

Eduardo Escobar

3,301
2
18
15

Tried that code even tried a different version of it before i posted I just tried it now and all its putting in var is the word cityname. – David Hollenbeck Mar 04 '17 at 22:06
Because you need to add this code (plus the ajax GET code) into an "onclick" or an "submit" event function! – Eduardo Escobar Mar 04 '17 at 22:07
Ok ill try that. not versed in ajax yet so I will work on it. Ty – David Hollenbeck Mar 04 '17 at 22:09
Take a look to the example i added – Eduardo Escobar Mar 04 '17 at 22:12
Yes ty that is pulling the city. which is what I was having the issue. I didn't realize the link to the submit. – David Hollenbeck Mar 04 '17 at 22:18

score 0 · Answer 2 · answered Mar 04 '17 at 22:09

0

var city = "";
$("input[name='city']").blur( function() { 
    city = $("input[name='city']").val();
 } )

answered Mar 04 '17 at 22:09

Nir O.

1,563
1
17
26

JavaScript issue with pulling form input

2 Answers2