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 6 of 6
  1. #1
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts

    Clearable textbox

    Hello

    How am I able to add a a cross to the right of a textbox which once click it clears the text from the textbox, sort of like the way Google do it, I have been trying to do this for ages now and can't seem to find a way to do it.

    Any help welcome, thank you.

    - DJCMBear
    Last edited by DJCMBear; 09-01-2011 at 03:39 AM.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    ??
    Code:
    <input name="godzilla" /><img src="cross.jpg" onclick="document.forms[0].godzilla.value='';"/>
    Is that what you mean?

    Or even
    Code:
    <input name="mothra" /><a href="#" onclick="document.forms[0].mothra.value='';return false;">X</a>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Yes basically I need to have every text input with the clasname 'Calendar' to dynamically insert a cross at the right end of the textbox that only shows when there is text in the textbox and once clicked it clears the textbox. I so hope this makes sense as I can't really make it any clearer as it is hard to describe lol.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    Okay...*NOW* it works...
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function attachAll( ) 
    {
        var inps = document.getElementsByTagName("input");
        for ( var i = 0; i < inps.length; ++i )
        {
            var inp = inps[i];
            if ( inp.className == "Calendar" && inp.value != "" )
            {
                var image = document.createElement("img");
                image.src = "cross.gif";
                image.onclick = 
                    function( )
                    {
                          this.previousSibling.value = '';
                          this.style.display = "none";
                    };
                inp.parentNode.insertBefore( image, inp.nextSibling );
            }
        }
    }
    window.onload = attachAll;
    </script>
    </head>
    <body>
    <form>
        <input name="one" value="no clear" /><br/>
        <input name="two" class="Calendar" value="8/13/2011" /><br/>
        <input name="three" class="Calendar" value="" /><br/>
        <input name="four" class="Calendar" value="zamboni" /><br/>
    </form>
    </body>
    </html>
    Last edited by Old Pedant; 09-01-2011 at 02:40 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Thanks, I am almost done with my edits and I will post back with the code for you to test out
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #6
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Here you go a fully working example of what I wanted, Thanks bro for the head start

    Code:
    <!DOCTPYE html>
    <html>
    <head>
    <title>Calendar Textbox Clearable</title>
    <script type="text/javascript">
    (function ($) {
        "use strict";
        $.Calendar = {
            image: "http:\/\/viralpatel.net\/blogs\/demo\/jquery\/clearable-textboxes\/close-button.png",
            init: function () {
                var i, inps = $.document.getElementsByTagName("input");
                for (i = 0; i < inps.length;) {
                    this.addImage(inps[i], i).addEvents(inps[i], i);
                    i = i + 1;
                }
            },
            addEvents: function (inp, i) {
                var that = this;
                inp.onkeydown = function () { that.addImage(inp, i); };
                inp.onkeyup   = function () { that.addImage(inp, i); };
                return (this);
            },
            addImage: function (inp, i) {
                var id    = 'CalendarClose_' + (i + 1),
                    image = $.document.createElement("a"),
                    check = $.document.getElementById(id);
                if (inp.className === "Calendar" && inp.value !== "" && !check) {
                    image.style.background = "url(" + this.image + ") no-repeat";
                    image.style.fontSize   = '8pt';
                    image.style.padding    = '0 6px 0 6px';
                    image.style.margin     = '-18px';
                    image.style.cursor     = 'pointer';
                    image.id               = id;
                    image.onclick          = function () {
                        this.previousSibling.value = '';
                        this.parentNode.removeChild(this);
                    };
                    inp.parentNode.insertBefore(image, inp.nextSibling);
                }
                inp.style.padding = '0 15px 0 0';
                return (this);
            }
        };
    }(window));
    
    window.onload = function () {
        Calendar.init();
    };
    </script>
    </head>
    <body>
    <form>
        <input name="one" value="no clear" /><br/>
        <input name="two" class="Calendar" value="8/13/2011" /><br/>
        <input name="three" class="Calendar" value="" /><br/>
        <input name="four" class="Calendar" value="zamboni" /><br/>
    </form>
    </body>
    </html>
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P


  •  

    LinkBacks (?)


    Posting Permissions

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