How do I check and replace a value if a input contains a certain string using jquery?

Question

I'm trying to clear the value of a input field if it contains a certain value.

$('#registerajax_email:contains("yahoo.com")').text(function(){
$('#registerajax_email').val('');     
});

What am I doing wrong?

Are you asking to "clear the value of an input field if it contains a certain value", or are you really looking to "clear the value of an input whenever it contains a certain value?" You asked the first, but just about everyone seems to think you mean the second. — BlueRaja - Danny Pflughoeft
– BlueRaja - Danny Pflughoeft, Commented Nov 22, 2010 at 16:16
I will be checking on pageload, not when the user is changing the field. — mike
– mike, Commented Nov 22, 2010 at 16:19

codes_occasionally · Accepted Answer · 2010-11-22 16:18:44Z

5

The problem, I think, is that the value of an input field is contained inside the value attribute, not in the element's contents. You need an attribute selector.

Try this:

$('#registerajax_email[value*="yahoo.com"]').val('');

which uses the Attribute Contains Selector

This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the selector's string appears anywhere within the element's attribute value.

The selector you were using (the :contains() selector) does not look at element attributes:

The matching text can appear directly within the selected element, in any of that element's descendants, or a combination thereof.

However, since you're targeting the element by ID, you really don't need to use an attribute selector at all. Most likely this code should be contained inside an event, as Robert Koritnik suggested, and you can just check the string contains using a simple indexOf:

// Register event onBlur (you could also use change, or whatever event suited the situation)
$('#registerajax_email').blur(function() {
    // Does value contain yahoo.com?
    if ($(this).val().indexOf("yahoo.com") != -1)
    {
        // clear the value
        $(this).val("");
    }
});

edited Nov 22, 2010 at 16:18

answered Nov 22, 2010 at 16:06

codes_occasionally

9,5869 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

410 Over a year ago

I think this is a lot better than using a regular expression. It seems simpler.

js1568 · Accepted Answer · 2011-04-20 16:11:04Z

2

Use an appropriate event handler such as .change() or .blur() or .load()

$('#registerajax_email[val*="yahoo.com"]').load(function() {
   $(this).val('');
});

edited Apr 20, 2011 at 16:11

answered Nov 22, 2010 at 16:09

js1568

7,0322 gold badges30 silver badges47 bronze badges

7 Comments

codes_occasionally Over a year ago

This will only register the event if the input element contains the "yahoo.com" string on load.

js1568 Over a year ago

Works as specified-- "I will be checking on pageload, not when the user is changing the field."

BlueRaja - Danny Pflughoeft Over a year ago

I was the downvoter, and at the time it did not work as specified, nor the way you intended it to. I'll remove the downvote now though...

codes_occasionally Over a year ago

@js1568: I didn't downvote before but now I'm going to. Sorry, but what is the purpose of using the load function? Doesn't the load function use AJAX to "get" the contents of a url and load it into the jQuery set?

js1568 Over a year ago

@Pandincus .load() is actually two different functions. I use it in this context: api.jquery.com/load-event You are confusing it with this: api.jquery.com/load "Note: The event handling suite also has a method named .load(). Which one is fired depends on the set of arguments passed."

|

Robert Koritnik · Accepted Answer · 2010-11-22 16:28:14Z

1

Page load functionality

or: doing it only once in page lifecycle

When you want to clear an input box on page load if it contains a certain value. Then check whether your input has a certain value:

$(function(){
    $('#registerajax_email[value*="yahoo.com"]').val('');
});

or even better, since it's an email

$(function(){
    $('#registerajax_email[value$="yahoo.com"]').val('');
});

* means contains, $ means ends.

User filling-in data

or: checking it every time after user enters something in the input

This input value is probably related to the user entering an email address. So the main problem with your code is: when your call jQuery function, your input doesn't contain the required value. You have to attach to blur event to check for the value.

$(function(){
    $("#registerajax_email").blur(function(e){
        var context = $(this); // store it because it's used multiple times
        if (/yahoo\.com/i.test(context.val()))
        {
            context.val("");
        }
    });
});

Beware of the regular expression being used. because it's easier to check whether your input contains the required string.

edited Nov 22, 2010 at 16:28

answered Nov 22, 2010 at 16:05

Robert Koritnik

105k57 gold badges286 silver badges415 bronze badges

1 Comment

Buggabill Over a year ago

Actually, the blur event might be a bit better for this.

Collectives™ on Stack Overflow

How do I check and replace a value if a input contains a certain string using jquery?

3 Answers 3

1 Comment

7 Comments

Page load functionality

User filling-in data

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

Page load functionality

User filling-in data

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related