How do I select element by attribute in jQuery?

Question

I am trying to get an element by its value attribute.

Here is the code I'm using -

jQuery(document).ready(function () {
    jQuery('form input#attribute2').on('focus', function () {
        var $this = jQuery(this);
        var $valueofbox = $this.val();
        var $form = $this.closest('form');
        console.log($form);
        console.log($valueofbox);
        var $samebox = $form.find('input.rowvar2[value=$valueofthis]');
        console.log($samebox);
    });
});

I am trying to get the input field with the value of currently selected input box. This code works when I use -

$form.find('input.rowvar2[value=XXL]');  //notice that the quotes are not required here and it still gets the desired element

instead of

$form.find('input.rowvar2[value=$valueofthis]');

or

$form.find('input.rowvar2[value=$this.val()]');

What can be done here to solve this problem? Is there a better way to do this?

HTML code -

<form role="form">
    <div class="col-xs-2">

        <label for="attribute2">Size</label>

        <input type="text" class="form-control" id="attribute2" value="XXL">
        <br>

        <input type="text" class="form-control" id="attribute2" value="M">
        <br>

        <input type="text" class="form-control" id="attribute2" value="XXXL">
        <br>

<div class="row">
<!-- some HTML -->
    <div class="col-xs-3">
        <input type="text" class="form-control rowvar1 e27a8e79-ba6a-449f-a64b-e94baf1a098d" placeholder="Blue" disabled="">
    </div>

    <div class="col-xs-2">

        <input type="text" class="form-control rowvar2" value="M" disabled="">
        <br>

        <input type="text" class="form-control rowvar2" value="L" disabled="">
        <br>

        <input type="text" class="form-control rowvar2" value="XL" disabled="">
        <br>
    </div>
</div>
<!-- some html -->

<div class="row">
<!-- some HTML -->
    <div class="col-xs-3">
        <input type="text" class="form-control rowvar1 e27a8e79-ba6a-449f-a64b-e94baf1a098d" placeholder="Blue" disabled="">
    </div>
    <div class="col-xs-2">

        <input type="text" class="form-control rowvar2" value="XL" disabled="">
        <br>

        <input type="text" class="form-control rowvar2" value="XXL" disabled="">
        <br>

        <input type="text" class="form-control rowvar2" value="XXXL" disabled="">
        <br>

        <input type="text" class="form-control rowvar2" value="5XL" disabled="">
        <br>
    </div>
</div>


  <button id="submittopost" type="Submit" class="btn btn-success pull-right">Publish Product</button>
</form>

Do you mean `$form.find('input.rowvar2[value='+$valueofbox+']');` ? — mplungjan, Aug 21 '16 at 12:11

score 0 · Accepted Answer · answered Aug 21 '16 at 12:11

0

I dont think there are any fancy string replacements in JS? Just concatenate manually

$form.find('input.rowvar2[value=' + $valueofbox + ']');

answered Aug 21 '16 at 12:11

Joseph Young

2,758
12
23

Yup. not really worth answering – mplungjan Aug 21 '16 at 12:12

Michael Durrant · Answer 2 · 2016-08-21T12:21:08.593

0

Try using:

$form.find("input.rowvar2[value=${valueofbox}]");

edited Aug 21 '16 at 12:21

answered Aug 21 '16 at 12:14

Michael Durrant

93,410
97
333
497

apart from the var being valueofbox, what kind of syntax is #{valueofthis} ? – mplungjan Aug 21 '16 at 12:16
There template literals in ES6, but you need to use backticks, not quotes http://stackoverflow.com/a/28088965/5699206 – Joseph Young Aug 21 '16 at 12:24
So like this? $form.find("input.rowvar2[value=\`${valueofbox}\`]"); – mplungjan Aug 21 '16 at 12:46

How do I select element by attribute in jQuery?

2 Answers2