无法提交带有按钮的表单来创建新用户

Question

我正在努力找出为什么我的按钮没有提交我的表单。

所以，

在我的索引中，我有这个按钮可以调用 "modal" 来创建一个新用户

<div class="relative" style="float: right; padding-right: 10px;">
        <a href="#" data-open="user-new" class="fi-plus">Adicionar Utilizador</a>
    </div>

</div>

@if (Auth::user()->RoleId == 4)
<div id="user-new" title="Novo utilizador" class="small reveal"
    data-reveal style="width: 100%">
    <h4 style="margin-bottom: 0">Novo utilizador</h4>
    <hr />

    @include('admin/users/create')

    <button class="close-button" data-close aria-label="Close reveal"
        type="button">
        <span aria-hidden="false">&times;</span>
    </button>
</div>
@endif

在创建模板中 (admin/users/create) 我有这个代码

<form class="form-horizontal" role="form" method="POST"
    action="{{ url('admin/users/new') }}" id="create_user_form">
    {!! csrf_field() !!}

    <div class="row">

        <div class="columns small-12 medium-6 large-5">

            <div class="dashboard-title">Dados Pessoais</div>

            <div class="data-container">

                <div class="row collapse">
                    <div class="small-3 columns header">
                        <b>Nome:</b>
                    </div>
                    <div class="small-9 columns end">
                        <input type="text" name="name" class="required"
                            requiredMessage="O campo 'Nome' não está preenchido" />
                    </div>
                </div>

                <div class="row collapse">
                    <div class="small-3 columns header">
                        <b>Utilizador:</b>
                    </div>
                    <div class="small-9 columns end">
                        <input type="text" name="username" class="required"
                            requiredMessage="O campo 'Utilizador' não está preenchido" />
                    </div>
                </div>

                <div class="row collapse">
                    <div class="small-3 columns header">
                        <b>Password:</b>
                    </div>
                    <div class="small-9 columns end">
                        <input type="password" name="password" class="required"
                            requiredMessage="O campo 'Password' não está preenchido" />
                    </div>
                </div>

                <div class="row collapse">
                    <div class="small-3 medium-12 large-3 columns header">
                        <b>Email:</b>
                    </div>
                    <div class="small-9 medium-12 large-9 columns end">
                        <input type="email" name="email" class="required"
                            requiredMessage="O campo 'Email' não está preenchido" />
                    </div>
                </div>

                <div class="row collapse">
                    <div class="small-3 medium-12 large-3 columns header">
                        <b>Nº Contribuinte:</b>
                    </div>
                    <div class="small-9 medium-12 large-9 columns end">
                        <input type="text" name="vatRegisterNumber" class="required"
                            requiredMessage="O campo 'Contribuinte' não está preenchido" />
                    </div>
                </div>

                <div class="row collapse">
                    <div class="small-3 medium-12 large-3 columns header">
                        <b>Tipo de Acesso:</b>
                    </div>
                    <div class="small-9 medium-12 large-9 columns end">
                        <select id="perfil" name="perfil">
                            <option value="produtor">Produtor</option>
                            <option value="cooperativa">Cooperativa</option>
                            <option value="tecnico">Técnico</option>
                            <option value="lacticoop">Lacticoop</option>
                        </select>
                    </div>
                </div>


            </div>
        </div>

        <div class="columns small-12 medium-6 large-5">

            <div class="dashboard-title">Dados de Contacto</div>

            <form id="change_contact" class="data-container">
                {!! csrf_field() !!}
                <div class="row collapse">
                    <div class="small-3 medium-12 large-3 columns header">
                        <b>Nome pessoa contacto:</b>
                    </div>
                    <div class="small-9 medium-12 large-9 columns end">
                        <input id="contact-name" type="text" name="contact-name"
                            class="required"
                            requiredMessage="O campo 'Nome contacto' não está preenchido" />
                    </div>
                </div>
                <div class="row collapse">
                    <div class="small-3 medium-12 large-3 columns header">
                        <b>Email:</b>
                    </div>
                    <div class="small-9 medium-12 large-9 columns end">
                        <input id="contact-mail" type="email" name="contact-mail"
                            class="required"
                            requiredMessage="O campo 'Email' não está preenchido" />
                    </div>
                </div>

                <div class="row collapse">
                    <div class="small-3 medium-12 large-3 columns header">
                        <b>Telefone:</b>
                    </div>
                    <div class="small-9 medium-12 large-9 columns end">
                        <input id="contact-phone" type="text" name="contact-phone"
                            class="required"
                            requiredMessage="O campo 'Telefone' não está preenchido" />
                    </div>
                </div>

                <div class="row collapse">
                    <div id="dvMessage" class="alert-container" style="display: none;"></div>
                </div>

            </form>
        </div>




    </div>

    <button class="button small round success" type="submit"
        onclick="return Utils.Validator.CheckForm('#user-new')">
        <i class="fi-mail"></i>&nbsp;Criar Inquérito
    </button>
    </div>
</form>

所以当我点击这个按钮时没有任何反应，utils.js 检查表单返回 true 所以我不明白为什么当我在填写所有字段后尝试创建用户时我没有被重定向到任何页面都不能创建新用户。

<button class="button small round success" type="submit"
        onclick="return Utils.Validator.CheckForm('#user-new')">
        <i class="fi-mail"></i>&nbsp;Criar Inquérito
    </button>

Answer 1

你的按钮应该在里面

<form>
<button class="button small round success" type="submit"
    onclick="return Utils.Validator.CheckForm('#user-new')">
    <i class="fi-mail"></i>&nbsp;Criar Inquérito
</button>
</form>

tag 或者您可以指定如下形式。

<button class="button small round success" type="submit" form="create_user_form"
    onclick="return Utils.Validator.CheckForm('#user-new')">
    <i class="fi-mail"></i>&nbsp;Criar Inquérito
</button>

但最佳做法是在表单标记内对按钮进行编码。

Answer 2

您有一个额外的 </form> 标记，导致在您到达按钮之前关闭表单。

改变

           <div class="row collapse">
                <div id="dvMessage" class="alert-container" style="display: none;"></div>
            </div>

        </form>
    </div>

至

               <div class="row collapse">
                    <div id="dvMessage" class="alert-container" style="display: none;"></div>
                </div>

        </div>

无法提交带有按钮的表单来创建新用户

can't submit form with button to create new user

php

laravel

laravel-5.2