调用JavaScript时,输入文本是否被删除?

时间:2012-11-22 09:48:25

标签: javascript

我使用以下内容更新投放邮政编码的纬度和经度。

代码完美无缺,除非调用脚本,否则会从输入框中删除邮政编码。

有人可以告诉我为什么会这样吗?

<script type="text/javascript">
//<![CDATA[
  var geo = new GClientGeocoder(); 
  function getAddress(search) {
    geo.getLocations(search, function (result)
      { 
        if (result.Status.code == G_GEO_SUCCESS) {
          var p = result.Placemark[0].Point.coordinates;
          var lat=p[1];
          var lng=p[0];
          var dcMessage = '<span style="color:#990000">Post Code Successfully GeoCoded</span>'
          var dcHiddenOutput = '<input type="hidden" name="lat" value="' +lat+ '"><input type="hidden" name="lng" value="' +lng+ '">';
          document.getElementById("ConfirmOrder").innerHTML += dcMessage;
          document.getElementById("UpdateGeo").innerHTML += dcHiddenOutput;
        } 
      }
    );
  }
  function theNext() {
    var addresses = document.getElementById("myInput").value;
      getAddress(addresses);
  }
//]]>
</script>

<form id="UpdateGeo" method="get" action="updateGeocode.asp">
<input id="myInput" name="PostCode" style="text-transform:uppercase" />&nbsp;
<input type="checkbox"  onClick="theNext()">&nbsp;
<input type="submit" value="Update Database">
</form>

1 个答案:

答案 0 :(得分:1)

这是由UpdateGeo innerHTML修改引起的。 无论何时使用“innerHTML + =”语句,当前内部控件状态都将丢失并将恢复为原始状态(例如,以html中静态声明的状态)。

您应该不是通过字符串追加动态创建的元素,而是使用control.appendChild(),如下所示:

var container = document.getElementById('UpdateGeo');
var element = document.createElement('input');
element.setAttribute('type','hidden');
element.setAttribute('name','lat');
element.value = lat;
container.appendChild(element);

element = document.createElement('input');
element.setAttribute('type','hidden');
element.setAttribute('name','lng');
element.value = lng;
container.appendChild(element);

而不是

var dcHiddenOutput = '<input type="hidden" name="lat" value="' +lat+ '"><input type="hidden" name="lng" value="' +lng+ '">';
document.getElementById("UpdateGeo").innerHTML += dcHiddenOutput;