Question

如果我在表单中写了一个<button type="submit" ..>，则在按下按钮后会提交表单。

现在我想要，但按钮不是直接的孩子，但不起作用

<div class="form-component">
    <div class="form-header">
        <!-- ... -->
    </div>
    <div class="form-content">
        <form method="post">
            <div class="form-element"> <!-- ... --></div>
            <div class="form-actions">
               <button type="submit">Save</button>
            </div>
        </form>
    </div>
</div>

Answer 1

确实有效。见http://jsfiddle.net/kJtMG/ 很可能你在评论的部分中某处有无效的HTML。

<div class="form-element"> <!-- ... --></div>

Answer 2

如果input类型的submit是您表单的子级，则只需单击按钮即可提交表单。像这样：

<form method="post">
        <div class="form-element"> <!-- ... --></div>
        <div class="form-actions">
           <button type="submit">Save</button>
        </div>
    </form>

如果没有，您可以通过javascript/jquery强制提交表单：

<form method="post">
    <div class="form-element"> <!-- ... --></div>
</form>

<div class="form-actions">
    <button type="submit">Save</button>
</div>

jquery：

$('button[type="submit"]').on('click', function(e){
    $(this).prev('form').submit();
});

或者（使用表单ID）：

$('button[type="submit"]').on('click', function(e){
    $('#form_id').submit();
});

为什么按钮[type =“submit”]仅作为表单的直接子项工作

2 个答案: