按钮问题

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中的按钮不管用呢？怎么处理？

...全文

142 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

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>