Question

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.

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

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.

Answer 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:

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/

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.

• 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).

• Put the resulting text into the textarea.

• I assumed the form had an id "addressForm", but obviously you can change that as appropriate.