I have been attempting to implement a basic JavaScript function in the .ascx file of my ASP.NET and VB.NET application. Below is the HTML code I included within the ASP panel tag.
<div class="inline" >
<asp:CheckBox ID="tick" runat="server" Text="Please tick the box to confirm the above information are correct" Checked="false" CssClass="small" onchange="EnableSubmit()" />
</div>
In addition, here is the JavaScript code snippet in the .ascx file:
<script type="text/javascript">
function EnableSubmit() {
if (document.getElementById("tick").checked == true) {
document.getElementById("uxSubmit").enabled = true;
}
else {
document.getElementById("uxSubmit").enabled = false;
}
}
Despite the intended functionality of requiring users to check a checkbox before enabling a submit button, the function does not work as expected. Upon checking the checkbox, a white box seems to pop up on the screen.
I attempted to follow advice from a related link, but it resulted in unexpected behavior causing the entire form to disappear. How to use javascript in .ascx pages
Your suggestions and assistance would be greatly appreciated.
Thank you
The complete code in the .ascx file can be found below. Feel free to request further information if necessary.
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="CandidateRegistration3.ascx.vb"
Inherits="_controls_CandidateRegistration3" %>
<asp:CustomValidator ID="uxProfileCVValReq" runat="server" EnableViewState="false"
ErrorMessage="You create a 'Personal Profile' or upload a Word Compatible or PDF 'Curriculum Vitae'."
ValidationGroup="candidateregistration" Display="None" />
<div style="margin-bottom: 20px;">
<asp:Panel ID="panUpload" runat="server">
<asp:CustomValidator ID="CustomValidator1" runat="server" EnableViewState="false"
ErrorMessage="You must upload a Word Compatible or PDF 'Curriculum Vitae'." Display="None"
ValidationGroup="CVUpload" />
<p>Your registration form will be populated from the details contained in your CV or application form, please upload now.</p>
<asp:FileUpload ID="txtFilePath" runat="server" CssClass="" ValidationGroup="CVUpload" />
<asp:HiddenField ID="hdDocId" runat="server" />
</asp:Panel>
<asp:Panel ID="panForm" runat="server" Visible="false">
<table class="table table-bordered">
<tr>
<td><label>Email Address</label></td>
<td>
<asp:TextBox ID="uxEmail" runat="server" CssClass="" MaxLength="100"
EnableViewState="False" />
</td>
</tr>
<tr>
<td><label>Password</label></td>
<td>
<asp:TextBox ID="uxPassword" runat="server" CssClass="" MaxLength="20"
EnableViewState="False" TextMode="Password" />
</td>
</tr>
<tr>
<td><label>Confirm Password </label></td>
<td>
<asp:TextBox ID="uxPasswordConfirm" runat="server" CssClass="" TextMode="Password" />
</td>
</tr>
</table>
<asp:CustomValidator ID="uxCVFileTypeReq" runat="server" EnableViewState="false"
ErrorMessage="You must upload a Word Compatible or PDF 'Curriculum Vitae'." Display="None"
ValidationGroup="CVUpload" />
<asp:HiddenField ID="uxCVID" runat="server" EnableViewState="false" />
<p>To complete your registration please click Next.</p>
<div class="inline" >
<asp:CheckBox ID="tick" runat="server" Text="Please tick the box to confirm the above information are correct" Checked="false" CssClass="small" onchange="EnableSubmit()" />
</div>
</asp:Panel>
</div>
<p class="">
<asp:LinkButton runat="server" ID="uxSubmit" Text="Next" OnClick="SaveClick" CausesValidation="true" ValidationGroup="candidateregistration" CssClass="button2" Enabled="false" />
<a href="#" onclick="parent.$.colorbox.close()" class="button2">Cancel</a>
<asp:LinkButton runat="server" ID="uxUpload" Text="Upload" CssClass="button2" CausesValidation="true" ValidationGroup="CVUpload" /> </p>
<script type="text/javascript">
function EnableSubmit() {
if (document.getElementById("tick").checked == true) {
document.getElementById("uxSubmit").enabled = true;
}
else {
document.getElementById("uxSubmit").enabled = false;
}
}
</script>
To better understand the issue at hand and view the live page, please visit the following link.
and click apply now button.
A popup will appear. Please enter an email address to register (any email address will suffice, such as [email protected]).
After uploading a document, you will see the form with the checkbox located at the bottom of the page.