表单模型之外的 Laravel 表单按钮答案

【问题标题】：Laravel form button outside of form model表单模型之外的 Laravel 表单按钮
【发布时间】：2015-12-15 01:34:45
【问题描述】：

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

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

谢谢！！

【问题讨论】：

你为什么要那个？
@aldrin27 由于 css 样式。我可以将按钮放在表单内，但必须修复我的 css
如果你把它放在外面，你必须使用 AJAX。

标签： javascript php forms laravel-5 laravel-5.1

【解决方案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();
    });
});

【讨论】：