Web Analytics Made Easy -
StatCounter Clearable textbox - CodingForum

Announcement

Collapse
No announcement yet.

Clearable textbox

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Resolved 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; Aug 31, 2011, 10:39 PM.
    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
    ??
    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>
    Be yourself. No one else is as qualified.

    Comment


    • #3
      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

      Comment


      • #4
        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; Aug 31, 2011, 09:40 PM.
        Be yourself. No one else is as qualified.

        Comment


        • #5
          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

          Comment


          • #6
            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

            Comment

            Working...
            X