SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: innerHTML

  1. #1
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    innerHTML

    I have some javascript and php which I want to update a text field with but it doesn't work. It works fine if i use a div but not with an input box. Can it not be done with input boxes?

    Code HTML4Strict:
    <html>
            <head>
                    <title>Demo 1 - The Basic's</title>
                    <script type="text/javascript" src="engine.js"></script>        
            </head>
            <body>
                    <input type="text" id="contentdiv" size="10" />
                    <input type="button" onclick="ajax_do ('page1.php');" value="Get content" />
            </body>
    </html>
    this is the page1.php called by the button onclick event
    PHP Code:
    <?php

            
    // Google Maps API key
            //$key = '';
            //$url = 'http://maps.google.com/maps/geo?q='.urlencode($_POST['q']).'&key='.$key.'&output=csv';
            
    $url 'test.csv';
            
    $data explode(','file_get_contents($url));
            
    // Searched string
            //$location = $_POST['q'];
            
    $httpstatuscode $data[0];
            
    $accuracy $data[1];
            
    // Accuracy levels specified by Google. $accuracy_array[$accuracy] will return the readable version of the accuracy
            
    $accuracy_array = array(
                
    'Unknown location',
                
    'Country',
                
    'Region (state, province, prefecture, etc.)',
                
    'Sub-region (county, municipality, etc.)',
                
    'Town (city, village)',
                
    'Post code (zip code)',
                
    'Post code (zip code)',
                
    'Intersection',
                
    'Address'
            
    );
            
    // Comma separated latitude and longitude
            
    $lat $data[2];
            
    $long $data[3];

    ?>

    document.getElementById('contentdiv').innerHTML = '<?php echo $lat?>';
    and here is the js function
    Code JavaScript:
    // Get base url
    url = document.location.href;
    xend = url.lastIndexOf("/") + 1;
    var base_url = url.substring(0, xend);
     
    function ajax_do (url) {
            // Does URL begin with http?
            if (url.substring(0, 4) != 'http') {
                    url = base_url + url;
            }
     
            // Create new JS element
            var jsel = document.createElement('SCRIPT');
            jsel.type = 'text/javascript';
            jsel.src = url;
     
            // Append JS element (therefore executing the 'AJAX' call)
            document.body.appendChild (jsel);
    }

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    An input element has no inner html. perhaps updating the input value will help instead?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you know how i would do that? If not, I'll have to use a label instead if that will work

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Yes, you would use value instead of innerHTML

    Code javascript:
    //document.getElementById('contentdiv').innerHTML
    document.getElementById('contentdiv').value
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks Paul

    That worked fine but i need to add another input field that same as the first but i get this error

    unterminated string literal
    http://127.0.0.1/test/page1.php
    Line 4
    this is the updated code
    Code JavaScript:
    document.getElementById('s_lat').value = '<?php echo $lat; ?>';
     
    document.getElementById('s_long').value = '<?php echo $long; ?>';

    any idea what is causing this?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    Line 4 indicates that it's happening near the top of the php code.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Addict AdRock952's Avatar
    Join Date
    Aug 2006
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What is strane is that line 4 is a commented line

    What is output in the error is the content of $long then on a new line i get '. I am using Firebug which shows the error

    document.getElementById('s_lat').value = '42.73007';
    document.getElementById('s_long').value = '-73.69057
    ';

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    4 Thread(s)
    It seems that you'll have to trace the origin of $long - it seems to have more than just a number in there.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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