我创建了一个简单的表单和jQuery插件,将表单提交到PHP脚本,然后将其添加到数据库中。不过,jQuery的.serialize()提交的表单是默认的输入值,而不是用户键入的值,这应该不是什么大不了的事。
这是HTML:
<form id="submit-assignment" method="post" action="URL-HERE">
<input type="hidden" value="1" name="class_id">
<div id="assignment-title-parent" style="width: 367px;">
<input id="assignment-title" class="new-name" type="text" value="Name a new assignment." style="border-right: 0pt none; height: 14px;" name="assignment-title">
<div id="assignmentadd-step2" class="btn leftflat next-right" style="height: 14px;">Next »</div>
<div class="clear"></div>
</div>
<div id="assignment-desc-parent" class="hidden">
<textarea id="assignment-desc" class="new-desc" name="assignment-desc" style="">Describe this assignment here. Include directions, resources, etc.</textarea>
<div style="width: 310px;">
<div id="assignmentadd-step3" class="btn fr" style="margin-top: 2px;">Next »</div>
<div class="fl txt-small txt-gray top6">
<input id="assignment-date" class="new-date hasDatepicker" type="text" value="When is it due?" name="assignment-date">
</div>
<div class="clear"></div>
</div>
</div>
<div id="assignment-preview-parent" class="hidden">
</form>
插件:
jQuery.fn.submitForm = function(callback) {
$(this).submit(function(event) {
event.preventDefault();
//alert($(this).serialize());
$.post($(this).attr("action"), $(this).serialize(), function(data) {
if(typeof callback == 'function'){
callback.call(this, data);
}
}, 'json');
});
};
插件用法:
$(document).ready(function() {
$('#submit-assignment').submitForm(function() {
//-> callback...
});
});
谢谢:)
答案 0 :(得分:0)
Serialize将获取表单中所有输入字段的任何值以进行提交。如果您打算将它们作为占位符,则可以执行以下操作:
<input name="assignment-title" value="" placeholder="placeholder text goes here" />
此外,占位符是HTML5,因此,根据我个人的喜好,我创建了一个函数作为占位符后备。我编辑了jsfiddle.net作为例子。