Why is jQuery submit triggering its own page when action is set to other page

Question

I have below form in settings.asp page, that should submit to sendmail.asp, but when clicking the button I can see in console that it is triggering settings.asp instead, and I cannot figure out why, since the id on both form and button are unique.

Can anyone see what the problem might be?

*The below code is running in a ASP Classic loop

<form name="MarkErrorReportSolved" id="MarkErrorReportSolved<%=objErrorReportNew("ID")%>" action="sendmail/sendmail.asp?ErrorReportMarked=yes" method="post">

    <!-- Hidden inputs nessesary for send mail - START -->
    <input name="redirect" type="hidden" id="redirect<%=objErrorReportNew("ID")%>" value="<%=strReportIssueFullUrlNoQueryString%>?ErrorReportMarked=yes&ChangeDate=<%=objErrorReportNew("ChangeDate")%>&RepoerterName=<%=objErrorReportNew("RepoerterName")%>&AnchorPoint=ErrorReports">
    <input name="mailto" type="hidden" id="mailto<%=objErrorReportNew("ID")%>" value="<%=objErrorReportNew("Email")%>">
    <input name="MailCC" type="hidden" id="MailCC<%=objErrorReportNew("ID")%>" value="<%=Session("ADMail")%>">
    <input name="subject" type="hidden" id="subjec<%=objErrorReportNew("ID")%>" value="Fejl rapporteret på EFP [LØST]">
    <input name="template" type="hidden" id="template<%=objErrorReportNew("ID")%>" value="templates/emailtemplate_report_issue_solved.htm">
    <input name="html" type="hidden" id="html<%=objErrorReportNew("ID")%>" value="yes">
    <input name="EFPVersion" type="hidden" id="EFPVersion<%=objErrorReportNew("ID")%>" value="<%=Session("EFPVersion")%>">
    <input name="EFPYear" type="hidden" id="EFPYear<%=objErrorReportNew("ID")%>" value="<%= year(now) %>">
    <input name="HeaderSubHeadline" type="hidden" id="HeaderSubHeadline<%=objErrorReportNew("ID")%>" value="Fejl Løst..">
    <input name="HeaderRightTop" type="hidden" id="HeaderRightTop<%=objErrorReportNew("ID")%>" value="">
    <input name="HeaderRightBottom" type="hidden" id="HeaderRightBottom<%=objErrorReportNew("ID")%>" value="">             


  <!-- Hidden inputs nessesary for send mail - END -->

  <!-- Hidden inputs extra for send mail - START -->

    <%
    ReportIssueSolvedsendername=objErrorReportNew("RepoerterName")
    ReportIssueSolvedFirstName = Split(ReportIssueSolvedsendername, " ")(0)
    %>

    <input name="ADdisplayName" type="hidden" id="ADdisplayName<%=objErrorReportNew("ID")%>" value="<%=Session("ADdisplayName")%>">
    <input name="ErrorDescription" type="hidden" id="ErrorDescription<%=objErrorReportNew("ID")%>" value="<%=objErrorReportNew("ErrorDescription")%>">
    <input name="EFPArea" type="hidden" id="EFPArea<%=objErrorReportNew("ID")%>" value="<%=objErrorReportNew("EFPArea")%>">
    <input name="ChangeDate" type="hidden" id="ChangeDate<%=objErrorReportNew("ID")%>" value="<%=objErrorReportNew("ChangeDate")%>">
    <input name="RepoerterName" type="hidden" id="RepoerterName<%=objErrorReportNew("ID")%>" value="<%=ReportIssueSolvedFirstName%>">
    <input name="ID" type="hidden" id="ID<%=objErrorReportNew("ID")%>" value="<%=objErrorReportNew("ID")%>">

  <!-- Hidden inputs extra for send mail - END -->

  <button type="submit" form="MarkErrorReportSolved<%=objErrorReportNew("ID")%>" data-toggle="tooltip" data-html="true" data-placement="right" title="Klik her for at markere fejl som løst<br><i>(Sender også mail til indsender)</i>" id="btnFetch<%=objErrorReportNew("ID")%>" class="btn btn-success mb-2"><i class="fas fa-check-circle"></i></button></td>

  <script>
      
          $("#btnFetch<%=objErrorReportNew("ID")%>").click(function() {
              console.log("Button Clicked")
              // disable button
              $(this).prop("disabled", true);
              // add spinner to button
              $(this).html("<i class='fa fa-spinner fa-spin'></i>");
              $("#MarkErrorReportSolved<%=objErrorReportNew("ID")%>").submit();
              console.log("Form Submitted")
          });
      
  </script>  

</form>

Answer 1

This issue is not related to Classic ASP as that code executes server-side and it’s clear from the code you have posted that the form has the correct action attribute set. It would also be clear from debugging via dev tools that the page submission is being redirected.

This means if you are getting a different page when submitting the form via code there must be some other script in the page that is modifying the action attribute of the form before the submission or is completely overriding it (i.e an AJAX request event handler etc).