Laravel create form in dynamic tabs?

mage 456 0
Viewed 34

So, I need to have a tab with user types. and inside every type there needs to be a form that creates a user of that type. Here is what I tried

<div class="tab">
  @foreach ($user_types as $user)
    <button class="tablinks" onclick="openForm(event, `{{ $user->user_type_name }}`)">{{ $user->user_type_name }}</button>
  @endforeach
</div>
@foreach ($user_types as $user)
  <div id= "$user->user_type_name" class="tabcontent">
    <div class="py-4 overflow-x-auto">
      <form action="{{ route('user.store') }}" method="post" enctype="multipart/form-data">
      @csrf
      @method('POST')
      <input type="hidden" name="user_type_id" value="{{ $user->user_type_id }}">
      <div class="form-group flex mb-4">
        <label for="user_name">name</label>
        <input type="text" class="block rounded py-1 ml-4 text-sm" name="user_name" value="" size=40 required maxlength="100"/>
      </div>
      <button type="submit" name="submit" class="btn btn-primary">update</button>
      </form>
    </div>    
  </div>
@endforeach

Javascript

<script>
    function openForm(evt, userName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(userName).style.display = "block";
        evt.currentTarget.className += " active";
    }
</script>

But it is not changing the form according to tab click. Also when I go to my route, it opens the forms of all tabs. I only want the first one opened.

Any help would be appreciated. Thanks

laravel-blade php laravel javascript
3 Answers

Use backticks and PHP block expressions

<div class="tab">
    @foreach ($user_types as $user)
        <button class="tablinks"
            onclick="openForm(event, `{{ $user->user_type_name }}`)">{{ $user->user_type_name }}</button>
    @endforeach
</div>
@foreach ($user_types as $user)
    <div id="{{ $user->user_type_name }}" class="tabcontent">
        <div class="py-4 overflow-x-auto">
            <form action="{{ route('user.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                @method('POST')
                <input type="hidden" name="user_type_id" value="{{ $user->user_type_id }}">
                <div class="form-group flex mb-4">
                    <label for="user_name">name</label>
                    <input type="text" class="block rounded py-1 ml-4 text-sm" name="user_name" value=""
                        size=40 required maxlength="100" />
                </div>
                <button type="submit" name="submit" class="btn btn-primary">update</button>
            </form>
        </div>
    </div>
@endforeach
JS TECH0
  1. Make sure the id of tabcontent and button onclick event is using laravel variable.
  2. You can use $loop inside @foreach to use the loop index to add hidden class to items that you don't want to display at init
<div class="tab">
    @foreach ($user_types as $user)
    <button class="tablinks" onclick="openForm(event, '{{ $user->user_type_id }}')">{{ $user->user_type_name}}</button>
    @endforeach
</div>
@foreach ($user_types as $user)
<div id="{{ $user->user_type_id }}" class="tabcontent {{ $loop->index !== 0 ? 'hidden': ''}}">
    <div class="py-4 overflow-x-auto">
        <form action="/" method="post" enctype="multipart/form-data">
            @csrf
            @method('POST')
            <input type="hidden" name="user_type_id" value="{{ $user->user_type_id }}">
            <div class="form-group flex mb-4">
                <label for="user_name">name</label>
                <input type="text" class="block rounded py-1 ml-4 text-sm" name="user_name" value="{{ $user->user_type_name }}" size=40 required maxlength="100" />
            </div>
            <button type="submit" name="submit" class="btn btn-primary">update</button>
        </form>
    </div>
</div>
@endforeach
justanotherpeter0

Please try this for show only the first tab open when user arrives in the page.

<div class="tab">
    @foreach ($user_types as $user)
        <button class="tablinks {{ $loop->index == 0 ? 'active': ''}}"
            onclick="openForm(event, `{{ $user->user_type_name }}`)">{{ $user->user_type_name }}</button>
    @endforeach
</div>
@foreach ($user_types as $user)
    <div id="{{ $user->user_type_name }}" class="tabcontent" {{ $loop->index == 0 ? 'style="display:block"': 'style="display:none"'}}>
        <div class="py-4 overflow-x-auto">
            <form action="{{ route('user.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                @method('POST')
                <input type="hidden" name="user_type_id" value="{{ $user->user_type_id }}">
                <div class="form-group flex mb-4">
                    <label for="user_name">name</label>
                    <input type="text" class="block rounded py-1 ml-4 text-sm" name="user_name" value=""
                        size=40 required maxlength="100" />
                </div>
                <button type="submit" name="submit" class="btn btn-primary">update</button>
            </form>
        </div>
    </div>
@endforeach
Delowar Hossen0
Related