全国服务热线:4008-888-888

技术知识

网页页面表单递交方法详尽汇总

大伙儿先看来看表单递交的几种方法
1、<!--通用性递交按钮-->
<input type="submit" value="递交">
2、<!--自定递交按钮-->
<button type="Submit">递交</button>
3、<!--图象按钮-->
<input type="image" src = "btn.png">
表明:客户递交按钮或图象按钮时,就会递交表单。应用<input>或<button>都可以以界定递交按钮,要是将其特点的值设定为“submit”便可,而图象按钮则是根据<input>的type特点值设定为”image”来界定的。因而,要是大家点击1下编码转化成的按钮,便可以递交表单。
4、阻拦表单递交
要是在表单中存在上面列出的任何1种按钮,那末相应表单控制有着聚焦点的状况下,按回车键便可以递交表单。假如表单里沒有递交按钮,按回车键不容易递交表单。
以这类方法递交表单时,访问器会在将恳求推送给服务器以前开启submit恶性事件。这样,大家就还有机会认证表奇数据,并据以决策是不是容许表单递交。阻拦这个恶性事件的默认设置个人行为便可以撤销表单递交。比如,下面编码会阻拦表单递交:

拷贝编码
编码以下:

var EventUtil = {
addHandler: function (element, type, handler) {
if (element.addEventListener) {
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
},
getEvent: function (event) {
return event ? event : window.event;
},
preventDefault: function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
};
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function () {
//获得恶性事件目标
event = EventUtil.getEvent(event);
//阻拦默认设置恶性事件
EventUtil.preventDefault(event);
});

启用preventDefault()方式阻拦了表单递交。1般来讲,在表奇数据失效而不可以推送给服务器时,可使用这1技术性。
5、在JavaScript中,以程序编写方法启用submit()方式还可以递交表单。
这类方法不用表单包括递交按钮,任什么时候候都可以以一切正常递交表单。看来1个事例:
var form = document.getElementById("myForm");
//递交表单
form.submit();
在以启用submit()方式的方式递交表单时,不容易开启submit恶性事件,因而要记得在启用此方式以前先认证表奇数字据。
递交表单时将会出現的最大难题,便是反复递交表单。在第1次递交表单后,假如长期沒有反应,客户将会会变得不抗烦。这时候候,她们或许会不断点击递交按钮。結果常常很不便(由于服务器要解决反复恳求),或导致不正确(假如是下了定单,那末将会会多定好几份)。
处理这1难题的方法有两个
在第1次递交表单后就禁用递交按钮;
运用onsubmit恶性事件解决程序流程撤销后续的表单递交实际操作。
接下来将详尽详细介绍根据form递交的几种方式
方式1:运用form的onsubmit()涵数(常常应用),编码以下:

拷贝编码
编码以下:

<script type="text/javascript">
function validateForm(){
if(document.reply.title.value == ""){ //根据form名来获得form
alert("please input the title!");
document.reply.title.focus();
return false;
}
if(document.forms[0].cont.value == ""){ //根据forms数字能量数组获得form
alert("please input the content!");
document.reply.cont.focus();
return false;
}
return true;
}
<form name="reply" method="post" onsubmit="return validateForm( );">
<input type="text" name="title" size="80" />

<textarea name="cont" cols="80" rows="12"></textarea>

<input type="submit" value="递交" >
</form>
留意:
1.onsubmit特性內容1定要有return重要字,不然涵数会立即实行,不容易回到
2.validateForm1定要回到1个boolean种类的回到值
3.递交按钮要写成submit种类的

方式2:运用input种类为submit组件的onclick()涵数
将上面form标识中的onsubmit="return validateForm()"特性,去掉。
为“递交”按钮加上onclick恶性事件,以下:
<input type="submit" value="递交" onclick="return validateForm();">
方式3:运用button组件的onclick()涵数,手动式递交,编码以下:

拷贝编码
编码以下:

<script type="text/javascript">
function modifyItem() {
if (trim(document.getElementById("itemName").value) == "") {
alert("物料名字不可以为空!");
document.getElementById("itemName").focus();
return;
}
with (document.getElementById("itemForm")) {
method = "post";
action = "item.do?command=modify&pageNo=${itemForm.pageNo}";
submit();
}
}
//回到
function goBack() {
window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}";
}
</script>
<form name="itemForm" id="itemForm">
<input name="itemNo" type="text" id="itemNo" value="${ item.itemNo }" >
<input name="itemName" type="text" id="itemName" value="${ item.itemName }" >
<input name="btnModify" type="button" id="btnModify" value=“改动" onclick="modifyItem()">
</form>
留意:
1.递交时,设定form的action和methods特性,随后运用form.submit()涵数递交。

以上编码实际完成能够参照以下:
http://www.bjp111.com/zhshlist.aspx
http://www.bjp111.com/huixiaolist.aspx
http://www.bjp111.com/daililist.aspx
菜鸟小结
对form中的组件认证时,前两个应用的是name特性,包含form本身的。
假如递交表单时沒有反映,另外明确递交表单一部分编码沒有难题,请查询递交表单前面的js编码,有时前面js的不正确会引起无缘无故的难题。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服