onChange() not working fine

Question

In the below jsp, when i change the dropdown list the values are not getting cleared. please help me with it. But the other function(Enable()) is working fine. Could any one please let me know where am i going wrong.

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!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>

<title>Untitled Document</title>
<script type="text/javascript">
    document.getElementById("Comp_Text").value=document.getElementById("tgt1").value;
    function Enable(){
        if(document.getElementById("abcd").value=="DAIS")
            {
                    document.getElementById("c1").disabled=true;
                    document.getElementById("c2").disabled=true;
                    document.getElementById("c3").disabled=true;
                    document.getElementById("c4").disabled=true;
                    document.getElementById("c5").disabled=true;
                    document.getElementById("c6").disabled=true;
                    document.getElementById("c1").value='0';
                    document.getElementById("c2").value='0';
                    document.getElementById("c3").value='0';
                    document.getElementById("c4").vaue='0';
                    document.getElementById("c5").value='0';
                    document.getElementById("c6").value='0';
                    document.getElementById("tot1").readOnly=false;
            }
            else
                {
                    document.getElementById("c1").disabled=false;
                    document.getElementById("c2").disabled=false;
                    document.getElementById("c3").disabled=false;
                    document.getElementById("c4").disabled=false;
                    document.getElementById("c5").disabled=false;
                    document.getElementById("c6").disabled=false;
                    document.getElementById("tot1").readOnly=true;
                }

    }
    function Sum()
    {
        var int1=document.getElementById("c1").value;
        var int2=document.getElementById("c2").value;
        var int3=document.getElementById("c3").value;
        var int4=document.getElementById("c4").value;
        var int5=document.getElementById("c5").value;
        var int6=document.getElementById("c6").value;
        document.getElementById("tot1").value=parseInt(int1)+parseInt(int2)+parseInt(int3)+parseInt(int4)+parseInt(int5)+parseInt(int6); 
    }
    function clear(){
                    document.getElementById("c1").value='';
                    document.getElementById("c2").value='';
                    document.getElementById("c3").value='';
                    document.getElementById("c4").vaue='';
                    document.getElementById("c5").value='';
                    document.getElementById("c6").value='';
    }

</script>
</head>

    <body>
<form id="form1" name="form1" method="post" action="UpdateCounts_DB.jsp">
    <input type="text" name="Comp_Text" id="Comp_Text" value="<%=(String)request.getParameter("tgt1")%>" size="100" style="border: 0"/>
    <table width="420" cellspacing="3"> <tr><td width="37">Types</td>
  &nbsp;
  &nbsp;
  &nbsp;
  <td width="127">
      <select name="abcd" id="abcd" onchange="Enable();clear()" >
          <!--<optgroup label="a">-->
          <option value="">Select the Type</option>
          <option value="Updates">Updates</option>  
          <option value="Multibases">Multibases</option>
          <option value="DAIS">DAIS</option>
          <option value="Acds">Admin Codes</option>
          <option value="Legis">Legis</option>
          <option value="LegAll">Legis-All</option>
          <option value="Ins">Ins And Reg</option><!--</optgroup>--></select></td>
          <td width="236"> <font size="-1" color="#0033CC"> Select your Update Type From the Drop Down</font>
          </td> </tr></table>
  <p>
    <label for="DB Count">DB Count</label>&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="text" name="DB_Count" id="DB_Count" style="width:30px" value="<%String abc=(String)request.getAttribute("abc");%>"/>
  </p>
    <font size="5" color="#0033CC">Fill all the below fields, enter Zero if there are no changes in a section</font>
  <table width="312" border="0">
    <tr>
      <td width="156"><label>
      Summary</label></td>
      <td><label for="c1"></label>
          <input type="text" name="c1" id="c1" style="width:30%" onchange="Sum();"/></td>
    </tr>
    <tr>
      <td><label>
    Contents</label></td>
        <td><input type="text" name="c2" id="c2" style="width:30%" onchange="Sum()"/></td>
    </tr>
    <tr>
      <td><label>
    Citation Formats</label></td>
        <td><input type="text" name="c3" id="c3" style="width:30%" onchange="Sum()"/></td>
    </tr>
    <tr>
      <td><label>
      Searching and Fields</label></td>
        <td><input type="text" name="c4" id="c4" style="width:30%"  onchange="Sum()" /></td>
    </tr>
    <tr>
      <td><label>
    Related Research</label></td>
        <td><input type="text" name="c5" id="c5" style="width:30%" onchange="Sum()"/></td>
    </tr>
    <tr>
      <td><label>
    Legal Notices</label></td>
        <td><input type="text" name="c6" id="c6"  style="width:30%" onchange="Sum()"/></td>
    </tr>
    <tr><td>Update Count</td><td>
            <input type="text" name="tot1" id="tot1" style="width:30%" readonly="readonly"/></td></tr>
    </table>
  <p>
    <input type="submit" name="Enter" id="Enter" value="Submit" />
      </p>
</form>
</body>
</html>

Thanks

score 2 · Accepted Answer · edited May 23 '17 at 11:59

Try giving a different name to the clear() function, like say clearValues() or clearFields():

function clearFields(){ // name changed

    document.getElementById("c1").value='';
    document.getElementById("c2").value='';
    document.getElementById("c3").value='';
    document.getElementById("c4").vaue='';
    document.getElementById("c5").value='';
    document.getElementById("c6").value='';
}

This may be due to the fact that clear() is used by the browser. Though I couldn't find any reference for clear in javascript keywords accept this.

Also you may find this answer helpful as it is related to the use of clear and also this related to reserved words in javascript.

onChange() not working fine

1 Answers1