【问题标题】:form submit in laravel inside a bootstrap modal在引导模式内的 laravel 中提交表单
【发布时间】:2017-06-20 11:57:19
【问题描述】:

我想在 laravel 中提交一个表单,该表单在引导模式中。 该表单是一个更新表单,我从视图(表)获取用于更新的参数(id),然后我使用 data-id 将其传递给模态,但我不知道如何在模态中的操作表单中获取它,我尝试了 jQuery,但仍然出错。

查看:

  @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

模态:

<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::resource('allusers','AllUsersController');

控制器:

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');

}

【问题讨论】:

  • 您面临的具体问题是什么?
  • 我更新了我的答案,我的问题是我不知道如何在我的表单上设置操作,如果它在引导模式内,因为我不知道如何将参数(id)获取到模式跨度>

标签: javascript php jquery twitter-bootstrap laravel


【解决方案1】:

您可以直接使用.data() 获取ID。对于td的类,不需要用数据进行后修复,请看下面的版本:

然后将{{ URL::route('allusers.update','') }} 放入表单的操作中;

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;
    });

});

【讨论】:

  • 感谢您的回答。但我在打开页面时收到此错误:使用未定义的常量 data_id - 假定为“data_id”(查看:C:\xampp\htdocs\testingform\resources\views\all-users.blade.php)
  • 当我向 data_id 添加单引号时,我在提交表单时收到此错误:RouteCollection.php 第 161 行中的 NotFoundHttpException:@Norlihazmey Ghazali
  • 没有错误,但数据没有更新,我的网址变成:localhost:8000/testingform/public/allusers/test1? (在网址上带有(?))。我在我的问题上添加了我的控制器和路由
  • 尝试将{{ method_field('PUT') }} 放在表单标签之间,并更改方法以在&lt;form method="POST" 内发布您想要的放置请求。
  • 我把它放进去并得到:TokenMismatchException in VerifyCsrfToken.php line 67: 然后我把 ,我可以提交表单但没有数据更改:(
猜你喜欢
  • 1970-01-01
  • 2014-04-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-01-03
  • 2014-07-09
  • 1970-01-01
相关资源
最近更新 更多