Level 73
Something like this?
Nov 17, 2021
7
Level 4
Count input characters length with alpine
Hi, I creating a form with classic blade and I'm trying to find a way to count input characters length with alpine to show it under the input. I found solutions l but my probleme is that I'm passing data from an eloquent model Here is my code
<div class="w-full">
<label for="meta_titre" class="block font-bold text-base mb-1">Méta titre</label>
<input type="text" x-model="count" name="meta_titre" id="meta_titre"
class="p-2 mt-1 rounded w-full focus:outline-none border-b-2 focus:border-mtom-orange focus:border-b-2"
value="{{ isset($projet->meta_titre) ? $projet->meta_titre : old('meta_titre') }}">
@error('meta_titre')
<div class="text-base font-bold text-red-500">
{{ $message }}
</div>
@enderror
</div>
I'm sure there is simple way to do it... Can someone please help me with that ?
Level 4
@Tray2 Yes exactly. But how do I pass this isset($projet->meta_titre) ? $projet->meta_titre : old('meta_titre') into x-data="{content: ''"} ?
<div x-data="{
content: '',
limit: $el.dataset.limit,
get remaining() {
return this.limit - this.content.length
}
}" data-limit="100">
<textarea id="content" x-model="content"></textarea>
<p id="remaining">
You have <span x-text="remaining"></span> characters remaining.
</p>
</div>
Level 102
@santo_f just use blade syntax :)
<div x-data="{
content: '{{ isset($projet->meta_titre) ? $projet->meta_titre : old('meta_titre') }}',
limit: $el.dataset.limit,
get remaining() {
return this.limit - this.content.length
}
}" data-limit="100">
<textarea id="content" x-model="content"></textarea>
<p id="remaining">
You have <span x-text="remaining"></span> characters remaining.
</p>
</div>
Level 4
Hi @Sinnbeck, Perfect ! Thanks :) I didn't even try to make it that simple.
Level 102
@santo_f please mark the answer by tray2. He gave the working example. I only cleared up how to use it
2 likes
Level 73
@Sinnbeck Thank you my friend.
Level 102
@Tray2 anytime. You did the work
1 like
Please or to participate in this conversation.