0

Junior dev working on a website and got thrown by how to reference this element

<div class="form-group">
                  <label for="@id-name">Name</label>
                  <input id="@id-name" class="form-control" name="name" required type="text" max-length="70" value="{{$userBot->name ?? null}}">
</div>

I was adding the maximum length cap and wanted to create an alert when this limit was reached. I was expecting the solution to look something like this

$( '#@id-name' ).on('input', function() {
                                    if ($(this).val().length>70) {
                                        alert('you have reached the maximum characters for bot name');
                                    }
                                });

but, not entirely to my surprise, this doesn't seem to be able to get the element to reference, and I tried some variations between jquery and javascript and different "" positionings to no success. I know the site uses php, my assumption is this is a part of that language (php isn't my area of expertise, my role is mostly ux integrations like this alert)

I'm curious how more experienced developers would create a reference to an element with an @ in the id.

Amber Miller
  • 23
  • 5
  • 1
    I can't speak for PHP, but there's nothing special about `@` in an `id` in HTML, JavaScript, or jQuery. It's just another character. (It would be a pain to select with a CSS selector, which could be relevant, but...) – T.J. Crowder May 05 '22 at 15:49
  • This notation has nothing to do with native PHP. – Alex Howansky May 05 '22 at 16:23
  • Personally, I'd look at the *rendered* html to see if that's actually in the id, or if a pre-processor has replaced it with a variable. – freedomn-m May 05 '22 at 16:33
  • You should also (**always**) look in the console for errors, `$("#@id-name")` gives error `Syntax error, unrecognized expression: #@id-name` https://jsfiddle.net/st6bk250/ – freedomn-m May 05 '22 at 16:35
  • If you do actually have ` – freedomn-m May 05 '22 at 16:35
  • See https://api.jquery.com/category/selectors/ *To use any of the meta-characters ( such as* `!"#$%&'()*+,./:;<=>?@[\]^\`{|}~` *) as a literal part of a name, it must be escaped with with[sic] two backslashes: \\\.* – freedomn-m May 05 '22 at 16:38

0 Answers0