Ajax loaded form sends empty get request

Question

I am using laravel, loading table with forms using ajax The problem is when i send GET to /remove, request is empty

   http://localhost:3000/remove?

if i dont call for renderTable() and just include table view requests performs ok

http://localhost:3000/remove?iddel=98

So the question is why the ajax loaded forms doesn't send correct request

js for table load

function renderTable() {
  var $request = $.get('/table'); // make request
  var $container = $('.table-row');

  $container.addClass('loading'); // add loading class (optional)

  $request.done(function(data) { // success
    $container.html(data.html);
  });
  $request.always(function() {
    $container.removeClass('loading');
  });
}
renderTable();

routes

 Route::get('table', 'HomeController@table');
 Route::get('remove', "RemoveEntryController@store");

RemoveEntryController

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class RemoveEntryController extends Controller
{
 public function store(Request $request){
    $r_id = $request->input('iddel');
    DB::table('users')->where('id', '=', $r_id)->delete();
 }
}

table view

<span class="overlay"><span class="loader-img"></span></span>
<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col" width="5%">#</th>
      <th scope="col" width="25%">First</th>
      <th scope="col" width="25%">Last</th>
      <th scope="col" width="25%">Handle</th>
      <th scope="col" width="20%">Action</th>
    </tr>
  </thead>
  <tbody>
    @foreach ($users as $user)
    <form action="/remove" method="GET" id="rem_form_{{ $loop->index }}">
        <input type="hidden" value="{{ $user->id }}" name="iddel">
        <tr>
            <th scope="row">{{ $user->id }}</th>
            <td>{{ $user->name }}</td>
            <td>{{ $user->last_name }}</td>
            <td>{{ $user->login }}</td>
            <td>
                <div class="container">
                    <div class="row">
                        <button type="button" class="btn btn-info col-6">Edit</button>
                        <button type="submit" class="btn btn-danger col-4 offset-2" form="rem_form_{{ $loop->index }}">X</button>
                    </div>
                </div>
            </td>
        </tr>
    </form>
    @endforeach

  </tbody>
</table>

home page

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <link rel="stylesheet" href="css/app.css">
        <title>Laravel</title>

        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css"> 
    </head>
    <body>
        <section class="main-container">
            <div class="container logo-container">
                <div class="row">
                    <div class="logo"></div>
                </div>
            </div>
        <div class="container form-container">
            <div class="row form-row">
                <form action="/add" method="POST" id="add_form" class="add-input">
                    <div class="container">
                        <div class="row">
                    <div class="col-4">
                        <input type="text" class="form-control" placeholder="First name" name="name">
                    </div>
                    <div class="col-3">
                        <input type="text" class="form-control" placeholder="Last name" name="last_name">
                    </div>
                    <div class="col-3">
                        <input type="text" class="form-control" placeholder="login" name="login">
                    </div>
                    <button type="submit" form="add_form" class="btn btn-success col-2">ADD</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="container">
            <div class="row table-row loadingg">
               @include('table')
            </div>
        </div>
        </section>
        <script src="js/app.js"></script>
    </body>
</html>

Answer 1

Probably really bad answer but its the only way i could make it work
i've placed a hidden form in the bottom of my homepage below the table

<div class="container">
        <div class="row table-row loadingg">
           @include('table')
        </div>
        <form action="/remove" id="hidden" name="real_rem">
            <input type="hidden" value="" name="iddel" id="real_input">
        </form>
    </div>

changed the button type in load table from submit to button
and made a click listener look like this

  jQuery(document).on('click', ".btn-danger",function(e){
     //e.preventDefault();
    //e.stopImmediatePropagation();
    var fakeForm = jQuery('#'+jQuery(this).attr('form'))
    var realForm = jQuery('#hidden');
    var realInput = jQuery('#real_input');
    var fakeInput = jQuery('#fake_input');
    realInput.attr('value',fakeInput.attr('value'));
    console.log(realInput.attr('value'));

   jQuery.ajax({
        type     : "GET",
        cache    : false,
        url      : fakeForm.attr('action'),
        data     : realForm.serialize(),
        success  : function(data) {
            jQuery('html').trigger( "form:removed" );
        }
    });
});

so basically i am taking value from ajax loaded input and inserting it to usually loaded input and submitting it
I am pretty sure there's better way to do this, i would be very grateful if you share it here

Ajax loaded form sends empty get request

Question

1 answers

solution1
0 ACCPTED 2018-02-10 21:07:02

Ajax loaded form sends empty get request

Question

1 answers

solution1 0 ACCPTED 2018-02-10 21:07:02

solution1
0 ACCPTED 2018-02-10 21:07:02