Laravel create form in dynamic tabs?-CodePudding

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 >
  @foreach ($user_types as $user)
    <button  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" >
    <div >
      <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 >
        <label for="user_name">name</label>
        <input type="text"  name="user_name" value="" size=40 required maxlength="100"/>
      </div>
      <button type="submit" name="submit" >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

CodePudding user response：

Use backticks and PHP block expressions

<div >
    @foreach ($user_types as $user)
        <button 
            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 }}" >
        <div >
            <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 >
                    <label for="user_name">name</label>
                    <input type="text"  name="user_name" value=""
                        size=40 required maxlength="100" />
                </div>
                <button type="submit" name="submit" >update</button>
            </form>
        </div>
    </div>
@endforeach

CodePudding user response：

Make sure the id of tabcontent and button onclick event is using laravel variable.
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 >
    @foreach ($user_types as $user)
    <button  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 }}" >
    <div >
        <form action="/" method="post" enctype="multipart/form-data">
            @csrf
            @method('POST')
            <input type="hidden" name="user_type_id" value="{{ $user->user_type_id }}">
            <div >
                <label for="user_name">name</label>
                <input type="text"  name="user_name" value="{{ $user->user_type_name }}" size=40 required maxlength="100" />
            </div>
            <button type="submit" name="submit" >update</button>
        </form>
    </div>
</div>
@endforeach