SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do i clear a textbox by using php to echo javascript

    Hello,

    I dont know if this is the way to do it but i need to clear a text box
    For some reason it doesnt execute the function, the function is instead echoed to the screen;

    Here is my current code

    my javascript function in my index.php
    function ClearAnswerBox()
    {
    document.GetElementById("name").value = "";
    }

    and here is my php page that is accessed via ajax:

    <?php
    Header("content-type: application/x-javascript");
    echo "clearanswerbox()";
    $questionno++;
    echo $questionno;
    retrievequestions($questionno);
    ?>

    I need clearanswerbox to execute when that php file is read.

    Ben

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This might be less complicated than you're making it sound. Really, all you want is this:

    Code:
    function clearValue(el) {
      document.getElementById(el).value = '';
    }
    
    // can be run on any input element
    clearValue('example');
    This doesn't need to involve PHP at all, really.

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it does need to use php

    You see i check for a match on the mysql server with what is typed in the box
    and if there is a match then i clear the box.

    Since i cant clear the box from php i need to use javascript.
    Or am i make it sound more complicated.

    Ben

  4. #4
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    use a background request then (via AJAX). Here is a asyncRequest function I wrote a while back:

    Code:
    var asyncRequest = function() {
      function handleReadyState(o, callback) {
        if (o && o.readyState == 4 && o.status == 200) {
          if (callback) {
            callback(o);
          }
        }
      }
      var getXHR = function() {
        var http;
        try {
          http = new XMLHttpRequest;
            getXHR = function() {
              return new XMLHttpRequest;
            };
        }
        catch(e) {
          var msxml = [
            ‘MSXML2.XMLHTTP.3.0′,
            ‘MSXML2.XMLHTTP’,
            ‘Microsoft.XMLHTTP’
          ];
          for (var i=0, len = msxml.length; i < len; ++i) {
            try {
              http = new ActiveXObject(msxml[i]);
              getXHR = function() {
                return new ActiveXObject(msxml[i]);
              };
              break;
            }
            catch(e) {}
          }
        }
        return http;
      };
      return function(method, uri, callback, postData) {
        var http = getXHR();
        http.open(method, uri, true);
        handleReadyState(http, callback);
        http.send(postData || null);
        return http;
      };
    }();
    Create your file called "checkvalue.php" - that's where you can do your sql check etc. (i'm sure you know what's going on back there). Here's what I imagine it would look like:

    Code:
    <?php
    // checkvalue.php
    $val = $_GET['value'];
    $rows = select('SELECT * FROM my_table WHERE field="'.$val.'" LIMIT 1');
    $hasValue = false;
    if (mysql_num_rows($rows) > 0 ) {
      $hasValue = true;
    }
    
    if ($hasValue) {
      die('found');  
    } else {
      die('notfound');
    }
    ?>
    Your HTML/JavaScript would look something like this:

    Code:
    <form id="example-form" method="GET" action="/">
      <input id="example" type="text" />
      <input type="submit" value="Submit Form" />
    </form>
    <script>
    function get(el) {
      return document.getElementById(el);
    }
    get('example-form').onsubmit = function() {
      var el = get('example');
      var value = el.value;
      // now use asyncRequest function from above
      asyncRequest('GET', 'checkvalue.php?value=' + value, callback);
      return false; // prevent default action
    };
    function callback(o) {
      alert(o.responseText); // should be 'found' or 'notfound'
    }
    </script>


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
  •