Question

我在表单外通过按钮提交表单时遇到问题。我需要使用此按钮提交此表单：

<div class="ui submit green labeled icon button"> <i class="checkmark icon"></i> Create </div>

但是按钮在<div id="addAcredicationForm" class="ui large form">之外，而不是验证表单。按钮必须在<div class="actions">.格式对话框的页脚之外。

<div id="addModal" class="ui small modal">
    <i class="close icon"></i>
    <div class="header">
        <div class="column">
            <h3 class="ui header">
                <i class="bordered inverted blue plus icon"></i>
                <div class="content">
                    XYZ
                </div>
            </h3>
        </div>
    </div>
    <div class="content">
        <div id="addAcredicationForm" class="ui large form">
            <div class="ui blue segment">
                <div class="field">
                    <label>Název akreditace</label>
                    <input type="text" maxlength="40" id="name" name="name" placeholder="aaaa">
                </div>
                <div class="field">
                    <label>Poznámka</label>
                    <textarea rows="5" maxlength="250" id="note" name="note" placeholder="bbbb"></textarea>
                </div>
            </div>
            <div class="ui error message"></div>
        </div>
    </div>
    <div class="actions">
        <div class="ui submit green labeled icon button">
            <i class="checkmark icon"></i>
            Create
        </div>
        <div class="ui cancel red labeled icon button">
            <i class="remove icon"></i>
            Cancel
        </div>
    </div>
</div>

以下是示例：jsfiddle.net/q2hLrm13/1

Answer 1

在HTML5中，这是可能的，您可以在表单

之外设置提交按钮

<form id="submit-form">
...
</form>

<button type="submit" form="submit-form">Submit</button>

Answer 2

你可以将你的按钮放在任何地方，你只需要在其上添加一个类或一个id。完成按钮后，您可以使用以下功能：

function pageTransition(response) {
    content.fadeOut(200, function() {
        content.html(response);
        content.fadeIn(800);
    });
}

//page transitions Get
function pageTransitionGet(url) {
    $.get(url, {}, $.noop, "html").success(pageTransition);
}

// page transitions Post
function pageTransitionPost(url, idForm) {
    $.post(url, serializeForm(idForm)).success(pageTransition);
}
function serializeForm(idForm) {    
    // Clones the form removing masks
    var formSubmit = $('#' + idForm).clone();

    // all the fields of the form
    var fieldForm = $('#' + idForm).find(':input');

    // all cloned fields
    var fieldFormSubmit = formSubmit.find(':input');

    // hidden fieldForms
    var fieldFormHidden = $('#' + idForm).find("div:hidden").find(":input");


    for (var i = 0; i < fieldForm.length; i++) {
        fieldFormSubmit[i].value = fieldForm[i].value;

        if (idForm != 'formConsultaOperacao') {
            // Bloqueia os fieldForm que estão em divs ocultas.
            if (fieldFormHidden.filter($(fieldForm[i])).exists()) {
                $(fieldFormSubmit[i]).attr("disabled", true);
            } else {
                $(fieldFormSubmit[i]).attr("disabled", false);
            }
        }
    }

语义UI提交表单外部表单

2 个答案: