2017-03-04 3 views
0

フォームから都市名を引き出したいと思います。それをダラスと呼ばれる上部のvarに置きます。その結果、都市名が入力されると、正しい都市名でvarが自動的に更新されます。私は早期の長い間巻き込まれた発言をお詫び申し上げます。スタックオーバーフローはもっと必要でした。フォーム入力をプルする際のJavaScriptの問題

http://stackoverflow.com/questions/23982774/turn-html-form-input-into-javascript-variable 

http://stackoverflow.com/questions/169506/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> 

答えて

0

あなたは、このフィールドのフォームの値をつかんで話をしている場合:

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

あなたはこのようにそれを行うことができます。

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

以下は実装全体の例です:

$(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 
     }); 
    }); 
}); 
+0

は私はちょうど今それを試してみましたが、そのすべてがVARに入れワードcitynameで掲示する前にも、それの異なるバージョンを試したことのコードを試してみました。 –

+0

"onclick"または "submit"イベント関数にこのコード(プラスajax GETコード)を追加する必要があるため! –

+0

それを試してみてください。まだアヤックスに精通していないので、私はそれに取り組むでしょう。 Ty –

0
var city = ""; 
$("input[name='city']").blur(function() { 
    city = $("input[name='city']").val(); 
}) 
関連する問題