e.preventDefault not preventing submit

Question

So on localhost I have no issues with the function at all, it works flawless but now I uploaded it to my host and it doesn't seem to work anymore. The form gets somewhat submitted and the URL gets all the info from the datastring in it. Please help me fix it.

This gets added to the URL in the addressbar:

?inlineRadioOptions=pre-set&customname=&customtype=&Crime=&DescriptionForm=&inlineRadioOptions3=none&Report=&selected-text=1&CordX=4675&CordY=4558&SubmitCrime=

$("#CrimeForm").submit(function(e) {
  e.preventDefault();
  if ($('#RadioCrime2').is(':checked')) {
    var Crime = $("#customname").val();
    var Type = $("#customtype").val();
  } else {
    var Crime = $("#select2").val();
    var Type = 'NONE';
  }

  if ($('#RadioDiv2').is(':checked')) {
    var UseDiv = 1;
  } else {
    var UseDiv = 0;
  }

  var value = $(this).find('select[name="DivisionSelect"]').val();
  var divss = (value ? value.join('') : '');

  var DescriptionForm = $("#DescriptionForm").val();
  var Report = $("#Report").val();
  var PinID = $("#selected-text").val();
  var CordX = $("#CordXNew").val();
  var CordY = $("#CordYNew").val();
  var UserID = <?php echo $AccountID;?>;
  var dataString = 'Crime=' + Crime + '&Type=' + Type + '&DescriptionForm=' + DescriptionForm + '&PinID=' + PinID + '&CordX=' + CordX + '&CordY=' + CordY + '&UserID=' + UserID + '&DivSelect=' + UseDiv + '&Divs=' + divss + '&Report=' + Report;
  if (Crime == '' || Type == '' || DescriptionForm == '' || PinID == '' || CordX == '' || CordY == '') {
    document.getElementById("Alert-group").innerHTML = '<div class="alert alert-danger" role="alert">You need to fill out everything!</div>';
  } else {
    var n = DescriptionForm.length;
    if (n > 500) {
      document.getElementById("Alert-group").innerHTML = '<div class="alert alert-danger" role="alert">You have ' + n + ' characters in the description, limit them to 500!</div>';
    } else {
      $.ajax({
        type: "POST",
        url: "SendInput.php",
        data: dataString,
        cache: false,
        success: function(result) {
          document.getElementById("Alert-group").innerHTML = '<div class="alert alert-success" role="alert">' + result + '</div>';
          $('#DescriptionForm').val('');
          $('#customname').val('');
          $('#Report').val('');
          $('#customtype').prop('selectedIndex', 0);
          $("#select2").val(null).trigger("change");
          document.getElementById("CustomCrime").style.display = "none";
          document.getElementById("DefaultCrime").style.display = "block";
          document.getElementById("RadioCrime").checked = true;
          document.getElementById("RadioDiv").checked = true;
          document.getElementById("ChooseDivision").style.display = "none";
          $("#DivisionSelect option:selected").prop("selected", false);
        }
      });
    }
  }
  return false;
});

Answer 1

Instead of relying on form submission and its event cancellation, you can use a regular button within your form. The button being sort of like:<input type='button' id='btnSendCrimeForm' value='Send Form' />

Then, within the contents of a document.ready callback, you can register to the aforementioned button's click event, within which you execute the code you wanted to execute upon form submission.

$("#btnSendCrimeForm").click(function(e) {
    if($('#RadioCrime2').is(':checked')) {
        var Crime = $("#customname").val();
        var Type = $("#customtype").val();
    }else{
        var Crime = $("#select2").val();
        var Type = 'NONE';
    }

    if($('#RadioDiv2').is(':checked')) {
        var UseDiv = 1;
    }else{
        var UseDiv = 0;
    }

    var value = $(this).find('select[name="DivisionSelect"]').val();
    var divss = (value ? value.join('') : '');

    var DescriptionForm = $("#DescriptionForm").val();
    var Report = $("#Report").val();
    var PinID = $("#selected-text").val();
    var CordX = $("#CordXNew").val();
    var CordY = $("#CordYNew").val();
    var UserID = <?php echo $AccountID;?>;
    var dataString = 'Crime='+ Crime + '&Type='+ Type + '&DescriptionForm='+ DescriptionForm +'&PinID='+ PinID + '&CordX='+ CordX + '&CordY='+ CordY + '&UserID='+ UserID + '&DivSelect='+ UseDiv + '&Divs='+ divss + '&Report='+ Report;
    if(Crime==''||Type==''||DescriptionForm==''||PinID==''||CordX==''||CordY=='')
    {
        document.getElementById("Alert-group").innerHTML = '<div class="alert alert-danger" role="alert">You need to fill out everything!</div>';
    }
    else
    {
        var n = DescriptionForm.length;
        if(n > 500){
            document.getElementById("Alert-group").innerHTML = '<div class="alert alert-danger" role="alert">You have '+ n +' characters in the description, limit them to 500!</div>';
        }else{
            $.ajax({
                type: "POST",
                url: "SendInput.php",
                data: dataString,
                cache: false,
                success: function(result){
                    document.getElementById("Alert-group").innerHTML = '<div class="alert alert-success" role="alert">'+result+'</div>';
                    $('#DescriptionForm').val('');
                    $('#customname').val('');
                    $('#Report').val('');
                    $('#customtype').prop('selectedIndex',0);
                    $("#select2").val(null).trigger("change"); 
                    document.getElementById("CustomCrime").style.display = "none";
                    document.getElementById("DefaultCrime").style.display = "block";
                    document.getElementById("RadioCrime").checked = true;
                    document.getElementById("RadioDiv").checked = true;
                    document.getElementById("ChooseDivision").style.display = "none";
                    $("#DivisionSelect option:selected").prop("selected", false);
                }   
            });
        }
    }
    return false;
});