首頁猿問重置表單后如何將按鈕狀態(tài)重置為禁用？

重置表單后如何將按鈕狀態(tài)重置為禁用？

Html5

慕尼黑8549860 2024-01-11 16:42:50

在此表單中，我將提交按鈕設置為禁用，直到表單字段完成為止。當按下提交按鈕時，preventDefault() 運行，并顯示警報。關閉該警報后，表單將重置，但按鈕狀態(tài)不會返回到禁用狀態(tài)。//validate form inputfunction validateForm() { let formCheck = document.forms['myForm'].elements; let canSubmit = true; for (let i = 0; i < formCheck.length; i++) { if (formCheck[i].value.length == 0) canSubmit = false; } submitThis.disabled = !canSubmit;}//prevent form submission, alert if form is submitted, reset formdocument.getElementById('submitThis').addEventListener('click', function(e) { e.preventDefault(); alert('Awesomeness! The form will now reset.'); myForm.reset();})body { font-family: sans-serif; margin: 0; padding: 0; height: 100vh;}h2 { text-align: center;}form { display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column;}form input { margin: 0.5em 0; padding: 0.5em; border-radius: 5px;}form input[type=submit]:active { background-color: darkblue; color: white;} <form name="myForm" id="myForm" action="/"> <h3>My Form</h3> <input type="text" id="fName" placeholder="First Name" onkeyup="validateForm()" /> <input type="text" id="address" placeholder="Street Address" onkeyup="validateForm()" /> <input type="text" id="addCity" placeholder="City" onkeyup="validateForm()" /> <input type="text" id="addState" placeholder="State" onkeyup="validateForm()" /> <input type="number" id="addZip" placeholder="Zip Code" onkeyup="validateForm()" />  <input type="submit" id="submitThis" value="Submit" disabled="disabled"/> </form>

查看完整描述

3 回答

largeQ

TA貢獻2039條經(jīng)驗獲得超8個贊

validateForm重置后再次調(diào)用即可：

//validate form input

function validateForm() {

let formCheck = document.forms['myForm'].elements;

let canSubmit = true;

for (let i = 0; i < formCheck.length; i++) {

if (formCheck[i].value.length == 0) canSubmit = false;

}

submitThis.disabled = !canSubmit;

}

//prevent form submission, alert if form is submitted, reset form

document.getElementById('submitThis').addEventListener('click', function(e) {

e.preventDefault();

alert('Awesomeness! The form will now reset.');

myForm.reset();

validateForm();

})

body {

font-family: sans-serif;

margin: 0;

padding: 0;

height: 100vh;

}

h2 {

text-align: center;

}

form {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

flex-direction: column;

}

form input {

margin: 0.5em 0;

padding: 0.5em;

border-radius: 5px;

}

form input[type=submit]:active {

background-color: darkblue;

color: white;

}

</form>

反對回復 2024-01-11

弒天下

TA貢獻1818條經(jīng)驗獲得超8個贊

正如文檔中提到的：

HTMLFormElement.reset ()方法恢復表單元素的默認值。此方法與單擊表單的重置按鈕執(zhí)行相同的操作。
如果表單控件（例如重置按鈕）的名稱或 ID 為 Reset，它將屏蔽表單的重置方法。它不會重置輸入中的其他屬性，例如disabled.

因此，您需要在調(diào)用表單后手動將按鈕設置為禁用，reset()如下所示：

myForm.reset();
document.getElementById("submitThis").disabled = true;

演示：

//validate form input

function validateForm() {

let formCheck = document.forms['myForm'].elements;

let canSubmit = true;

for (let i = 0; i < formCheck.length; i++) {

if (formCheck[i].value.length == 0) canSubmit = false;

}

submitThis.disabled = !canSubmit;

}

//prevent form submission, alert if form is submitted, reset form

document.getElementById('submitThis').addEventListener('click', function(e) {

e.preventDefault();

alert('Awesomeness! The form will now reset.');

myForm.reset();

document.getElementById("submitThis").disabled = true;

})

body{font-family:sans-serif;margin:0;padding:0;height:100vh}h2{text-align:center}form{display:flex;justify-content:center;align-items:center;height:100vh;flex-direction:column}form input{margin:.5em 0;padding:.5em;border-radius:5px}form input[type=submit]:active{background-color:#00008b;color:#fff}

</form>

反對回復 2024-01-11

慕尼黑5688855

TA貢獻1848條經(jīng)驗獲得超2個贊

validateForm提交表格后致電

function validateForm() {

let formCheck = document.forms['myForm'].elements;

let canSubmit = true;

for (let i = 0; i < formCheck.length; i++) {

if (formCheck[i].value.length == 0) canSubmit = false;

}

submitThis.disabled = !canSubmit;

}

//prevent form submission, alert if form is submitted, reset form

document.getElementById('submitThis').addEventListener('click', function(e) {

e.preventDefault();

alert('Awesomeness! The form will now reset.');

myForm.reset();

validateForm(); // changed here

})

body {

font-family: sans-serif;

margin: 0;

padding: 0;

height: 100vh;

}

h2 {

text-align: center;

}

form {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

flex-direction: column;

}

form input {

margin: 0.5em 0;

padding: 0.5em;

border-radius: 5px;

}

form input[type=submit]:active {

background-color: darkblue;

color: white;

}

</form>

反對回復 2024-01-11

3 回答
0 關注
246 瀏覽

關注

添加回答

舉報

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網(wǎng)微信公眾號

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

重置表單后如何將按鈕狀態(tài)重置為禁用？

重置表單后如何將按鈕狀態(tài)重置為禁用？

3 回答

添加回答

重置表單后如何將按鈕狀態(tài)重置為禁用？

重置表單后如何將按鈕狀態(tài)重置為禁用？