javascript - Laravel 表单按钮位于表单模型之外

Question

我在 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']) !!}

当按钮位于表单之外时，如何触发表单提交数据？目前，每当我单击按钮时，表单都不会提交数据。

谢谢!!

Answer 1

您可以使用 form.submit() 方法通过 JavaScript 提交表单。
在按钮上附加点击监听器以提交表单。

表格:

{!! 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();
    });
});