Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
Hey Guys,
I'm trying to use https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/ for having typeahead + tagging. Unfortunately my HTML looks broken due to the fact that tagsinput is appearing on every form field. even the hidden ones.
My form in blade looks like:
<form method="post" action="{{ route('tasks.update', ['id' => $task->id]) }}" data-parsley-validate class="form-horizontal form-label-left">
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">@lang('tasks.name') <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" value="{{$task->name}}" id="name" name="name" class="form-control col-md-7 col-xs-12">
@if ($errors->has('name'))
<span class="help-block">{{ $errors->first('name') }}</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">@lang('tasks.content')</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" value="{{$task->content}}" id="content" name="content" class="form-control col-md-7 col-xs-12">
@if ($errors->has('email'))
<span class="help-block">{{ $errors->first('content') }}</span>
@endif
</div>
</div>
<div class="form-group{{ $errors->has('tag_ids') ? ' has-error' : '' }}">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="brand_id">@lang('tasks.tag')</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<input type="text" value="
@if(count($tags))
@foreach($tags as $tagsRow)
{{$tagsRow->name . ','}}
@endforeach
@endif
" data-role="tagsinput" id="tags" class="form-control">
@if ($errors->has('tag_ids'))
<span class="help-block">{{ $errors->first('tag_ids') }}</span>
@endif
</div>
</div>
<div class="ln_solid"></div>
<div class="form-group">
<div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
<input type="hidden" name="_token" value="{{ Session::token() }}">
<button type="submit" class="btn btn-success">@lang('general.form.save_changes')</button>
</div>
</div>
</form>
As you can see here: https://imgur.com/Y7lfWB2 All fields got tagged but only the 3rd one (tags) should have the tagging enabled. Furthermore even the hidden token is visible and some random fragments (triangles on the right) are being shown.
On https://stackoverflow.com/questions/34562587/bootstrap-tagsinput-applying-to-all-form-fields-not-displayed-correctly this issue is being discussed but I wouldn't say their "solution" is good due to splitting the form. It should work without.
I'm using
Any ideas?
I don't know anything about that package, but your code$('input').tagsinput({ would apply it to all input fields. What if you target a specific field?
<input id="tagthis" type="text" name="tags">
$('#tagthis').tagsinput({ // just target the "tagthis" id element
@Cronix , thx for the idea, but as we can find in its code:
/**
* Initialize tagsinput behaviour on inputs and selects which have
* data-role=tagsinput
*/
$(function() {
$("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
});
To be sure I tried your way but without a change.
But what I found out: even removing the function does not change anything?! (To be sure being in the correct file I added a marker. so this is correct)
do you have -data-role="tagsinput" ONLY on the one input that you want this to work on?
You're also assigning it to ALL inputs here (from your stackoverflow post)
$('input').tagsinput({
typeaheadjs: {
name: 'citynames',
displayKey: 'name',
valueKey: 'name',
source: citynames.ttAdapter()
}
});
So I don't think you need this:
$(function() {
$("input[data-role=tagsinput], select[multiple][data-role=tagsinput]").tagsinput();
});
The 2nd code is applying to to all inputs that have -data-role="tagsinput", and the first code is applying it to ALL input fields. Target just the field you need.
Try changing
$('input').tagsinput({
typeaheadjs: {
name: 'citynames',
displayKey: 'name',
valueKey: 'name',
source: citynames.ttAdapter()
}
});
to
$('input[data-role=tagsinput]').tagsinput({
typeaheadjs: {
name: 'citynames',
displayKey: 'name',
valueKey: 'name',
source: citynames.ttAdapter()
}
});
Again, thx very much. You gave me the correct thought!
But your exclamation:
The 2nd code is applying to to all inputs that have -data-role="tagsinput", and the first code is applying it to ALL input fields. Target just the field you need.
Is wrong: They are applying only on input with additional attribute "data-role=tagsinput".
But in the onsite initialisation was a mistake (as you suggest):
$('input').tagsinput({
typeaheadjs: {
name: 'tags',
displayKey: 'name',
valueKey: 'name',
source: tags.ttAdapter()
}
});
So, found it!
THX
*edit: ah, understood you meant your examples. So we are on the same level.
I love when you spend time helping someone, only to have them "solve" it themselves with the info you give them lol.
You wrote as I did so I could not see your 2nd in a row. Sry man. Changed it.
Please or to participate in this conversation.