按钮问题

hailangbei 2009-12-18 11:43:06
<SCRIPT>   
sm=1;
function addRow(){
sm++;
if(sm>2) {sm--;alert("You can not do this!"); return false;}
var row = document.getElementById("r"+sm);
row.style.display='block';
}
function deleteRow(){
if(sm<2) {alert("You can not do this!"); return false;}
var cln = document.getElementById("b"+sm);
var row = document.getElementById("r"+sm);
cln.value="";
row.style.display='none';
sm--;
}
</SCRIPT>


<form action="search.php" target="_blank" method="get"> <table align = "center" width=98%>
<tr id="r1"><td align = "center" width="20%"> </td>
<td align = "center"width="27%">
<select name="a1" style="width: 100%"><?php echo displayoption()?></select></td>
<td align = "center" width="30%"><input type="text" size="70%" name="b1" /></td>
<td align = "center" width="23%">  
<input type="button" style="WIDTH: 20px" name="addRow" value="+" onClick="addRow()"> 
<input type="button" style="WIDTH: 20px" name="deleteRow" value="-" onClick="deleteRow()"></td>
</tr>
<tr id="r2" style="display:none">
<td align = "center" width="20%"><input type="radio" name="c2" value ="and" checked />and    
<input type="radio" name="c2" value ="or" />or</td>
<td align = "center"width="27%"><select name="a2" style="width: 100%"><?php echo displayoption()?></select></td>
<td align = "center" width="30%"><input type="text" size="70%" name="b2" /> </td>
<td align = "center" width="23%">  
<input type="button" style="WIDTH: 20px" name="addRow" value="+" onClick="addRow

()"> 
<input type="button" style="WIDTH: 20px" name="deleteRow" value="-"

onClick="deleteRow()"></td>
</tr>
</table></form>




为什么在form中的按钮不管用呢?怎么处理?
...全文
109 13 打赏 收藏 举报
写回复
13 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
include_me 2009-12-18
  • 打赏
  • 举报
回复
建议楼主先看看html教程.
include_me 2009-12-18
  • 打赏
  • 举报
回复
大哥, 写代码也要的点规范好不好!!

<input type="button" style="WIDTH: 20px" name="deleteRow" value="-" onClick="deleteRow()">

name="deleteRow" onClick="deleteRow()"

改掉你的name属性值.
hailangbei 2009-12-18
  • 打赏
  • 举报
回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<SCRIPT>
sm=1;
function addRow(){
sm++;
if(sm>2) {sm--;alert("You can not do this!"); return false;}
var row = document.getElementById("r"+sm);
row.style.display='block';
}
function deleteRow(){
if(sm<2) {alert("You can not do this!"); return false;}
var cln = document.getElementById("b"+sm);
var row = document.getElementById("r"+sm);
cln.value="";
row.style.display='none';
sm--;
}
</SCRIPT>


<table align = "center" width=98%>
<td align = "center">  
<input type="button" style="WIDTH: 30px" name="addRow" value=" + " onClick="addRow()"> 
<input type="button" style="WIDTH: 30px" name="deleteRow" value=" - " onClick="deleteRow()"></td>
</table><br><br><br><br>

<form action="search.php" target="_blank" method="get"> <table align = "center" width=98%>
<tr id="r1"><td align = "center" width="20%"> </td>
<td align = "center"width="27%"><select name="a1" style="width: 100%"><?php echo displayoption()?></select></td>
<td align = "center" width="30%"><input type="text" size="70%" name="b1" /></td>
<td align = "center" width="23%"><input type="button" style="WIDTH: 20px" name="addRow" value="+" onClick="addRow()"> 
<input type="button" style="WIDTH: 20px" name="deleteRow" value="-" onClick="deleteRow()"></td>
</tr>
<tr id="r2" style="display:none">
<td align = "center" width="20%"><input type="radio" name="c2" value ="and" checked />and    
<input type="radio" name="c2" value ="or" />or</td>
<td align = "center"width="27%"><select name="a2" style="width: 100%"><?php echo displayoption()?></select></td>
<td align = "center" width="30%"><input type="text" size="70%" name="b2" /> </td>
<td align = "center" width="23%">  
<input type="button" style="WIDTH: 20px" name="addRow" value="+" onClick="addRow()"> 
<input type="button" style="WIDTH: 20px" name="deleteRow" value="-" onClick="deleteRow()"></td>
</tr>
<tr><td align = "center" colspan=3>
<input type="submit" style="WIDTH: 65px" name="submit" value ="Search" />    
<input type="reset" style="WIDTH: 65px" name="reset" value ="Reset" />
</td>
</tr>
</table></form>
</body>
</html>



高手们可以试一下

我是说"+"、"-"按钮 放在表单外可以实现 击一下显示或隐藏一个tr

但放表单里就不管用了
include_me 2009-12-18
  • 打赏
  • 举报
回复
<input type="button" style="WIDTH: 20px" name="addRow" value="+" onClick="addRow()">
注意 onclick 要小写, js 是区分大小写的.
qqzeng-ip 2009-12-18
  • 打赏
  • 举报
回复
submit 表单提交
button 只是一个按钮而已

<input type="submit" name="btnSubmit" value="提交" onclick="return js()">ok!
hailangbei 2009-12-18
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 zengzhan 的回复:]
HTML code<html:form><html:submitvalue="提交1"/><inputtype="button" name="btnSubmit" value="提交2" onclick="this.form.submit()"></html:form>

点击提交1按钮,表单提交;点击提交2按钮,表单没有提交提交。

解决方法:
都使用提交2的方法,在整个form中不出现提交1的方法。
[/Quote]


不好意思 没说清楚
我是说"+"、"-"按钮 放在表单外可以实现 击一下显示或隐藏一个tr

但放表单里就不管用了
qqzeng-ip 2009-12-18
  • 打赏
  • 举报
回复
<html:form>
<html:submit value="提交1" />
<input type="button" name="btnSubmit" value="提交2" onclick="this.form.submit()">
</html:form>


点击提交1按钮,表单提交;点击提交2按钮,表单没有提交提交。

解决方法:
都使用提交2的方法,在整个form中不出现提交1的方法。
include_me 2009-12-18
  • 打赏
  • 举报
回复
楼主你看明白 hookee 改动过的代码了?

<input type="button" style="WIDTH: 20px" name="deleteRow" value="-" onClick="deleteRow()">

简要的说下原因:
<input type="button" style="WIDTH: 20px" name="deleteRow" value="-" onClick="deleteRow()">
当点击按钮时会执行click事件,也就是"deleteRow()",因为在form内它首先会在当前域(form)内查找deleteRow对象,恰巧你的按钮以deleteRow命名,所以它找到的其实是你的按钮对象也就是button, 而不是function deleteRow,理所当然最终出错了.

再说下解决方法:
因为命名问题导致js无法找到想要的对象,那改正就简单了,让对象不重名即可. 最直观的解决方法就是改掉button的名称(name),换成与页面内其它对象不重复的名称即可(也就是我上面所说的:改掉你的name属性值).当然还有间接的方法,也就是 hookee 的方法"window.deleteRow()",显示指定对象的"全称",如果你学过.net或java相信不会对命名空间陌生.

再说下编码规范:
对象命名是最基本的了,元素闭合等就不多说了.. html基础书上笔笔皆是.

最后:
我没有否定,我是在强调(善意的强调).当然我可以不"强调",但我觉得CSDN应该是个进步的地方,进步是要虚心的..
hailangbei 2009-12-18
  • 打赏
  • 举报
回复
[Quote=引用 6 楼 include_me 的回复:]
大哥, 写代码也要的点规范好不好!!

<input type="button" style="WIDTH: 20px"  name="deleteRow"  value="-" onClick="deleteRow()">

name="deleteRow" onClick="deleteRow()"

改掉你的name属性值.
[/Quote]



哥们 不要轻易的否定别人
hailangbei 2009-12-18
  • 打赏
  • 举报
回复
谢谢 hookee

我刚开始加的是 window.location

再次膜拜

有问题还是得找你
hookee 2009-12-18
  • 打赏
  • 举报
回复

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<SCRIPT>
var sm=1;
function addRow(){
sm++;
if(sm>2) {sm--;alert("You can not do this!"); return false;}
var row = document.getElementById("r"+sm);
row.style.display='block';
}
function deleteRow(){
if(sm<2) {alert("You can not do this!"); return false;}
var cln = document.getElementById("b"+sm);
var row = document.getElementById("r"+sm);
cln.value="";
row.style.display='none';
sm--;
}
</SCRIPT>

<table align = "center" width=98%>
<td align = "center">  
<input type="button" style="WIDTH: 30px" name="addRow" value=" + " onClick="addRow()"> 
<input type="button" style="WIDTH: 30px" name="deleteRow" value=" - " onClick="deleteRow()"></td>
</table><br><br><br><br>
<table align = "center" width=98%>
<td align = "center">  
<input type="button" style="WIDTH: 30px" name="addRow" value=" + " onClick="addRow()"> 
<input type="button" style="WIDTH: 30px" name="deleteRow" value=" - " onClick="deleteRow()"></td>
</table><br><br><br><br>

<form action="search.php" target="_blank" method="get">
<table align = "center" width=98%>
<tr id="r1"><td align = "center" width="20%"> </td>
<td align = "center"width="27%"><select name="a1" style="width: 100%"><?php echo displayoption()?></select></td>
<td align = "center" width="30%"><input type="text" size="70%" name="b1" /></td>
<td align = "center" width="23%"><input type="button" style="WIDTH: 20px" name="addRow" value="+" onClick="window.addRow()"> 
<input type="button" style="WIDTH: 20px" name="deleteRow" value="-" onClick="window.deleteRow()"></td>
</tr>
<tr id="r2" style="display:none">
<td align = "center" width="20%"><input type="radio" name="c2" value ="and" checked />and    
<input type="radio" name="c2" value ="or" />or</td>
<td align = "center"width="27%"><select name="a2" style="width: 100%"><?php echo displayoption()?></select></td>
<td align = "center" width="30%"><input type="text" size="70%" name="b2" /> </td>
<td align = "center" width="23%">  
<input type="button" style="WIDTH: 20px" name="addRow" value="+" onClick="window.addRow()"> 
<input type="button" style="WIDTH: 20px" name="deleteRow" value="-" onClick="window.deleteRow()"></td>
</tr>
<tr><td align = "center" colspan=3>
<input type="submit" style="WIDTH: 65px" name="submit" value ="Search" />    
<input type="reset" style="WIDTH: 65px" name="reset" value ="Reset" />
</td>
</tr>
</table>
</form>
</body>
</html>
hailangbei 2009-12-18
  • 打赏
  • 举报
回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<SCRIPT>
sm=1;
function addRow(){
sm++;
if(sm>2) {sm--;alert("You can not do this!"); return false;}
var row = document.getElementById("r"+sm);
row.style.display='block';
}
function deleteRow(){
if(sm<2) {alert("You can not do this!"); return false;}
var cln = document.getElementById("b"+sm);
var row = document.getElementById("r"+sm);
cln.value="";
row.style.display='none';
sm--;
}
</SCRIPT>

<table align = "center" width=98%>
<td align = "center">  
<input type="button" style="WIDTH: 30px" name="addRow" value=" + " onClick="addRow()"> 
<input type="button" style="WIDTH: 30px" name="deleteRow" value=" - " onClick="deleteRow()"></td>
</table><br><br><br><br>
<table align = "center" width=98%>
<td align = "center">  
<input type="button" style="WIDTH: 30px" name="addRow" value=" + " onClick="addRow()"> 
<input type="button" style="WIDTH: 30px" name="deleteRow" value=" - " onClick="deleteRow()"></td>
</table><br><br><br><br>

<form action="search.php" target="_blank" method="get">
<table align = "center" width=98%>
<tr id="r1"><td align = "center" width="20%"> </td>
<td align = "center"width="27%"><select name="a1" style="width: 100%"><?php echo displayoption()?></select></td>
<td align = "center" width="30%"><input type="text" size="70%" name="b1" /></td>
<td align = "center" width="23%"><input type="button" style="WIDTH: 20px" name="addRow" value="+" onClick="addRow()"> 
<input type="button" style="WIDTH: 20px" name="deleteRow" value="-" onClick="deleteRow()"></td>
</tr>
<tr id="r2" style="display:none">
<td align = "center" width="20%"><input type="radio" name="c2" value ="and" checked />and    
<input type="radio" name="c2" value ="or" />or</td>
<td align = "center"width="27%"><select name="a2" style="width: 100%"><?php echo displayoption()?></select></td>
<td align = "center" width="30%"><input type="text" size="70%" name="b2" /> </td>
<td align = "center" width="23%">  
<input type="button" style="WIDTH: 20px" name="addRow" value="+" onClick="addRow()"> 
<input type="button" style="WIDTH: 20px" name="deleteRow" value="-" onClick="deleteRow()"></td>
</tr>
<tr><td align = "center" colspan=3>
<input type="submit" style="WIDTH: 65px" name="submit" value ="Search" />    
<input type="reset" style="WIDTH: 65px" name="reset" value ="Reset" />
</td>
</tr>
</table>
</form>
</body>
</html>



前两个table里的 "+"、"-"按钮 击一下显示或隐藏一个tr

但放表单里就不管用了

xinlan1022 2009-12-18
  • 打赏
  • 举报
回复
同上
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2009-12-18 11:43
社区公告
暂无公告