java to take a form field content and make linked

[fuzioneer]

I have a form with a postcode field in it

I want to add a button or text link next to this field which if clicked on goes to the google maps url querying that postcode

i.e. if the postcode text in the field (form not submitted) was SW1A 1AA then without submitting that form there would be a button / link next to it which when clicked on went to "http://maps.google.co.uk/?q=SW1A1AA"

Pretty sure Java should be able to do this ?

[devnull69]

So you also want to remove spaces from inside the text box so that "SW1A 1AA" will become "SW1A1AA"?

So let's assume the text field has the id "postcode" and the button will have the id "postcodebutton"

document.getElementById('postcode').onchange = function() {
   var that = this;  // obtain reference to the text field
   if(!document.getElementById('postcodebutton')) {
      // add the button if it doesn't exist yet
      var newButton = document.createElement('input');
      newButton.type = 'button';
      newButton.value = 'View in GMaps';
      newButton.id = 'postcodebutton';
      that.parentNode.insertBefore(newButton, that.nextSibling);
      newButton.onclick = function() {
         // remove all spaces
         var theValue = that.value.replace(/\s/g, '');
         location.href = 'http://maps.google.co.uk/?q=' + theValue;
      };
   }
};

[fuzioneer]

I have tried to shoehorn this into my php code but it either echos out to screen (If i echo it) or does nothing if i treat it like html by escaping from php using ?>


i.e. here is the code segment

    echo tep_draw_input_field('postcode', $account['entry_postcode'],'id="postcode"') . ' ' . ENTRY_POST_CODE_TEXT;
echo "
document.getElementById('postcode').onchange = function() {
   var that = this;  // obtain reference to the text field
   if(!document.getElementById('postcodebutton')) {
      // add the button if it doesn't exist yet
      var newButton = document.createElement('input');
      newButton.type = 'button';
      newButton.value = 'View in GMaps';
      newButton.id = 'postcodebutton';
      that.parentNode.insertBefore(newButton, that.nextSibling);
      newButton.onclick = function() {
         // remove all spaces
         var theValue = that.value.replace(/\s/g, '');
         location.href = 'http://maps.google.co.uk/?q=' + theValue;
      };
   }
};
"; 
  }
?></td>
          </tr>

             <tr>
               <td class="main">&nbsp;<?php echo ENTRY_COUNTRY; ?></td>

or

    echo tep_draw_input_field('postcode', $account['entry_postcode'],'id="postcode"') . ' ' . ENTRY_POST_CODE_TEXT;
?>
document.getElementById('postcode').onchange = function() {
   var that = this;  // obtain reference to the text field
   if(!document.getElementById('postcodebutton')) {
      // add the button if it doesn't exist yet
      var newButton = document.createElement('input');
      newButton.type = 'button';
      newButton.value = 'View in GMaps';
      newButton.id = 'postcodebutton';
      that.parentNode.insertBefore(newButton, that.nextSibling);
      newButton.onclick = function() {
         // remove all spaces
         var theValue = that.value.replace(/\s/g, '');
         location.href = 'http://maps.google.co.uk/?q=' + theValue;
      };
   }
};
<?php 
  }
?></td>
          </tr>

             <tr>
               <td class="main">&nbsp;<?php echo ENTRY_COUNTRY; ?></td>

[fuzioneer]

sorry me being thick !!
needed to encapsulate in <script> tags of course

lol works perfectly. How do i change it to open in a new window ?

[fuzioneer]

oh and how do i change it so that I do not need to click away from the form entry for postcode in order to make the View in Gmaps button appear ?

[fuzioneer]

managed to get it to open in a new window by changing to

window.open('http://maps.google.co.uk/?q=' + theValue,'external');return false; 

instead of

location.href = 'http://maps.google.co.uk/?q=' + theValue; 

still trying to suss out how to display the button all the time ?

[xelawho]

is it necessary to create the button dynamically like that? It's kind of cool (and maybe I'm misreading the use of the word "add" in your first post), but if you want the button there all the time you can just mark it up in html...