好吧，這可能是一個有點混亂的問題，但無論如何。 我有一個表單，針對一個外部URL進行驗證。
<form
id="form1".
name="form1"。
class="formclass"
accept-charset="UTF-8"/span>
autocomplete="off"
enctype="multipart/form-data"/span>
method="post"
無效
action="https://www.external_url.com"
>。
然而，我想在這個時候做一些事情，用戶點擊提交按鈕，表單被發送到外部URL。 基本上，我想通過從表單中洗掉動作并創建一個事件處理程式來實作這個目的：
button=document.getElementById("submitButton"/span>)。
button.addEventListener('click', submitaction)。
function submitaction（） {
//做一些事情，然后提交到外部URL。
}
當我完成 "做某事 "時（例如，在發送前顯示一個警報），我想把整個表單發送到外部。 我需要做什么來實作與表單中的操作相同的輸出呢？
謝謝大家！
編輯：
我采納了關于提交事件監聽器的建議。然而，在提交表單之前，應進行AJAX請求。
form1.addEventListener('submit', function(e)>{
$.ajax({
type: 'POST'。
網址。'form_submission.php',
資料。{'check_input': input.value},
成功。function（response）{
if (response == true){
alert("Thank you for your inquiry!")。
}
}
else {
alert("您輸入的資訊不正確。")
e.preventDefault()。
}
}
}
);
不知為何，事件監聽器忽略了我的 AJAX 請求，仍然提交了表單。它甚至不顯示警報，這真是太奇怪了。
uj5u.com熱心網友回復：
移除action屬性不會阻止表單提交，它只會重新加載頁面。
你應該在表單上附加一個submit事件監聽器，并在回呼中添加你希望在提交前執行的代碼：
form1. addEventListener('submit', function(>/span>){
alert('submit! ')。
})< form id="form1"/span> name="form1" class="formclass" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="htps: //www. external_url.com">。
<button>submit</button>
</form>/span>對于有條件的表單提交，Event.preventDefault()被用來阻止表單提交：
form1. addEventListener('submit'/span>, function(e) {
if (!input.value.length > 0) {
console.log('You have not filled out the input field')
e.preventDefault（）。
}
})< form id="form1"/span> name="form1" class="formclass" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="htps: //www. external_url.com">。
<input id="input">/span>
<button>submit</button>/span>
</form>/span>如果你正在進行AJAX請求，你的代碼應該是：
如果你正在進行AJAX請求，你的代碼應該是：
form1.addEventListener('submit'/span>, function(e) {
e.preventDefault（）。
$.ajax（{
type: 'POST'。
url: 'form_submission.php',
data: {
'check_input': input.value。
},
success: function(response) {
if (response == true) {
alert("Thank you for your inquiry!") 。
form1.submit（）。
}
}
else {
alert("您輸入的內容不正確。")
}
})
});
uj5u.com熱心網友回復：
這是一個小片段，說明了在提交表單之前使用fetch-post來檢查輸入值。只有當輸入欄位的數值為>0時，表單才會被提交。
form1. addEventListener('submit'/span>, function(e) {
e.preventDefault（）。
fetch("https://jsonplaceholder.typicode.com/users"/span>,{
method: 'POST'。
headers: {'Content-Type':'application/json'},
body: JSON.stringify({usrVal：input1.value})
}).then(r=> r. json().then(o=> {
if ( o.usrVal>0) form1.submit（)
})
})< form id="form1"/span> name="form1" class="formclass" accept-charset="UTF-8" autocomplete="off" enctype="multipart/form-data" method="post" novalidate action="htps: //www. external_url.com">。
<input id="input1">
<button>submit</button>/span>
</form>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/326109.html
標籤：