SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,099
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    counter using div instead of form.

    I have an ajax form(s) going which doesn't have a form tag.

    I found a char counter that has a form tag. If the form tag is removed and replaced by a div tag, the script doesnt work

    this code was using myForm which I changed to myDiv and replaced the form tag with a div tag.

    Code:
    <div name="myDiv" id="myDiv">
    <textarea name="message1" wrap="physical" cols="28" rows="5"
    onKeyDown="textCounter(document.myDiv.message1,document.myDiv.remLen1,10)"
    onKeyUp="textCounter(document.myDiv.message1,document.myDiv.remLen1,10)"></textarea>
    <br>
    <input readonly type="text" name="remLen1" size="3" maxlength="3" value="10">
    The error is "object required". I tried getElementById("myDiv") also

    According to me this should work Lol.

    If someone could help and explain this I will be grateful.

    Thanks.
    What I lack in acuracy I make up for in misteaks

  2. #2
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    counting characters basically comes down to this:
    Code:
    <textarea id="example"></textarea>
    <div id="characters">0</div>
    
    <script>
    var addEvent = function() {
      if (window.addEventListener) {
        return function(el, type, fn) {
          el.addEventListener(type, fn, false);
        };
      } else if (window.attachEvent) {
        return function(el, type, fn) {
          var f = function() {
            fn.call(el, window.event);
          };
          el.attachEvent('on' + type, f);
        };
      }
    }();
    
    var chars = document.getElementById('characters');
    addEvent(document.getElementById('example'), 'keyup', function() {
      chars.innerHTML = this.value.length;
    });
    </script>

  3. #3
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,099
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks polvero.

    That works great, I will have a large number of text fields that need char counts, what I am trying to do is,
    Code:
    <textarea id="example1"></textarea>
    <div id="characters1">0</div>
    <script>
    var chars = document.getElementById('characters1');
    addEvent(document.getElementById('example1'), 'keyup', function() {
      chars.innerHTML = this.value.length;
    });
    </script>
    
    <textarea id="example2"></textarea>
    <div id="characters2">0</div>
    <script>
    var chars = document.getElementById('characters2');
    addEvent(document.getElementById('example2'), 'keyup', function() {
      chars.innerHTML = this.value.length;
    });
    </script>
    If var chars could be included in the function something like
    return function(el, type, char, fn) and called something like
    Code:
    addEvent(document.getElementById('example1'), 'keyup', document.getElementById('characters1'), function() {
    I do a lot with php and functions but am just not getting the js stuff.

    I really appreciate the help.

    Before posting this I just tried,
    Code:
    <textarea id="example1"></textarea>
    <div id="characters1">0</div>
    <script>
    var chars1 = document.getElementById('characters1');
    addEvent(document.getElementById('example1'), 'keyup', document.getElementById('characters1'), function() {
      chars1.innerHTML = this.value.length;
    });
    </script>
    
    <textarea id="example2"></textarea>
    <div id="characters2">0</div>
    <script>
    var chars2 = document.getElementById('characters2');
    addEvent(document.getElementById('example2'), 'keyup', function() {
      chars2.innerHTML = this.value.length;
    });
    I thought I had it by naming var chars1 and 2 and 2 works but one says object unsupported.

    Edit:



    If possible I would like to use my original code since even I can understand it.
    Code:
    <script language="JavaScript">
    function textCounter(field,cntfield,maxlimit) {
    cntfield.value = maxlimit - field.value.length;
    }
    </script>
    
    <div name="myDiv" id="myDiv">
    <textarea name="message1" wrap="physical" cols="28" rows="5"
    onKeyDown="textCounter(document.myDiv.message1,document.myDiv.remLen1,10)"
    onKeyUp="textCounter(document.myDiv.message1,document.myDiv.remLen1,10)"></textarea>
    <br>
    <input readonly type="text" name="remLen1" size="3" maxlength="3" value="10">
    characters left
    All it needs is to make myDiv work in place of myForm if possible.
    What I lack in acuracy I make up for in misteaks

  4. #4
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Keep the extra argument out of addEvent (you'll need that function for other purposes. What you want is another generic function to sit on top.

    Code:
    function get(el) {
      return document.getElementById(el);
    }
    function assignCharCount(textarea, counter) {
      var text = get(textarea);
      addEvent(text, 'keyup', function() {
        get(counter).innerHTML = text.value;
      });
    }
    Implement:
    Code:
    <textarea id="text-1"></textarea>
    <div id="counter-1">0</div>
    
    <textarea id="text-2"></textarea>
    <div id="counter-2">0</div>
    
    <script>
    assignCharCount('text-1', 'counter-1');
    assignCharCount('text-2', 'counter-2');
    </script>
    That would be the jist of it. However, challenge yourself to writing a looping mechanism that allows you to pass in an array of objects that pair up the two. Eg: Let this be your implementation (you can write the interface):

    Code:
    assignCharCount([
      { text: 'example-1', counter: 'counter-1' },
      { text: 'example-2', counter: 'counter-2' },
      { text: 'example-3', counter: 'counter-3' }
    ]);

  5. #5
    SitePoint Wizard lorenw's Avatar
    Join Date
    Feb 2005
    Location
    was rainy Oregon now sunny Florida
    Posts
    1,099
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Im getting the error.

    line 6 object expected.

    What I am doing is getting an xml feed from tv guide and building a form with php for each video entry. The title (text box) and description (textarea) need to display how many chars are in each so they can be edited before submitting the video to the database.

    There are 150 videos daily so each video needs to be submitted individually so the server doesn't have to download them all at one time which is why I used AJAX.

    It all works and for the life of me cannot get a char count without help.

    I can actually understand how your function works.

    var text = get(textarea); would be text-1 or 2 and calls the get function.

    I don't understand the error though.

    Just before var text = get(textarea); I put in an alert(textarea); and it had "text-1" which tells me it should be passing text-1 to the get function.
    What I lack in acuracy I make up for in misteaks

  6. #6
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I mentioned 'let this be your implementation':
    Code:
    assignCharCount([
      { text: 'example-1', counter: 'counter-1' },
      { text: 'example-2', counter: 'counter-2' },
      { text: 'example-3', counter: 'counter-3' }
    ]);
    The challenge was to write a function that supports that. Anyhow, it would look something like this:

    Code:
    function assignCharCount(items) {
      for ( var i=0, item; item=items[i]; i++) {
        var text = get(item.text);
        addEvent(text, 'keyup', function() {
          get(item.counter).innerHTML = text.value;
        });
      }
    }


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
  •