2013-11-12 2 views
-1

Пользователь должен иметь возможность вставлять имя, адрес, пол, поток и модуль .... когда пользователь нажимает кнопку очистки, форма должна быть очищена, а когда пользователь нажимает кнопку «ОК», имя и адрес должен отображаться под формой.JAVASCRIPT-FORM

Проблема: кнопка очистки не работает должным образом. Как я могу ее исправить?

Application.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(); 
} 
+0

Странно, код выглядит нормально ... первый шаг должен искать ошибки в консоли JavaScript. И вы уверены, что вам нужна «четкая» кнопка в первую очередь? Зачем? Единственное, что они сделали для меня за последние 15 лет, иногда изредка разрушало ввод формы, когда я случайно нажал на них. –

ответ

0

Попробуйте это, Он будет отображать два поля в области отображения, для того, чтобы использовать функцию сброса использование type=reset в форме ввод сбрасывает поля формы

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

Script

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"); 
} 

Fiddle

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

это все, что вам нужно сделать.