jQuerys .val() doesnt set the bootstrap-input-value

Question

I am searching for a while now with no results so I decided to ask you guys. :)

I have some Bootstrap-inputs like:

<input class='form-control' id='start_name' />
<input class='form-control' id='end_name' />

Normaly I would select data like

var myValue = $('#start_name').val();

The Problem I have is, I want to select an element containing a specified string that gets set before like:

$('#start_name').val('foobar');

Obviously .val() not sets the value of the inputfield. I have to extra add a line like

$('#start_name').attr('value', 'foobar');

or combine it like

$('#start_name').val('foobar').attr('value', 'foobar');

The actuall code I want to use to select the relevant element and empty it is:

$("input[value='" + theSpecifiedValue + "']").val('');

(select Input from X inputs that contains the string)

But since I use bootstrap I have to explicit have to set the value with .attr()

Is there some im missing or is this the only way to do it ?

Here is a Fiddle

just select an element containing a specified string then empty it ?? — Shady Alset
– Shady Alset, Commented May 14, 2016 at 15:20
@ShadyAlset Yes. Actually its a canvas element map where a user can select a drawn node by clicking into the map. This will fill in a value into a input-field. when he selects it again, the input-field should be emptyed. since there are 2 inputs , the script should check in which one the selected nodename appears and empty it than. Of course with less code as possible :) — Dwza
– Dwza, Commented May 14, 2016 at 15:46
Thanks for explaining, refer my answer i hope it's what you need. — Shady Alset
– Shady Alset, Commented May 14, 2016 at 15:56
sorry, no its not :) i want to select all inputs (dont know how many it will be later on) and if there is one containing the searched string, it should remove it from there... there is a nother input that contains the string as well, but this come from my hover function and actually has non to do with my question... I can denie recognizing this input by using the :not() selector. — Dwza
– Dwza, Commented May 14, 2016 at 16:01

Pavan Kumar Jorrigala · Accepted Answer · 2016-05-17 16:27:55Z

2

+50

if you use $('#start_name').val('here') and $('#start_name').prop('value','here') is assigning the value to this.value

$('#start_name').val(); // here

and to search with value
```
$('body input').filter(function() { return this.value == 'here' }).val('gone');
```
$('#start_name').attr('value', 'here1'); is setting the value in this.attributes

$('#start_name').attr('value'); // here1

and to search with value
```
$("body").find( "input[value='here1']" )
```

answered May 17, 2016 at 16:27

Pavan Kumar Jorrigala

3,08518 silver badges29 bronze badges

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

1 Comment

Dwza Over a year ago

I think the first solution is what im searching for. actually the second one is what i'm doing at the moment. But I have to set the view as well and not only the attribute.

Paul · Accepted Answer · 2016-05-17 14:46:51Z

1

Bit of a roundabout way, but we can do

$($.grep($("body").find("input"),function(e,i){ return e.value === myValue })).val('gone');

jQuery selectors use the literal HTML to select. Setting a value with .val() sets the html object's property "value". It does not set change the literal text in the HTML, which is what jQuery is using with its selector. So instead we grab all inputs and return a list of items where the property "value" matches our search string. Instead of using grep, you could use a for loop, map, etc, and probably make the lookup faster.

answered May 17, 2016 at 14:46

Paul

6464 silver badges13 bronze badges

1 Comment

Dwza Over a year ago

your solution is correct, but Pavans solution is a bit shorter. Actully the same, but the used jquery looks a bit better :) still a +1 from here and I hope all people who read this post will vote this up as well.

vartika · Accepted Answer · 2016-05-17 13:44:56Z

-1

Try

 $(function () {
        $("body").find("input[value='" + theSpecifiedValue + "']").val('');
 });

answered May 17, 2016 at 13:44

vartika

4842 silver badges12 bronze badges

1 Comment

Dwza Over a year ago

sorry, same result like using $("input[value='" + theSpecifiedValue + "']").val(''); i just added a fiddle :)

Collectives™ on Stack Overflow

jQuerys .val() doesnt set the bootstrap-input-value

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related