[英]Semantic UI submit form button outside form
我在表单外通过按钮提交表单时遇到问题。 我需要使用此按钮提交此表单:
<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 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
在HTML5中,这是可能的,您可以在表单外部提交提交按钮
<form id="submit-form">
...
</form>
<button type="submit" form="submit-form">Submit</button>
你可以把你的按钮放在任何地方,你只需要在它上面添加一个类或一个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);
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.