jquery.form.js 让表单提交更优雅

时间:2021-12-12 10:20:46

jquery.form.js 让表单提交更优雅。可以页面不刷新提交表单,比jQuery的ajax提交要功能强大。
1.引入

<script src="/src/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/src/jquery.form.js"></script>

2.使用

$(function () {
var E = window.wangEditor;
var content_editor = new E('#content_editor');
content_editor.create();
var content_val = $("#content").val();
// 设置内容
content_editor.txt.html(content_val); var answer_editor = new E('#answer_editor');
answer_editor.create();
var answer_val = $("#answer").val();
// 设置内容
answer_editor.txt.html(answer_val); $("#cancel_btn").on('click',function () {
window.location.href = 'index';
}); // 只是准备工作,需要表单提交才触发
$("#edit_form").ajaxForm({
dataType: "json",
success : function(res){
if(res.errno == 0){
alert('已保存');
window.location.href = 'index';
}else{
alert(res.errdesc);
}
return false;
}
}); // 提交按钮点击
$("#edit_btn").on("click", function(){
// 获取并判断各个值是否填写并正确
var id = $("#id").val();
var title =$("#title").val();
// 获取内容
var content = content_editor.txt.html();
var answer = answer_editor.txt.html();
var question_type_id = $("#question_type_id").val();
if(!title){
alert('标题不能为空');
return;
}
if (!content && !answer) {
alert('内容和答案不能全为空');
return;
}
if(!question_type_id){
alert('类型不能为空');
return;
} // 设置新内容
$('#content').val(content);
$('#answer').val(answer); // 表单触发submit事件
$("#edit_form").submit();
return false;
}); });