Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    6
    Thanked 0 Times in 0 Posts

    java to take a form field content and make linked

    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 ?

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    11
    Thanked 568 Times in 561 Posts
    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"
    Code:
    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;
          };
       }
    };

  • Users who have thanked devnull69 for this post:

    fuzioneer (09-13-2011)

  • #3
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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

    PHP Code:
        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

    PHP Code:
        echo tep_draw_input_field('postcode', $account['entry_postcode'],'id="postcode"') . '&nbsp;' . 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>

  • #4
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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 ?

  • #5
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    6
    Thanked 0 Times in 0 Posts
    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 ?

  • #6
    New Coder
    Join Date
    Nov 2010
    Posts
    38
    Thanks
    6
    Thanked 0 Times in 0 Posts
    managed to get it to open in a new window by changing to

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

    PHP Code:
    location.href 'http://maps.google.co.uk/?q=' theValue
    still trying to suss out how to display the button all the time ?

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,885
    Thanks
    56
    Thanked 539 Times in 536 Posts
    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...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •