Why cant I input data into the <input type="text"> inside InfoWindow (Google Map)

64 views Asked by At

I have this code below to input text in HTML input type="text", so weird because I cant input data in the second input type="text". Please see the image below.

NOTE: The html code below was loaded by a WebView.

Code:

if(window.XMLHttpRequest){
   info.setContent("<p style='color:black; font-size:15px;'>Loading...<p>");
   xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange =  function(){
   if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
       var address = JSON.parse(xmlhttp.responseText);
       if(address.results){
           addresstext = address.results[0].formatted_address;
           var loctitle = "<p style='font-size:13px; font-weight: bold; padding-bottom: 5px'>Location</p>";
           var loctext = "<p style='font-size:13px;'>"+addresstext+"<p>";
           var infotitle = "<p style='font-size:13px; font-weight: bold; padding-top: 10px; padding-bottom: 5px'>Additional Info</p>";
           var label1 = "<label style='font-size:13px;'>Blk No / Lot No : <label>";
           var label2 = "<br><label style='font-size:13px;'>Building Name : <label>";
           var blkno = "<input type='text'></input>";
           var bldng = "<input type='text'></input>";
           info.setContent(loctitle + loctext + infotitle + label1 + blkno + label2 + bldng);
           info.open(map,marker);
        }
     }
  }
 xmlhttp.open("GET","http://maps.googleapis.com/maps/api/geocode/json?latlng="+location+"&sensor=true",true);
 xmlhttp.send();

Image:

enter image description here

Everytime I made an input to that textfield, it will just go back to the first textfield!

1

There are 1 answers

0
Sergey Grinev On
  1. You miss slash in closing tag </label>, try next:

    var label1 = "<label style='font-size:13px;'>Blk No / Lot No : </label>";
    var label2 = "<br><label style='font-size:13px;'>Building Name : </label>";
    
  2. Give your input tags an id:

    <input id='blkno' />
    <input id='buildingname' />