Получите входное значение и используйте его с переменной с JavaScript

Question

У меня есть поле ввода с id = "to", которое пустое и когда пользователь вводит что-то, и нажмите кнопку submit, он должен изменить атрибут местоположения в приведенном ниже скрипте. Но ничего не происходит.

oldvalue = document.getElementById("to").value; 
var newvalue; 
var inputBox = document.getElementById("to"); 
inputBox.onchange = function(){ 
    newvalue = document.getElementById("to").value; 
    oldvalue = newvalue; 
}; 

$(document).ready(function() { 
    $.simpleWeather({ 
    location: oldvalue, 
    unit: 'c', 
    success: function(weather) { 
     html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>'; 
     html += '<ul><li>'+weather.city+', '+weather.region+'</li>'; 
     html += '<li class="currently">'+weather.currently+'</li>'; 
     $("#weather").html(html); 
    }, 
    error: function(error) { 
     $("#weather").html('<p>'+error+'</p>'); 
    } 
    }); 
}); 

HTML ВХОД

<div class="input-group add-on"> 
<input type="text" class="form-control" placeholder="to: " id="to">     
<button id='tobtn' class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>    
</div> 

Answer 1

Я считаю, что ваша проблема в том, что ваша кнопка HTML будет установлен тип "представить". Похоже, что вы хотите делать что-то на стороне клиента (используя JavaScript), когда пользователь нажимает кнопку, а не передает данные серверному компоненту.

Попробуйте вместо этого ввести «кнопка». Свяжите событие click с кнопкой и выполните свой вызов $ .simpleWeather в обработчике событий. Вероятно, это должно помочь вам исправить ситуацию.

EDIT: Для того, чтобы на самом деле связать JavaScript для вашей кнопки, одна вещь, которую вы можете сделать это:

<button onclick="refreshWeather()">Submit</button> 

Тогда просто положить $ код .simpleWeather в зависимости от этого имени

Answer 2

Вы могли бы попробовать что-то вроде этого:

JavaScript:

oldvalue = document.getElementById("to").value; 
var newvalue; 
var inputBox = document.getElementById("to"); 
inputBox.onchange = function(){ 
    newvalue = document.getElementById("to").value; 
    oldvalue = newvalue; 
}; 

var loadWeather = function(location) { 
    $.simpleWeather({ 
     location: location, 
     unit: 'c', 
     success: function(weather) { 
      html = '<h2><i class="icon-'+weather.code+'"></i> '+weather.temp+'&deg;'+weather.units.temp+'</h2>'; 
      html += '<ul><li>'+weather.city+', '+weather.region+'</li>'; 
      html += '<li class="currently">'+weather.currently+'</li>'; 
      $("#weather").html(html); 
     }, 
     error: function(error) { 
      $("#weather").html('<p>'+error+'</p>'); 
     } 
    }); 
} 

var refreshWeather = function(){ 
    loadWeather(oldvalue); 
} 

$(document).ready(function() { 
    loadWeather(oldvalue); 
}); 

HTML:

<div class="input-group add-on"> 
    <input type="text" class="form-control" placeholder="to: " id="to">     
    <button id='tobtn' class="btn btn-default" type="button" onclick="refreshWeather();"><i class="glyphicon glyphicon-search"></i></button>    
</div> 

меняет кнопку отправки для обычной кнопки, потому что я думаю, что вам не нужно звонить на сервер в этом примере.