提交表单草案总结
提交表单方案总结
1、方式一：表单提交：在此方式中需要置顶表单的action属性，将提交按钮的type属性改为submit。如下：
1、方式一：表单提交：在此方式中需要置顶表单的action属性，将提交按钮的type属性改为submit。如下：
<form name="userForm" target="_self" id="userForm"
action=“#” method=“post”>
<!-- 用户信息开始 -->
<input name="userName" type="text" class="text1" id="userName"
size="20" maxlength="20">
<input name="password" type="password" class="text1"
id="password" size="20" maxlength="20">
<!-- 用户信息结束 -->
<div align="center">
<!-- 提交按钮 -->
<input name="btnAdd" class="button1" type="submit" id="btnAdd"
value="添加" onClick="addUser()">
</div>
</form>
2、方式二：使用JS提交表单，通过按钮触发JS事件，获取表单ID进行提交。如下：
1）表单信息如下：
<form name="userForm" target="_self" id="userForm">
<!-- 用户信息开始 -->
<input name="userName" type="text" class="text1" id="userName"
size="20" maxlength="20">
<input name="password" type="password" class="text1"
id="password" size="20" maxlength="20">
<!-- 用户信息结束 -->
<div align="center">
<!-- 提交按钮 -->
<input name="btnAdd" class="button1" type="button" id="btnAdd"
value="添加" onClick="addUser()">
</div>
</form>
2）JS提交代码如下：
function addUser() {
with (document.getElementById("userForm")){
action="user_add.jsp";
method="post";
method="post";
}
}
3、方式三：利用ajax进行提交，（当文本框失去焦点时触发提交事件）如下
1）HTML代码： <input name="userId" type="text" class="text1" id="userId" size="10" maxlength="10" onkeypress="userIdOnkeypress()" value="<%= userId %>" onblur="validate(this)"><span id="spanUserId"></span>
2）JS验证代码
var xmlHttp;
function createXMLHttpRequest(){
//表示当前浏览器不是ie，如ns，firefox
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else if (window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
function validate(field){
//alert(field.value);
if (trim(field.value).length != 0 ){
//创建AJAX核心对象XMLHttpRequest
createXMLHttpRequest();
var url="user_validate.jsp?userId="+trim(field.value)+"&time=" + new Date().getTime();
//设置请求方式为Get，设置请求的URL，设置为异步提交
xmlHttp.open("GET", url, true);
//将方法地址复制给onreadystatechange属性
xmlHttp.onreadystatechange=callback;
//将请求信息发送到Ajax引擎
xmlHttp.send(null);
}
else{
document.getElementById("spanUserId").innerHTML="";
}
}
function callback(){
//Ajax引擎状态为成功
if (xmlHttp.readyState==4){
//HTTP协议状态为成功
if (xmlHttp.status==200){
if (trim(xmlHttp.responseText) != ""){
document.getElementById("spanUserId").innerHTML="<font color='red'>"+xmlHttp.responseText+"</font>";
}else{
document.getElementById("spanUserId").innerHTML="";
}
}else{
alert("请求失败，错误码="+xmlHttp.status)
}
}
}- 1楼u0103756634小时前
- 杰哥总结真的很不错，学习了……