表单模型外的Laravel表单按钮


Laravel form button outside of form model

我在laravel 5.1上建立了以下表单:

     {!! Form::model($user,['method'=>'PATCH', 'action' => ['ProfileController@update',$user->id]]) !!}
  <div class="section-content">
   <div class="next-card__section">
       <div class="next-grid next-grid--no-outside-padding">
            <div class="next-grid__cell">
               <label for="user_first_name">First name</label>
                {!! Form::text('first_name',null,[
                    'id' => 'user_first_name'
                ]) !!}
            </div>
            <div class="next-grid__cell">
                <label for="user_last_name">Last name</label>
                {!! Form::text('last_name',null,[
                    'id' => 'user_last_name'
                ]) !!}
            </div>
        </div>
        <div class="next-grid next-grid--no-outside-padding">
            <div class="next-grid__cell">
                <label for="user_email">Email address</label>
                <div class="editable">
                    {!! Form::text('email',null,[
                    'id' => 'user_last_name'
                    ]) !!}

                </div>
            </div>
            <div class="next-grid__cell">
                <label for="user_phone">Phone (optional)</label>
                {!! Form::text('phone',null,[
                   'id' => 'user_phone'
                   ]) !!}
            </div>
        </div>
        <div class="next-grid next-grid--no-outside-padding">
            <div class="next-grid__cell">
                <label for="user_url">Personal website address (optional)</label>
                {!! Form::text('url','http://',[
                   'id' => 'user_url'

                   ]) !!}
            </div>
        </div>
                <div class="next-grid next-grid--no-outside-padding">
                    <div class="next-grid__cell">
                        <label for="user_bio">Bio (optional)</label>
                        {!! Form::textarea('bio',null,[
                         'id' => 'user_bio'
                         ]) !!}
                    </div>
                </div>
                <div class="next-grid next-grid--no-outside-padding">
                    <div class="next-grid__cell">
                        <input name="user[receive_announcements]" type="hidden" value="0"><input type="checkbox" value="1" checked="checked" name="user[receive_announcements]" id="user_receive_announcements">
                        <label class="inline" for="user_receive_announcements">Please keep me up to date about important developments by email.</label>
                        <p class="type--subdued">We periodically send out important news about us to our users via email. We keep the email volume to an absolute minimum.</p>
                    </div>
                </div>
                <div class="next-grid next-grid--no-outside-padding">
                    <div class="next-grid__cell">
                        <div class="editable">
                            <div class="display-mode">
                                <a href="#" class="type--subdued" id="show-password">Change password</a>
                            </div>
                        <div id="password-form" class="hide">
                            <div class="next-grid next-grid--no-outside-padding">
                                <div class="next-grid__cell">
                                    <label for="user_password">New password</label>
                                    <input size="30" type="password" name="user[password]" id="user_password">
                                </div>
                                <div class="next-grid__cell">
                                    <label for="user_password_confirmation">Confirm new password</label>
                                    <input size="30" type="password" name="user[password_confirmation]" id="user_password_confirmation">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {!! Form::close() !!}

现在我的按钮位于Form::open和Form::close:

 {!! Form::button('Update', ['class'=>'btn js-btn-primary js-btn-loadable has-loading btn-primary']) !!}

当按钮位于表单外部时,我如何触发表单提交数据?目前,每当我点击按钮的形式是不提交数据。

谢谢! !

您可以使用javascript使用form.submit()方法提交表单。
附加"点击监听器"按钮以提交表单。

形式:

{!! Form::model($user,['id'=>'form1', 'method'=>'PATCH', 'action' => ['ProfileController@update',$user->id]]) !!}

按钮:

 {!! Form::button('Update', ['class'=>'btn js-btn-primary js-btn-loadable has-loading btn-primary', 'id'=>'form-submit-button']) !!}
jQuery:

$(function(){
  $('#form-submit-button').on('click', function(){
    $('#form1').submit();
  });
})

纯javascript:

document.addEventListener("DOMContentLoaded ", function(){
    document.getElementById('form-submit-button').addEventListener("DOMContentLoaded ", function(){
      document.getElementById("#form1").submit();
    });
});