JavaScript Forum

**devine** · 06-26-2006, 06:42 AM

Hi All,
I have a form which checks which Submit button has been pressed and also shows a textarea dependant on an option selected.
The problem I have is that when I include my "display text" code, all submit buttons appear to be disabled.
However, when the "display text" is removed, the buttons function correctly.

Code:

<%@ LANGUAGE="VBSCRIPT" %>
<%response.buffer=true%>
<script language="javascript">
function chkSubmit(){
document.ChangeControlForm.action="confirm5.asp";
}
function chkSave(){
document.ChangeControlForm.action="save.asp";
}
function chkUpload(){
document.ChangeControlForm.action="ToFileSystem.asp";
}
</script>
<script type="text/javascript">
    //<![CDATA[
    function toggleSubmit(sel)
    {
      var submit = document.getElementById('submit');
      var area = document.getElementById('jarea');
      submit.value = (sel.options[sel.selectedIndex].value=="yes") ? 'Submit Emergency Change' : 'Submit to Change Control';
      jarea.style.display = (submit.value == 'Submit Emergency Change') ? 'block' : 'none';
    }
    //]]>
   
</script>
<head>
<title>Change Control Form</title>

</head>
<center>
<h2>
<img src="images/deault_01.jpg"></h2>
<h2><font face="Sky InfoText Bd" color="#0388BB" size="6">
CHANGE CONTROL FORM</font></h2>
<br><hr><br>
<font color="#FF0000" face="InfoText Bd">Fields marked * are mandatory and must be completed before submitting to Change Control</font>
<form name="ChangeControlForm" method="Post" enctype="multipart/form-data">

</form>

<div>
    
      <tr><td width="199">
      
      <label for="emergency"><span style="background-color: #260063">
      <font color="#FFFFFF" face="InfoText Bd">Emergency Change?</font>:</span> </label> </td></tr>
      <td width="17" align="center">&nbsp;</td>
      <tr><td>
        <select id="emergency" name="emergency" onchange="toggleSubmit(this);">
          <option label="Yes" value="yes">Yes</option>
          <option label="No" value="no" selected="selected">No</option>
        </select>
        </td></tr>
      
          
 
      <br />
      
        <div id="jarea" style="display:none;">
        <tr><td width="199">
       <label for="justification"><font color="#FF0000" face="InfoText Bd">
        <span style="background-color: #260063" width="199">Please provide 
        justification for emergency change</span></font> </label> </td></tr>
        <tr><td>
        <textarea title="Please provide justification for emergency change" name="emergency_justification" cols="38" rows="3"></textarea>
        </div>
<br>
<tr><td width="199" bgcolor="#260063">
  <font color="#FFFFFF" face="InfoText Bd">Upload Attachment: </font> </td>
<td width="17" align="center">&nbsp;</td>
<td width="360"><input type="file" name="File1" size="20"><INPUT type="Submit" value="Upload" onClick="chkUpload();"></td></tr>
</table>
<br>
<center>
<table>
<tr>
<td>
<input type="submit" name="Submit2" value="Save Progress" onClick="chkSave();"> 
<input id="submit" type="submit" name="Submit" value="Submit to Change Control" onClick="chkSubmit();"> 
</table>
</form>

I originally thought perhaps the </form> that precedes the <div> area could be causing the problem, but when I remove it, it makes no difference.
Any ideas????