在使用javascript将信息输入到输入字段时填充文本区域

Im trying to get values from a couple of inputs and pass them on to a text area outside the form without submitting the form at all, this is taking place on the same page. I'm using javascript to do this since I want the text area to populate as you are typing in the info to the inputs, since ill be using that text area as an address to then mark it on a map. below is part of the code needed to pass on the value of address to the text area, since I'm not a javascript guy im asking for help on the next part of code to display the value in the text area.

我试图从几个输入中获取值，并将它们传递到表单之外的文本区域，而不提交表单，这是在同一个页面上进行的。我使用javascript来实现这一点，因为我希望文本区域在输入信息的过程中填充，因为我将使用这个文本区域作为地址，然后在地图上标记它。下面是传递地址值到文本区域所需的代码的一部分，因为我不是一个在代码的下一部分请求帮助以显示文本区域中的值的javascript人员。

function getaddress() {
var direccion = document.getElementsByName("direccion").value;
var colonia = document.getElementsByName("colonia").value;
var ciudad = document.getElementsByName("ciudad").value;
var estado = document.getElementsByName("estado").value;
var pais = "Mexico";
var zip = document.getElementsByName("zip").value;
var address = direccion, colonia, ciudad, estado, pais, zip;
}

once the text area is filled with the values from the above function, I can then ad the ID address to get the text from it and display the marker on the map. the code for the map is below

一旦文本区域填充了上述函数的值，我就可以在ID地址中添加文本，并在地图上显示标记。下面是地图的代码。

function codeAddress() {

var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
     map: map,
     draggable: false,
     position: results[0].geometry.location
});

many thanks in advance to all you guys.

非常感谢你们。

3 个解决方案

#1

To my way of thinking, the simplest way to update the address field is to handle the keyup event on the form that contains the input elements in question:

按照我的思路，更新地址字段最简单的方法是处理表单中包含输入元素的keyup事件:

function getaddress() {
    var direccion = document.getElementById("direccion").value;
    var colonia = document.getElementById("colonia").value;
    var ciudad = document.getElementById("ciudad").value;
    var estado = document.getElementById("estado").value;
    var pais = "Mexico";
    var zip = document.getElementById("zip").value;
    document.getElementById("address").value =
          direccion + " " + colonia + " " + ciudad + "\n" +
          estado + " " + pais + " " + zip;
};

document.getElementById("addressForm").onkeyup = getaddress;

Demo: http://jsfiddle.net/P9ErU/

演示:http://jsfiddle.net/P9ErU/

Keyup events "bubble up" from the input where the user was typing to their containing element (and eventually all the way to the document), so you don't need to handle each input individually, especially when in this case you want to do the same thing no matter which input the user is typing in.

按键弹起事件“泡沫”从输入的用户输入他们的包含元素(和最终的文档),所以你不需要单独处理每个输入,特别是在这种情况下,你想做同样的事情无论哪个输入用户输入。

I started with the code you posted and made the following changes:

我从你发布的代码开始，做了如下修改:

Give the inputs an id and use document.getElementById() rather than getElementsByName() - the latter is intended to return (potentially) many elements (hence the plural "elements" in its name) and isn't really appropriate for what you're doing.
给输入一个id并使用document.getElementById()而不是getElementsByName()——后者的目的是返回(潜在的)许多元素(因此它的名称中包含复数“元素”)，并且不适合您正在做的事情。
Use the + operator (not ,) to concatenate the values together. Put some space and/or newline characters in too as shown in my code if appropriate (easy enough to remove that part if not appropriate).
使用+运算符(not，)将值连接在一起。如果合适的话，也可以在代码中添加一些空格和/或换行字符(如果不合适，可以很容易地删除这部分)。
Put the resulting text into the textarea.
将结果文本放入文本区域。
I assumed the form had an id "addressForm", but obviously you can change that as appropriate.
我假设表单有一个id“addressForm”，但显然您可以根据需要更改它。

3 个解决方案

#1

更多相关文章

随机推荐