-1

用户必须能够插入姓名、地址、性别、流和模块......当用户单击清除按钮时，表单应该被清除，当用户单击确定按钮时，名称和地址应该显示在表单下方..

问题：清除按钮无法正常工作。我该如何纠正？

应用程序.htm

<!DOCTYPE html>
<html>
 <head>
 <script type="text/javascript" src="ApplicationForm.js"></script>
 </head>


 <body>
<form id="frm1">
            <!-----Application Table ---->
<table cellpadding="8">
<tr>
                 <td>Name</td>
                 <td><input type="text" id="txtName" size=30 value=" "></td>
           </tr>

<tr>
                 <td> Address</td>
                 <td><input type="text" id="txtAdd" size=30 value=" "></td>
           </tr> 

<tr>
                 <td>Gender</td>
                 <td><input type="radio" name="sex" value="M"> Male
                         <input type="radio" name="sex" value="F"> Female </td>
</tr>

<tr>
                  <td>Stream </td>
                  <td><select name="stream">
      <option id="0" value="0">---Select stream---</option>
      <option id="1" value="se">SE</option>
                  <option id="2" value="isbm">ISBM</option>
                  </select><br  /> </td>
</tr>

<tr>
      <td>Modules</td>
      <td><input type="checkbox" name="module" value="m1"> M1
                          <input type="checkbox" name="module" value="m2"> M2
              <input type="checkbox" name="module" value="m3"> M3
                          <input type="checkbox" name="module" value="m4"> M4 

</td>
</tr>

            <tr>
     <td><input type="button" name="submit" value="OK" onclick="clickOk()">
                         <input type="button" name="reset" value="Clear" 
                           onclick="formReset()"></td>
           </tr>



</table>
</form>
       <div id="display"></div>

 </body>
</html>

ApplicationForm.js

function clickOk(){

  if(document.getElementById("txtName").value!=" "){

              if(document.getElementById("txtAdd").value!=" "){

                   var nam=document.getElementById("txtName").value;
                   var add=document.getElementById("txtAdd").value;

              document.getElementById("display").innerHTML="<hr>Hi 
             "+nam+"<br>Address: "+add;
                        }

              else 
                   alert("Please enter your Address");
              }

else 
         alert("Please enter your Name");
}


function formReset()
{
document.getElementById("frm1").reset();
}
4

2 回答 2

3 
<input type="reset" name="reset" value="Clear">

就是您需要做的所有事情。

于 2013-11-12T04:30:48.400 回答
0

试试这个，它将在显示区域显示两个字段，为了type=reset在表单输入中使用重置功能，它将重置表单字段

<input type="reset" value="Reset form" />

脚本

function clickOk(){

  if(document.getElementById("txtName").value!=" "){

              if(document.getElementById("txtAdd").value!=" "){

                   var nam=document.getElementById("txtName").value;
                   var add=document.getElementById("txtAdd").value;

              document.getElementById("display").innerHTML='<hr>Hi ' 
             +nam+'<br>Address: '+add;
                        }

              else 
                   alert("Please enter your Address");
              }

else 
         alert("Please enter your Name");
}

小提琴

于 2013-11-12T04:27:40.527 回答