form submit in laravel inside a bootstrap modal

Question

I want to Submit a form in laravel, the form is inside bootstrap modal. That form is an update form, i get the parameter(id) for update from the view(table),then i pass it to modal using data-id, but i dont know how to get it inside my action form in the modal, i tried jQuery but still error.

View :

  @foreach (App\Model\Users::all() as $users)
                <tr>
                  <td class="fname_{{ $users->id_user }}">{{ $users->nama_depan }}</td>
                  <td class="lname_{{ $users->id_user }}">{{ $users->nama_belakang }}</td>
                  <td class="emali_{{ $users->id_user }}">{{ $users->email_user }}</td>
                  <td class="nohp_{{ $users->id_user }}">{{ $users->no_hp }}</td>

                  <td>
                    <a href="#" data-target="#modaledit" data-toggle="modal" data-id="{{ $users->id_user }}"><i class="fa fa-pencil"></i></a>
                    <a href="#" data-href="{{ route('delete-user', $users->id_user) }}" data-toggle="modal" data-target="#modaldelete"><i class="fa fa-trash-o" style="margin-left:10px"></i></a>
                  </td>
                </tr>
                @endforeach

Modal :

<div id="modaledit" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Edit User</h4>
          </div>
          <form id="formedit", method="PUT", action="">
          <div class="modal-body">
            <div class="form-group">
              <label for="InputEmail">Email address</label>
                <input type="text" class="form-control"
                id="InputEmail" value="a"/>
            </div>
            <div class="form-group">
              <label for="InputFname">First Name</label>
                <input type="text" class="form-control"
                id="InputFname"/>
            </div>
            <div class="form-group">
              <label for="InputLname">Last Name</label>
                <input type="text" class="form-control"
                id="InputLname"/>
            </div>
            <div class="form-group">
              <label for="Inputnohp">Phone Number</label>
                <input type="text" class="form-control"
                id="Inputnohp"/>
            </div>

          </div>
          <div class="modal-footer">
            <button type="submit" id="submit-edit" class="btn btn-default">Submit</button>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </form>
          </div>
        </div>
      </div>
    </div>

jQuery :

  $('#modaledit').on('show.bs.modal', function(e) {
        var data_id = ($(e.relatedTarget).attr('data-id'));
        var email = $('.emali_'+data_id).text();
        var fname = $('.fname_'+data_id).text();
        var lname = $('.lname_'+data_id).text();
        var nohp = $('.nohp_'+data_id).text();
        $(this).find('#InputEmail').attr('value', email);
        $(this).find('#InputFname').attr('value', fname);
        $(this).find('#InputLname').attr('value', lname);
        $(this).find('#Inputnohp').attr('value', nohp);
        $(this).find('#submit-edit').on('click', function(){
          $('#formedit').attr('action', "{{ URL::to('allusers.update',data_id) }}");
        });

    });

Route :

Route::resource('allusers','AllUsersController');

Controller :

public function update(Request $request, $id_user)
{
    //
    $users = \App\Model\Users::findOrFail($id_user);
    //$users->update($request->all());
    $users->email_user = Input::get('InputEmail');
    $users->nama_depan = Input::get('InputFname');
    $users->nama_belakang = Input::get('InputLname');
    $users->no_hp = Input::get('Inputnohp');
    $users->save();
    return redirect()->route('all-users');

}

i updated my answer, my problem is i dont know how to set action on my form if it's inside the bootstrap modal, because i dont know how to get the parameter(id) to the modal — janotama
– janotama, Commented Feb 3, 2017 at 8:09

janotama · Accepted Answer · 2017-02-03 09:11:17Z

2

You can directly use .data() to get the ID. For the td's class, no need to post-fix with data, see below version :

Put {{ URL::route('allusers.update','') }} inside form's action, then;

HTML

@foreach (App\Model\Users::all() as $users)
   <tr>
       <td class="fname">{{ $users->nama_depan }}</td>
       <td class="lname">{{ $users->nama_belakang }}</td>
       <td class="emali">{{ $users->email_user }}</td>
       <td class="nohp">{{ $users->no_hp }}</td>
       <td>
           <a href="#" data-target="#modaledit" data-toggle="modal" data-id="{{ $users->id_user }}"><i class="fa fa-pencil"></i></a>
           <a href="#" data-href="{{ route('delete-user', $users->id_user) }}" data-toggle="modal" data-target="#modaldelete"><i class="fa fa-trash-o" style="margin-left:10px"></i></a>
       </td>
   </tr>
@endforeach

JS

$('#modaledit').on('show.bs.modal', function(e) {

    var $this = $(e.relatedTarget);
    var data_id = $this.data('id');
    var modal = $('#modaledit');

    var parentTr = $this.closest('tr');
    var email = parentTr.find('.emali').text();
    var fname = parentTr.find('.fname').text();
    var lname = parentTr.find('.lname').text();
    var nohp = parentTr.find('.nohp').text();

    // directly use .val() instead of .attr()
    modal.find('#InputEmail').val(email);
    modal.find('#InputFname').val(fname);
    modal.find('#InputLname').val(lname);
    modal.find('#Inputnohp').val(nohp);        
    modal.find('#formedit').attr('action', function (i,old) {
       return old + '/' + data_id;
    });

});

edited Feb 3, 2017 at 9:11

janotama

2078 silver badges19 bronze badges

answered Feb 3, 2017 at 7:22

Norlihazmey Ghazali

9,0701 gold badge26 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

janotama Over a year ago

thanks for the answer. But i get this error when opeing the page : Use of undefined constant data_id - assumed 'data_id' (View: C:\xampp\htdocs\testingform\resources\views\all-users.blade.php)

janotama Over a year ago

when i add single quote to data_id, i get this error when submitting the form : NotFoundHttpException in RouteCollection.php line 161: @Norlihazmey Ghazali

janotama Over a year ago

No errors, but the data not updated and my url become : localhost:8000/testingform/public/allusers/test1? (with (?) on the url). i added my controller and route on my question

Norlihazmey Ghazali Over a year ago

Try put {{ method_field('PUT') }} in between form tag, and change method to post inside <form method="POST" as you want the put request tho.

janotama Over a year ago

i put it and get : TokenMismatchException in VerifyCsrfToken.php line 67: then i put <input type="hidden" name="_token" value="{{ csrf_token() }}">, i can submit the form but no data changed :(

|

Collectives™ on Stack Overflow

form submit in laravel inside a bootstrap modal

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related