Question

我有一个输入字段，其id =＆＃34;到＆＃34;这是空的，当用户键入某些内容时，按下提交，它应该更改下面脚本中的位置属性。但是，没有任何反应。

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 INPUT

<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

您可以尝试这样的事情：

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>

我更改了普通按钮的提交按钮，因为我认为您不需要在此示例中调用服务器。

Answer 2

我相信您的问题是您的HTML按钮设置为＆＃34;提交＆＃34;。当用户按下按钮而不是向服务器端组件提交数据时，您似乎希望在客户端（使用JavaScript）执行操作。

尝试将类型设置为＆＃34;按钮＆＃34;代替。将单击事件绑定到按钮并在事件处理程序中执行$ .simpleWeather调用。这应该可以解决你的问题。

编辑：要将javascript实际绑定到您的按钮，您可以做的一件事是：

grep -c

然后将$ .simpleWeather代码放在一个名为

的函数中

获取输入值并将其与JavaScript

2 个答案: