e.preventDefault不阻止提交

Question

因此，在localhost上，我的功能完全沒有問題，它可以完美運行，但是現在我將其上傳到了主機上，它似乎不再起作用。 該表單已提交，URL從其中的數據字符串中獲取了所有信息。 請幫我修復它。

這被添加到地址欄中的URL：

？inlineRadioOptions =預設＆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

不必依賴表單提交及其事件取消，而是可以在表單中使用常規按鈕。 該按鈕有點像： <input type='button' id='btnSendCrimeForm' value='Send Form' />

然后，在document.ready回調的內容中，您可以注冊到上述按鈕的click事件，在其中執行您希望在提交表單時執行的代碼。

$("#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;
});