CODEWITHSUNDEEP
jquery
mike
mike

Reputation: 2770

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

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?

Upvotes: 0

Views: 9288

Answers (3)

js1568
js1568

Reputation: 7032

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

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

Upvotes: 2

Robert Koritnik
Robert Koritnik

Reputation: 105029

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.

Upvotes: 1

codes_occasionally
codes_occasionally

Reputation: 9566

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("");
    }
});

Upvotes: 5

Related Questions