創建一個警報，顯示何時提交表單

Question

我正在嘗試在javascript中創建一個函數，當您單擊“提交”按鈕時，該警報會顯示出來。 我設法使警報顯示出來，但是它僅在打開頁面時彈出，而在單擊“提交”按鈕時不起作用。 這是我在javascript中創建的函數

function orderTics(){
//creates alert
var orderTotal=35;

alert("Your order total is $"+orderTotal);

}

我這樣調用html中的函數：

<script>
orderTics();
</script>

我仍然還是一個初學者，因此所有技巧都將不勝感激

Answer 1

您可以使用以下內容。

$("#FormSelector").on("submit", function() {
   //Your code goes here
});

Answer 2

像這樣調用您的函數：

<input type="button" value="myButton" onclick="orderTopics();">

Answer 3

您可以這樣使用on Submit函數：

$("form.class-name").on("submit", function() {
  alert("I've been submitted.");
});

Vanilla JS onsubmit事件：

document.querySelector("form.class-name").addEventListener("submit", function() {
  alert("I've been submitted.");
}, false);

您也可以使用event.preventDefault(); 防止表單轉到另一頁的方法，如下所示：

$("form.class-name").on("submit", function(event) {
  even.preventDefault();
  alert("Do stuff");
});

Vanilla JS onsubmit事件，帶有event.preventDefault(); 方法：

document.querySelector("form.class-name").addEventListener("submit", function(event) {
  event.preventDefault();
  alert("I've been submitted.");
}, false);

注意 ：當您使用event.preventDefault(); 方法， 即使您單擊警報框中的“ ok按鈕，表單也不會重定向到目標頁面。

最后，您可以只使用“提交”按鈕上的click事件，如下所示：

$("button.submit-button-class").on("click", function() {
  alert("I've been clicked!");
});

Vanilla JS onclick事件：

document.querySelector("button.submit-button-class").addEventListener("click", function() {
  alert("I've been clicked!");
}, false);