使用ajax和jQuery提交表單

我有一個簡單的表單，其中有一個選擇框和兩個選項。這裏是相關的jQuery代碼：使用ajax和jQuery提交表單

$('.myCssClass').on('change', function() { 
     alert("This is executed"); 
     $(this).parent().submit(function(e) { 
     alert("This is NOT executed"); 
      $.ajax({ 
       type: "POST", 
       url: "script.php", 
       data: $(this).parent().serialize(), 
       success: function(data) 
       { 
        alert(data); 
       } 
       }); 
      e.preventDefault(); 
     });

窗體是選擇框的父項。因此，當我更改選擇框選項時執行第一個警報，但是從未到達下一個警報。任何想法爲什麼？

來源

2016-06-28 Whirlwind

當你通過點擊'submit'按鈕來提交表單時，下一步就會被執行。 – Tushar

@Tushar好的，謝謝。我沒有實際提交按鈕。我想在選擇框更改時執行服務器腳本。我該怎麼辦？謝謝你的時間:) – Whirlwind

這應該這樣做。不要打擾提交事件 - 它不會被選擇框觸發。

$('.myCssClass').on('change', function() { 
     $.ajax({ 
      type: "POST", 
      url: "script.php", 
      data: $(this).parent().serialize(), 
      success: function(data) 
      { 
       alert(data); 
      } 
     }); 
    });

來源

2016-06-28 09:57:06 ADyson

好吧，我試過這個，它工作。謝謝一堆！幾分鐘後會接受答案（系統不會讓我這麼做）。 – Whirlwind

@Whirlwind謝謝。不要忘記接受:-) – ADyson

你必須創建submit事件偵聽器outide其他事件：

$('.myCssClass').parent().submit(function(e) { 
    $.ajax({ 
     type: "POST", 
     url: "script.php", 
     data: $(this).serialize(), 
     success: function(data){ 
      alert(data); 
     } 
    }); 

    e.preventDefault(); 
}); 

$('.myCssClass').on('change', function() { 
    $(this).parent().submit(); 
});

或者作爲鏈：

$('.myCssClass').on('change', function() { 
    $(this).parent().submit(); 
}) 
.parent().submit(function(e) { 
    $.ajax({ 
     type: "POST", 
     url: "script.php", 
     data: $(this).serialize(), 
     success: function(data){ 
      alert(data); 
     } 
    }); 

    e.preventDefault(); 
});

但是爲什麼兩個事件？只要發送上更改數據：

$('.myCssClass').on('change', function() { 
    $.ajax({ 
     type: "POST", 
     url: "script.php", 
     data: $(this).parent().serialize(), 
     success: function(data){ 
      alert(data); 
     } 
    }); 
});

來源

2016-06-28 09:56:40 eisbehr

$('.myCssClass').on('change', function() { 
    alert("This is executed"); 
    $(this).parent('form#id').submit(); // improve performance by reducing the traversal 
}); 

$("#form-with-id").on('submit', function(e){ 
    e.preventDefault(); 
    var data = $(this).serialize(); 
    $.ajax({ 
     type: "POST", 
     url: "script.php", 
     data: data, 
     success: function(data){ 
     alert(data); 
     } 
    }); 
});

希望這個作品。

來源

2016-06-28 09:56:44

'data：$（this）.parent（）。serialize（）'應該是'data：$（this）.serialize（）'我想 - 因爲你在一個提交中處理這個的形式，那麼$（this）將是表單本身。 – ADyson

嘗試以下操作：

$('.myCssClass').on('change', function() { 
    alert("This is executed"); 
    $(".form-with-class").submit(); 
}); 

$(".form-with-class").on('submit', function(e){ 
    e.preventDefault(); 
    $.ajax({ 
     type: "POST", 
     url: "script.php", 
     data: $(".form-with-class").serialize(), 
     success: function(data){ 
     alert(data); 
     } 
    }); 
});

來源

2016-06-28 09:58:28

時的處理程序提供了它

剛剛註冊的處理程序，但它不執行實際提交。您的處理程序註冊後

$(this).parent().submit();

：

您可能需要調用。而且，在你的處理程序中，你必須通過「$（this）」（而不是：「$（this）.parent（）」）來引用表單，因爲處理程序屬於表單。

但是既然你會調用提交顯式，那麼在註冊一個你隨後調用的處理函數就沒有意義了。你可以直接激發你的ajax請求：

$('.myCssClass').on('change', function() { 
    alert("This is executed"); 
     $.ajax({ 
      type: "POST", 
      url: "script.php", 
      data: $(this).parent().serialize(), 
      success: function(data) 
      { 
       alert(data); 
      } 
      }); 
    });

來源

2016-06-28 10:00:13

使用ajax和jQuery提交表單

回答

相關問題