Question

我正在努力找出为什么我的按钮未提交表单的原因。

所以

在索引中，我有一个按钮来调用“模式”来创建新用户

<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

在创建模板（管理员/用户/创建）中，我有此代码

<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>标签，导致在您点击按钮之前关闭了表单。

更改

           <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>

Answer 2

您的按钮应位于

内

<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>

标签，或者您可以指定如下形式。

<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>

但是最佳实践是在form标签内对按钮进行编码。

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

2 个答案: