CODEWITHSUNDEEP
javascriptphphtmlcss
tyo
tyo

Reputation: 83

Make data appear on text input via button press

i have form like this:

enter image description here

and database like this:

id   tagname  
1    horor      
2    race

and so far i have code like this:

  <div class="form-group">
        <label>Tags:</label>
        <input data-role="tagsinput" type="text" name="tags" id="myBtn" class="form-control">
        @if ($errors->has('tags'))
  <span class="text-danger">{{ $errors->first('tags') }}</span>
        @endif
  </div>
  <div class="form-group">
  @foreach ($tags as $item)
  <button type="button" onclick="myFunction()" class="btn btn-secondary btn-sm">{{$item- 
  >tagname}}</button>
  @endforeach
  </div>

<script>
function myFunction() {
document.getElementById("myBtn").value = "{{$item->id}}";
}
</script>

my controller code

public function create()
{
    $tags = tag::select('id','tagname')->get();

    return view('artikel.create', compact('tags'));
}

what i trying to archive is if i select button below tags input so it will appear on tags input text bar of course it will not just add 1 value but can select multiple button and make it appears on that text input and automaticaly separate by , like this: enter image description here

.thnx for advance.

Upvotes: 0

Views: 438

Answers (1)

Flash Ang
Flash Ang

Reputation: 192

not using framwrok, use html javascript to show it work.

html :

<input type="text" name="tags" id="myBtn" class="form-control">

  <button type="button" onclick="myFunction(this)" class="btn btn-secondary btn-sm" value='horor'>horor</button>
  <button type="button" onclick="myFunction2(this)" class="btn btn-secondary btn-sm" value='race'>race</button>

<script>
function myFunction(me) {
    txt = document.getElementById("myBtn").value;

    if( txt == '' ) {
        document.getElementById("myBtn").value = me.value;
    } else {
        document.getElementById("myBtn").value += ',' + me.value;
    }
}

function myFunction2(me) {
    txt = document.getElementById("myBtn").value;

    // skip duplicate
    if( txt.search( me.value ) >= 0 ) {
        return;
    }
    
    if( txt == '' ) {
        document.getElementById("myBtn").value = me.value;
    } else {
        document.getElementById("myBtn").value += ',' + me.value;
    }
}
</script>

Upvotes: 1

Related Questions