有两种方式,第一种方法是我自己做出来的,对button类型的input用onclick()方法,触发js代码,在js里边进行数据验证,以及重新给action赋值。
jsp页面中的onclick属性定义:
<td><input id="ud" type="button" value="修改" onClick="split()" /></td>
<td><input id="dd" type="button" value="删除" onClick="deleteConfirm()" /></td>
<td><input id="rd" type="button" value="角色维护" onClick="split2()" /></td>
以下是js代码:
<script type="text/javascript">
function split(){
varchecks=document.getElementsByName("check"); //通过input的name属性获取对象集合
varn=0;
for(i=0;i<checks.length;i++){
if(checks[i].checked) //用循环检查是否被选中
n++; //如果被选择则自加一
}
if(n==0){ //条件判断
alert("请选择一项数据进行修改!");}
else if(n>=2){
alert("请选择一项进行修改!");}
else if(n==1){
varf=document.getElementById("idselect"); //符合条件则获取form表单对象
f.action="updateUser.crud"; //更改formaction
f.submit(); //提交form表单
}
}
</script>
<script type="text/javascript">
function split1(){
varf=document.getElementById("idselect");
f.action="deleteUser.crud";
f.submit();
}
</script>
<script type="text/javascript">
function split2(){
var x=document.getElementById("rd");
if(x.value=="角色维护"){
varf=document.getElementById("idselect");
f.action="roleUser.crud";
f.submit();
}
}
</script>
<script type="text/javascript">
function deleteConfirm() {
if(confirm("确认要删除? 删除后将不可更改")) {
return split1();
}else{
return false;
}
}
function deleteConfirm2() {
if(confirm("确认要修改?")) {
return split();
}else{
return false;
}
}
</script>
第二种方法是h5的新方法,可以多个引用:
<!DOCTYPE html>
<html>
<head>
<title>form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<form id="addForm" method="get" oninput="a.value=color.value;b.value=range.value">
Username: <input type="text" name="username" form="addForm" placeholder="Please input your username." style="width: 200px;" /><br>
Password: <input type="password" name="password" form="addForm" placeholder="Please input your password." autofocus="true" style="width: 200px;" /><br>
Please entry the book: <input type="text" name="book" list="books" /><br>
Select color: <input id="color" type="color" name="color" /><br>
Select date: <input type="date" name="date" /> Select time: <input type="time" /><br>
Select datetime: <input type="datetime-local" name="datetime-local" /><br>
Select week: <input type="week" name="week" /> Select month: <input type="month" name="month" /><br>
Please entry your e-mail: <input type="email" multiple="multiple" name="email" /><br>
Please entry your tel-number: <input type="tel" name="tel" /><br>
Please entry an URL: <input type="url" name="url" /><br>
Must entry number: <input type="number" name="number" /><br>
A range bar: <input type="range" name="range" min="0" max="100" step="5" /><br>
Search bar: <input type="search" name="search" /><br>
<output name="a" for="color"></output><br>
<output name="b" for="range"></output>
</form>
<input type="submit" value="submit" form="addForm" formaction="index.html" />
<input type="submit" value="submit2" form="addForm" formaction="h501.html" /><br>
<datalist id="books">
<option value="aaa">AAA</option>
<option value="bbb">BBB</option>
<option value="ccc">CCC</option>
</datalist>
</body>
</html>





