Finding all input fields with a certain value using JQuery

Question

I have the following code that executes when a form submits:

$('input[value=enter highlight]').val('');

Essentially, it searches through the form for all text fields containing the value 'enter highlight' and removes that text. The problem is that when the HTML code for the text field is as follows:

<input type="text" value="enter highlight"/>

and the user manually changes this value in the form, JQuery still recognises the field's value as the original value that was set in the HTML code (i.e. 'enter highlight') and resets the field's value to blank, even though the user entered a different value into the field. Very unexpected behaviour.

Any idea what I need to do to make sure JQuery will take into account any changed values users entered into the text box before clearing the values?

Many thanks!

can you show your whole onsubmit code?

corroded
– corroded

2011-05-10 04:16:02 +00:00
Commented May 10, 2011 at 4:16 — corroded
– corroded, Commented May 10, 2011 at 4:16

Andrew Cooper · Accepted Answer · 2011-05-10 04:19:37Z

10

Not sure if this is the problem, but your JQuery selector should have quotes in it

$('input[value="enter highlight"]').val('');

failing that, try this:

$('input[value="enter highlight"]').each(function () {
    if ($(this).val() == "enter highlight") $(this).val('');
});

answered May 10, 2011 at 4:19

Andrew Cooper

32.7k5 gold badges86 silver badges124 bronze badges

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

1 Comment

Bug Magnet Over a year ago

Thanks, but I tried both with and without quotes, and JQuery still does not recognise the new value entered by the user.

Tom · Accepted Answer · 2011-05-10 04:23:18Z

2

I vaguely remember reading that the selectors work off the values in the original HTML source, so don't pick up changes to the attribute values made after the DOM has loaded.

Changing it to an explicit loop should work, though it's less concise:

$('input').each(function() { 
  if($(this).val()=="enter highlight") { 
    $(this).val(''); 
  } 
});

answered May 10, 2011 at 4:23

Tom

45k35 gold badges101 silver badges103 bronze badges

Comments

JohnP · Accepted Answer · 2011-05-10 04:24:22Z

2

The behavior you expect seems to only work on jQuery 1.2.6 or below (tested on fiddle).

All the other versions clear out the original value. This is most likely since [value=""] probably checks for the original property value rather than the current value.

I've setup a fiddle here that you can look at : http://jsfiddle.net/jomanlk/4PBTZ/ Just change the jquery version on it.

I suggest you use an each() call.

$('input:text').each(function(){
    if ($(this).val() == 'enter highlight')  {
        $(this).val('');
    }
});

answered May 10, 2011 at 4:24

JohnP

50k13 gold badges112 silver badges142 bronze badges

Collectives™ on Stack Overflow

Finding all input fields with a certain value using JQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related