title: livewire inline table edit form stops submitting any request to server when it's hidden and only shown when edit is clicked
body: <p>I am working on an inline component table edit functionality in Laravel livewire the form works fine when its shown as a regular table line but when I try to make it so the user gets the edit row when he clicks on edit the form stops submitting requests when clicking on submit .<br/>
  When I pull up the network chrome tool it shows that when submit is clicked no request is sent .<br>
  This is the blade of the component <br></p>
  <pre><code>&lt;div x-data=&quot;{ open: false }&quot;&gt;
      &lt;button @click=&quot;open = true&quot; class=&quot;bg-gray-900 hover:bg-gray-700 text-white font-bold mb-2 py-2 px-4 rounded&quot;&gt;
          Add product
      &lt;/button&gt;
      &lt;table class=&quot;min-w-full table-fixed text-center&quot;&gt;
          &lt;!-- This is the table header --&gt;
          &lt;thead class=&quot;justify-between&quot;&gt;
              &lt;tr class=&quot;bg-gray-900&quot;&gt;
                  &lt;th class=&quot;py-2  &quot;&gt;
                      &lt;span class=&quot;text-white&quot;&gt;&lt;/span&gt;
                  &lt;/th&gt;
                  &lt;th class=&quot;py-2&quot;&gt;
                      &lt;span class=&quot;text-white&quot;&gt;Name&lt;/span&gt;
                  &lt;/th&gt;
                  &lt;th class=&quot;py-2 &quot;&gt;
                      &lt;span class=&quot;text-white&quot;&gt;Quantity&lt;/span&gt;
                  &lt;/th&gt;
                  &lt;th class=&quot;py-2&quot;&gt;
                      &lt;span class=&quot;text-white&quot;&gt;Price&lt;/span&gt;
                  &lt;/th&gt;
                  &lt;th class=&quot;py-2 &quot;&gt;
                      &lt;span class=&quot;text-white&quot;&gt;Fav&lt;/span&gt;
                  &lt;/th&gt;
                  &lt;th class=&quot; py-2&quot;&gt;
                      &lt;span class=&quot;text-white&quot;&gt;Action&lt;/span&gt;
                  &lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody class=&quot;bg-gray-200&quot;&gt;
              &lt;!-- this is the ADD form that pops up when you click add product --&gt;
              &lt;form autocomplete=&quot;off&quot; wire:submit.prevent=&quot;formSubmit&quot; action=&quot;&quot; method=&quot;post&quot;&gt;
                  @csrf
                  &lt;div&gt;
                      &lt;tr class=&quot;bg-white border-4 border-gray-200 hover:bg-gray-100 &quot; x-show.transition.duration.500=&quot;open&quot; @click.away=&quot;open = !open&quot;&gt;
                          &lt;td class=&quot;px-5 py-2 flex flex-row items-center&quot;&gt;
                              &lt;img class=&quot;h-8 w-8 rounded-full object-cover &quot; src=&quot;https://randomuser.me/api/portraits/men/30.jpg&quot; alt=&quot;&quot; /&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type=&quot;text&quot; autocomplete=&quot;off&quot; wire:model.defer='name' name=&quot;name&quot; class=&quot;rounded h-6 w-40 border border-gray-900 focus:ring-1 focus:ring-gray-900 &quot;&gt;
                          &lt;/td&gt;
                          &lt;td class=&quot; py-2&quot;&gt;
                              &lt;input type=&quot;number&quot; autocomplete=&quot;off&quot; wire:model.defer='quantity' name=&quot;quantity&quot; class=&quot;rounded h-6 w-16 border border-gray-900 focus:ring-1 focus:ring-gray-900 &quot;&gt;
                          &lt;/td&gt;
                          &lt;td class=&quot; py-2&quot;&gt;
                              &lt;input type=&quot;number&quot; autocomplete=&quot;off&quot; wire:model.defer='price' name=&quot;price&quot; class=&quot;rounded h-6 w-16 border border-gray-900 focus:ring-1 focus:ring-gray-900 &quot;&gt;
                          &lt;/td&gt;
                          &lt;td class=&quot; py-2&quot;&gt;
                              &lt;input type=&quot;checkbox&quot; class=&quot; h-5 w-5 text-red-300 checked:outline-none &quot; checked&gt;
                          &lt;/td&gt;
                          &lt;td class=&quot; content-center&quot;&gt;
                              &lt;button @click.debounce.500=&quot;open = !open&quot; class=&quot;w-20 min-w-20 content-center bg-green-600 hover:bg-green-700 text-white font-bold px-4 rounded&quot;&gt;
                                  &lt;div wire:loading.remove wire:target=&quot;formsubmit&quot;&gt;
                                      save
                                  &lt;/div&gt;
                                  &lt;div wire:loading wire:target=&quot;formsubmit&quot;&gt;
                                      &lt;div class=&quot;animate-spin w-3  h-3 max-w-3 max-w-3 p-0 m-0  border-t-2 border-l-2 border-r-2  border-white rounded-full loader&quot;&gt;&lt;/div&gt;
                              &lt;/button&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
              @foreach ($products as $product)
                  @if ($product-&gt;id == $editedRow)
                      &lt;!-- this is the edit form --&gt;
                      &lt;form wire:submit.prevent=&quot;editSubmit&quot; method=&quot;POST&quot;&gt;
                          &lt;tr class=&quot;bg-white border-4 border-gray-200 hover:bg-gray-100&quot; @click.away=&quot;$wire.editedRow = null&quot;&gt;
                              &lt;td class=&quot;px-5 py-2 flex flex-row items-center&quot;&gt;
                                  &lt;img class=&quot;h-8 w-8 rounded-full object-cover &quot; src=&quot;https://randomuser.me/api/portraits/men/30.jpg&quot; alt=&quot;&quot; /&gt;
                              &lt;/td&gt;
                              &lt;td class=&quot; py-2&quot;&gt;
                                  &lt;input value=&quot;{{$editname}}&quot; wire:model=&quot;editname&quot; type=&quot;text&quot; class=&quot;rounded h-6 w-36 border border-gray-900 focus:ring-1 focus:ring-gray-900 &quot;&gt;
                              &lt;/td&gt;
                              &lt;td class=&quot; py-2&quot;&gt;
                                  &lt;input value=&quot;{{$editquantity}}&quot; wire:model=&quot;editquantity&quot; type=&quot;text&quot; class=&quot;rounded h-6 w-16 border border-gray-900 focus:ring-1 focus:ring-gray-900 &quot;&gt;
                              &lt;/td&gt;
                              &lt;td class=&quot; py-2&quot;&gt;
                                  &lt;input value=&quot;{{$editprice}}&quot; wire:model=&quot;editprice&quot; type=&quot;text&quot; class=&quot;rounded h-6 w-16 border border-gray-900 focus:ring-1 focus:ring-gray-900 &quot;&gt;
                              &lt;/td&gt;
                              &lt;td class=&quot; py-2&quot;&gt;&lt;/td&gt;
                              &lt;td&gt;
                                  &lt;button type=&quot;submit&quot; class=&quot;w-20 min-w-20 content-center bg-green-600 hover:bg-green-700 text-white font-bold px-4 rounded&quot;&gt;save&lt;/button&gt;
                              &lt;/td&gt;
                          &lt;/form&gt;
                      @else
                          &lt;!-- and finally this is the content of table  --&gt;
                          &lt;tr class=&quot;bg-white border-4 border-gray-200 hover:bg-gray-100&quot;&gt;
                              &lt;td class=&quot;px-5 py-2 flex flex-row items-center&quot;&gt;
                                  &lt;img class=&quot;h-8 w-8 rounded-full object-cover &quot; src=&quot;https://randomuser.me/api/portraits/men/30.jpg&quot; alt=&quot;&quot; /&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;span class=&quot;text-center ml-2 font-semibold&quot;&gt;{{$product-&gt;name}}&lt;/span&gt;
                              &lt;/td&gt;
                              &lt;td class=&quot;px-16 py-2&quot;&gt;
                                  &lt;span&gt;{{$product-&gt;quantity}}&lt;/span&gt;
                              &lt;/td&gt;
                              &lt;td class=&quot;px-16 py-2&quot;&gt;
                                  &lt;span&gt;{{$product-&gt;price}}&lt;/span&gt;
                              &lt;/td&gt;
                              &lt;td class=&quot; py-2&quot;&gt;
                                  &lt;button wire:click=&quot;changeHeart('{{$product-&gt;id}}')&quot; class=&quot;h-9 w-9 min-h-8 min-w-8 content-center rounded-md border border-transparent text focus:outline-none {{ $product-&gt;favourite ? 'bg-gray-300 hover:bg-gray-400' : 'bg-red-300 hover:bg-red-400' }}&quot;&gt;
                                      &lt;svg wire:loading.remove wire:target=&quot;changeHeart('{{$product-&gt;id}}')&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; class=&quot;m-auto text-center content-center h-5 w-5 {{ $product-&gt;favourite ? 'text-black' : 'text-white' }} &quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot;&gt;
                                          &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z&quot; /&gt;
                                      &lt;/svg&gt;
                                      &lt;div wire:loading wire:target=&quot;changeHeart('{{$product-&gt;id}}')&quot; class=&quot;animate-spin w-5 align-middle h-5 max-h-5 max-w-5   border-t-2 border-l-2 border-r-2 {{ $product-&gt;favourite ? ' border-black ' : ' border-white' }} rounded-full loader&quot;&gt;&lt;/div&gt;
                                  &lt;/button&gt;
                              &lt;/td&gt;
                              &lt;td class=&quot;px-16 py-2&quot;&gt;
                                  &lt;!-- when you click on this you set the editedRow variable to product id  --&gt;
                                  &lt;span class=&quot;text-blue-500 inline-block mr-1 cursor-pointer&quot;&gt;
                                      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; class=&quot;h-6 w-6&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot; wire:click='editRow({{$product-&gt;id}})'&gt;
                                          &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z&quot; /&gt;
                                      &lt;/svg&gt;
                                  &lt;/span&gt;
                                  &lt;span class=&quot;text-red-500 inline-block ml-1 cursor-pointer&quot;&gt;
                                      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; class=&quot;h-6 w-6&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke=&quot;currentColor&quot;&gt;
                                          &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; stroke-width=&quot;2&quot; d=&quot;M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z&quot; /&gt;
                                      &lt;/svg&gt;
                                  &lt;/span&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      @endif
                  @endforeach
              &lt;/div&gt;
          &lt;br&gt;
  </code></pre>
  <p>And this is the controller of it :<br></p>
  <pre><code>&lt;?php
  namespace App\Http\Livewire;
  
  use App\Models\Product;
  use Illuminate\Support\Facades\DB;
  use Livewire\Component;
  
  class ProductsTable extends Component {
  public $name;
  public $quantity;
  public $price;
  public $editname;
  public $editquantity;
  public $editprice;
  public $editedRow = null;
  
  public function formSubmit() {
      $product = new Product;
      $product-&gt;name = $this-&gt;name;
      $product-&gt;quantity = $this-&gt;quantity;
      $product-&gt;price = $this-&gt;price;
      $product-&gt;save();
      $this-&gt;empty();
  }
  public function empty() {
      $this-&gt;name = '';
      $this-&gt;quantity = '';
      $this-&gt;price = '';
  }
  
  public function editRow($id) {
      $product = Product::findorfail($id);
      $this-&gt;editedRow = $id;
      $this-&gt;editname = $product-&gt;name;
      $this-&gt;editquantity = $product-&gt;quantity;
      $this-&gt;editprice = $product-&gt;price;
  }
  public function editSubmit($id) {
      $product = Product::findorfail($id);
      $product-&gt;name = $this-&gt;name;
      $product-&gt;quantity = $this-&gt;quantity;
      $product-&gt;price = $this-&gt;price;
      $product-&gt;save();
      $this-&gt;empty();
  }
  public function render() {
      return view('livewire.products-table', [&quot;products&quot; =&gt; DB::table('products')-&gt;orderBy('name', 'desc')-&gt;paginate(9),]);
  }
  </code></pre>
  <p>}</p>
  <p>And as you can see here no request is sent when I click submit: <a href="https://imgur.com/oZZimsh" rel="nofollow noreferrer">https://imgur.com/oZZimsh</a><br>
  if you need any more info please ask for it I will be checking this post regularly<br>
  Thank you for your time.
  EDIT : i have solved this , what i did is i dropped the form way and just linked the input with variables in the component's controller with wire:model , although i dont know how safe it is since i didn't use csrf .</p>