mysql的值赋值给表单_手动提交表单，验证通过后把表单信息显示在页面上存入数据库...

手动提交表单，验证通过后把表单信息显示在页面上存入数据库

分类：JQUERY　时间：2013-05-23   已阅读：2355

问题描述：

当点击edit按钮时，表格里的信息变成input，select,textarea形式的，并且原来的信息作为input，select,textarea的value,此时 按钮的样式发生变化，文字也从Edit变成Save, 如果我需要用到

jquery.validate.js插件去验证表单提交的数据是否有效，因为我的 edit 或者 Save 按钮都是同一个input，只是修改了它的样式而已，所以我需要在文字是Save的时候手动的提交 用 $("form").submit();

然后在validate验证里如果验证成功执行 submitHandler里的函数，提交成功以后 需要把修改后的 form表单的值取出来并赋值给相应的地方显示出来。 这个过程也是可以在submitHandler完成的。

我们可以把问题分解下，

1. 点击 Edit按钮，form 表单中信息变成相应 input，select,textarea的value的值

2. 用户做一些编辑操作

3. 验证表单输入的有效性

4. 如果表单验证不通过，会给出体术信息

5. 如果表坛验证通过会执行2个操作，一个是把 用户编辑的信息显示在浏览器上，用户不需要刷新页面，同时会把用户编辑的这些信息存入数据库，更新数据库里的这条信息

以上的思路：

具体代码如下:

$("input#controlTask").live("click", function () {

ddL = $taskDetailColumn.find("dd").length;

if (!$(this).hasClass("orange")) {

$(this).val("Save").addClass("orange");

var oldTextData = [];

for (var i = 0; i < ddL; i++) {

var oldText = $taskDetailColumn.find("dd").eq(i).text();

if (i == 6) { oldText = $taskDetailColumn.find("dd").eq(i).find("span").text(); }

oldTextData.push(oldText);

}

FindPriorities();

$taskDetailColumn.find("dd").eq(0).html('');

//$taskDetailColumn.find("dd").eq(1).html('');

$taskDetailColumn.find("dd").eq(1).html('');

$taskDetailColumn.find("dd").eq(2).html('');

$taskDetailColumn.find("dd").eq(3).html('');

$taskDetailColumn.find("dd").eq(4).html('');

$taskDetailColumn.find("dd").eq(5).html('');

$taskDetailColumn.find("dd").eq(6).html(' Days');

$taskDetailColumn.find("dd").eq(7).html('' + Prioritylist.join("") + '');

$taskDetailColumn.find("dd").eq(8).html(''+oldTextData[8]+'');

$("#add_StartDate,#add_DeadLine").click(function() { WdatePicker({dateFmt:'MM/dd/yyyy'}) ;})

} else {

$("form#formEditTask").submit();

}

})

主要是这句 $("form#formEditTask").submit(); 只需要提交就行，其余的交给的$("#formEditTask").validate函数去处理就行。

验证表单的代码 如下：

/* check deadline */

jQuery.validator.addMethod("deadLineRole", function (value, element, params) {

var __value1 = new Date($("#" + params[0]).val()),

__value2 = new Date(value),

increment = Number($("#" + params[1]).val());

if (__value2 >= __value1 && params[2]) {

$("#" + params[2]).val(Math.floor((__value2.getTime() - __value1.getTime()) / 1000 / 60 / 60 / 24));

};

__value1.setDate(__value1.getDate() + (increment || 0));

return this.optional(element) || __value2 >= __value1;

}, "The value of Deadline is wrong .");

/* check form data */

jQuery.validator.messages.required = "";

$("#formEditTask").validate({

invalidHandler: function(e, validator) {

var errors = validator.numberOfInvalids();

if (errors) {

var message = errors == 1

? 'You missed 1 field. It has been highlighted below'

: 'You missed ' + errors + ' fields. They have been highlighted below';

$("div.error span").html(message);

$("div.error").show();

} else {

$("div.error").hide();

}

},

onkeyup: false,

rules: {

add_StartDate: { required: true },

add_DeadLine: { required: true, deadLineRole: ["add_StartDate", "add_ScheduledWork", "add_ScheduledWork"] },

add_ScheduledWork: { required: true, number: true }

},

submitHandler: function() {

$("div.error").hide();

alert("submit! use link below to go to the other step");

/*验证成功后， 提交数据，并存入到数据库 */

formData = [];

formData.push("{ \"task\": {");

$("input:text,select,textarea",$("#TaskDetailQuickLink dl")).each(function () {

var $this = $(this);

var name = $this.attr("name").replace("add_", "");

switch (name) {

case "Subject":

formData.push("\"Subject\":\"");

formData.push($this.val());

formData.push("\",");

break;

case "Creator":

formData.push("\"Creator\":\"");

formData.push($this.val());

formData.push("\",");

break;

case "Instruction":

formData.push("\"Instruction\":\"");

formData.push($this.val());

formData.push("\",");

break;

case "Executors":

formData.push("\"Executors\":");

formData.push(setServerValue($this.attr("valueList"), false));

formData.push(",");

break;

case "Stakeholders":

formData.push("\"Stakeholders\":");

formData.push(setServerValue($this.attr("valueList"), false));

formData.push(",");

break;

case "StartDate":

formData.push("\"ScheduledStartDate\":");

formData.push(setServerValue($this.val()));

formData.push(",");

break;

case "DeadLine":

formData.push("\"DeadLine\":");

formData.push(setServerValue($this.val()));

formData.push(",");

break;

case "Priority":

formData.push("\"PriorityID\":");

//formData.push(setServerValue($this.val(), false));

formData.push("\""+setServerValue($this.val(), false)+"\"");

formData.push(",");

break;

case "ScheduledWork":

formData.push("\"ScheduledWork\":");

// formData.push(setServerValue($this.val(), false));

formData.push("\""+setServerValue($this.val(), false)+"\"");

formData.push(",");

break;

default:

break;

}

})

formData[formData.length - 1] = formData[formData.length - 1].replace(/,$/, "");

formData.push("} }");

var data = formData.join("").replace(",]", "]");

$.ajax({

url:"/WebCenter/SecuritySite/TaskManagement/TaskService.asmx/CreateTask",

async:"true",

contentType:"application/json",

data:data,

type:"POST",

dataType:"json",

success:function(data){

if (data["d"]["C"] === 0) { showLoadBox($(document.body), data["d"]["M"], 5000); }

else { alert("kkkkkkkkkkk"); }

}

})

},

debug:true

});