Add Text to span complex field by Jquery

Question

I want onclick event on <input> tag to display custom error in <span> placed tag just below it

I have many input readonly fields like,


<input class="form-control valid" id="OneOrder_line_items_0__Title" name="OneOrder.line_items[0].Title" onclick="clicked(this);" readonly="True" type="text" value="Burton T-Shirt" >

and span fields is (to display error like):


<span class="field-validation-valid" data-valmsg-for="OneOrder.line_items[0].Title" data-valmsg-replace="true"></span>

<name>, and, <data-valmsg-for>, are same in both tags

This is what i want to run

<script type="text/javascript">
    function clicked(item) {
        var id = $(item).attr("name");
        $('span[data-valmsg-for='+id+']').text('Your Text'); 
        //Here it is not working, if I hardcode it, $('span[data-valmsg-for="OneOrder.line_items[0].Title"]').text('Your Text'); then it works
    }
</script>

Can't understand what the problem is

The " around id is missing, try: $(`span[data-valmsg-for="${id}"]`).text('Your Text'); — Shahram Alemzadeh
– Shahram Alemzadeh, Commented Jul 23, 2024 at 19:59
Welcome to Stack Overflow. As was mentione,d you need to wrap your value in Double Quotes so that jQuery knows what you are looking for. Presently, it is unwrapped and will not be read right. — Twisty
– Twisty, Commented Jul 23, 2024 at 23:14

Twisty · Accepted Answer · 2024-07-23 23:19:09Z

1

Consider something like this:

function clicked(item) {
  var id = $(item).attr("name");
  $('span[data-valmsg-for="' + id + '"]').text('Your Text');
}

Notice the Double Quotes.

As you mentioned, this worked:

$('span[data-valmsg-for="OneOrder.line_items[0].Title"]').text('Your Text');

You can see how the ID, typed out, is wrapped by Quotes. The same has to be done for your script.

answered Jul 23, 2024 at 23:19

Twisty

31k2 gold badges30 silver badges50 bronze badges

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

Collectives™ on Stack Overflow

Add Text to span complex field by Jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related