Search code examples
jqueryasp-classic

Unknown Uncaught Type Error in Jquery/ASP


I need the submit button to check the null status of a radio box while being concatenated with asp to include an asp counter variable. A big red flag to me is that this code is displaying on the page as raw text, as if it were dropping the script tags completely from the code. If the 4th line of code is commented out, it wont display as such.

So far, I've built up this snip of code but it is not firing when the submit button is pressed.

<%
TmpString = ""
TmpString = TmpString & "<script type=" & chr(34) & "text/javascript" & chr(34) & ">"

TmpString = TmpString &"$(document).ready(function() {" 
    TmpString = "$(document).submit(function() {"
    TmpString = TmpString & chr(10) & chr(13)
        For z = 0 to TotalUnits -1
            TmpString = TmpString & "var genericValue" & z & "= document.getElementsByName(" & chr(34) & "checkbox" & z & chr(34) & ").value;"
            TmpString = TmpString & chr(10) & chr(13)
            TmpString = TmpString & "If genericValue" & z & " == Null {"
            TmpString = TmpString & chr(10) & chr(13)
                TmpString = TmpString & "alert(" & chr(34) & "Select Yes or No for checkbox" & chr(34) & ") };" 
                TmpString = TmpString & chr(10) & chr(13)
            TmpString = TmpString & "return; });"
            TmpString = TmpString & chr(10) & chr(13)
        Next
            TmpString = TmpString &"$(" & chr(34) & "button" & chr(34) & ").click(function() {"
            TmpString = TmpString & chr(10) & chr(13)
            TmpString = TmpString & "$(" & chr(34) & "formID" & chr(34) & ").submit() }); });"
            TmpString = TmpString & chr(10) & chr(13)
        TmpString = TmpString & "</script>"
Response.Write (TmpString)
%> 

'checkradio HTML

                TmpString = TmpString & "<label id=" & chr(34) & "checklabel" & chr(34)
                TmpString = TmpString & " name=" & chr(34) & "checklabel" & chr(34)
                TmpString = TmpString & ">The Vehicle Requires Repair</label>"


                TmpString = TmpString & "<label id=" & chr(34) & "yesno" & chr(34) & ">"
                TmpString = TmpString & "<input type=" & chr(34) & "radio" & chr(34) & "name=" & chr(34) & "checkradio" & z & chr(34)
                TmpString = TmpString & "value=" & chr(34) & "1" & chr(34) & "id=" & chr(34) & "Radio1" & chr(34) & ">Yes</label>"
                TmpString = TmpString & "<label id=" & chr(34) & "yesno" & chr(34) & ">"
                TmpString = TmpString & "<input type=" & chr(34) & "radio" & chr(34) & "name=" & chr(34) & "checkradio" & z & chr(34)
                TmpString = TmpString & "value=" & chr(34) & "0" & chr(34) & "id=" & chr(34) & "Radio0" & chr(34) & ">No</label><br>"

This is the error I get in the browser's Console:

"Uncaught TypeError: Cannot read property 'addEventListener' of null"


Solution

  • I believe you're getting errors in your console because the javascript you're sending to the browser is simply invalid.

    The code you've presented is (quite simply) awful, and therefore it's not easy to see the javascript errors that the code will produce...

    • If genericValue1 == Null { will never work as javascript.
    • $("formID").submit(); won't work because you need # before the ID

    As you've stated that this is classic ASP, it could be written as following...

    <script type="text/javascript">
      $(function() {
        $(document).submit(function() {
          <%For z = 0 to TotalUnits - 1%>
          var genericValue<%=z%> = document.getElementsByName("checkbox<%=z%>").value;
          if (genericValue<%=z%> == null) {
            alert("Select Yes or No for checkbox <%=z%>");
            return false;
          }
          <%Next%>
          $("button").click(function() {
            $("#formID").submit();
          });
        });
      });
    </script>
    

    Which I hope you can see is far easier to read and understand