CODEWITHSUNDEEP
javascriptjquery
Mina Hafzalla
Mina Hafzalla

Reputation: 2821

Replacing value of input only one time

I'm able to replace/remove a certain value of an input when a label is clicked, here is my code:

$("#labelid").on("click",function() {
    if($("#inputid").val('sometexthere'));
    {
    $("#inputid").val('');
    }
});

The code deletes the value sometexthere each time the label is clicked. I want to limit this to only once, so if the label is clicked for the first time it deletes the value and if it clicked for the second time, it does nothing (leave value as it is).

How can I do this? Answers would be greatly appreciated.

Upvotes: 0

Views: 732

Answers (5)

Eric Lease
Eric Lease

Reputation: 4194

You could use jQuery.off() after the link is clicked the first time. I think the placeholder is a nice idea, but I don't know if it accomplishes what you want, and if you need backwards compatibility you would need a shim to handle the placeholder property. I agree with the accepted answer if the detachment of the event handler is unconditional.

If detachment of the event handler is conditional, I think this is cleaner:

$("#labelid").on("click",function() {
    var $input = $("#inputid");

    if($input.val().length > 0) {
        $input.val('');
        $(this).off("click");
    }
});

Upvotes: 1

Moob
Moob

Reputation: 16184

In case you've been persuaded by the argument to use a placeholder instead here's an example implementation that includes a fallback for browsers that don't natively support HTML5 Placeholders (ahem <=IE9)...

$(function() {
    //test if placeholder is natively supported:
    function hasPlaceholder() {
        var test = document.createElement('input');
        return ('placeholder' in test);
    }
    //if placeholder is not natively supported initialise this method to replicate the behaviour
    if(!hasPlaceholder){
        $('[placeholder]').focus(function() {
            var $this = $(this);
            if ($this.val() == $this.attr('placeholder')) {
                $this.val('')
                     .removeClass('placeholder');
            }
        }).blur(function() {
            var $this = $(this);
            if ($this.val() == '' || $this.val() == $this.attr('placeholder')) {
                $this.addClass('placeholder')
                     .val($this.attr('placeholder'));
            }
        }).blur();
        //on submit, make sure we remove any fo placeholder values
        $('[placeholder]').parents('form').submit(function() {
            $(this).find('[placeholder]').each(function() {
                var $this = $(this);
                if ($this.val() == $this.attr('placeholder')) {
                    $this.val('');
                }
            })
        });
    }
});
/* You can style placeholders... */
input.placeholder {color:#66aaee;}
::-webkit-input-placeholder {color: #66aaee;}
:-moz-placeholder {color: #66aaee;}
::-moz-placeholder {color: #66aaee;}
:-ms-input-placeholder {color: #66aaee;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Label: <input name="inputname" id="inputid" placeholder="this is the placeholder" /></label>

Upvotes: 1

Krasimir
Krasimir

Reputation: 13529

In your code $("#inputid").val('sometexthere') is always true because what is happening there is setting a value to the field. The val method returns jQuery object so it is basically truthy.

One of the solutions indeed is the .one method which assigns the event listener only once. However, you may need to do other things on the click event. So I'll go with a flag:

var flag = true;
$("#labelid").on("click",function() {
    var input = $("#inputid");
    var current = input.val();
    if(current === 'sometexthere' && flag) {
      flag = false;
      input.val('');
    }
});

And by the way, consider the usage of the placeholder attribute.

Upvotes: 1

Shaunak D
Shaunak D

Reputation: 20636

Use .one() method.

Attach a handler to an event for the elements. The handler is executed at most once per element per event type.

$("#labelid").one("click",function() {
    if($("#inputid").val() === 'sometexthere')   // remove the ;
    {
        $("#inputid").val('');
    }
});

The val('...')in if($("#inputid").val('sometexthere')) is assigning the value, and not comparing - $("#inputid").val() === '...' .

Note : As j08691 suggests here if its just related to initial text/placeholder use <input placeholder="sometexthere"/>

Upvotes: 5

noobHere
noobHere

Reputation: 251

var click = false;
$("#labelid").on("click",function() { 
  if(!click){ 
    if($("#inputid").val('sometexthere'));
    {
           $("#inputid").val(''); 
    }
   click = true;
  }
});

this will work :)

Upvotes: 1

Related Questions