首頁猿問帶有 onSubmit...

帶有 onSubmit 處理程序的多步驟表單（純 JavaScript）？

JavaScript

飲歌長嘯 2023-09-28 09:52:24

我正在使用互聯網上的一些代碼來嘗試創建一個模擬遛狗約會安排應用程序。到目前為止，我的多步驟表單可以正常工作，但是我一直在嘗試繼續開始提交處理，并意識到隨著 JavaScript 中的“下一步”按鈕更改為“提交”( ) innerHTML，我不確定將onSubmit()處理功能放在哪里。挑戰是我不允許使用任何服務器端編程，只能使用 HTML、CSS、JS 和 jQuery。處理表單似乎很簡單，但我不確定在哪里實現該onSubmit()功能。請對我寬容點，這是一個大學挑戰，JS 不是我的強項，我嘗試過在網上查找，但我唯一的建議是將 onSubmit 放入按鈕本身，這將是顯而易見的選擇，但因為它是多步表單提交按鈕未編碼到 HTML 中。https://codepen.io/caitlinmooneyx/pen/PoGqMaGCSS form p { margin: 1em 0 .5em 1em;}form { background-color: #fafafa; padding: 1.5em; /*margin-right: 6em;*/}input, select, textarea { margin: 1em; padding: .5em; width: 45%; font-size: 17px; border: 1px solid #aaa;}input[type="checkbox"] { width: auto; margin: .5em 1em 0 1em;}input[type="date"] { color: #aaa!important;}#locationField > input { width: 290%!important;}input.invalid { background-color: #ffdddd;}.tab { display: none;}.step { height: 15px; width: 15px; margin: 0 2px; background-color: #bbbbbb; border: none; border-radius: 50%; display: inline-block; opacity: 0.5;}.step.active { opacity: 1; background-color: #fac123;}

查看完整描述

1 回答

尚方寶劍之說

TA貢獻1788條經驗獲得超4個贊

一個解決方案可能是設置一個默認隱藏的提交按鈕（在第一個選項卡上），并在轉到第二個選項卡時顯示（如果添加更多選項卡，則顯示最后一個選項卡）。這樣您就不必更改innerHTML任何元素，只需切換一個類即可。類似的東西可能看起來像：

...

<button type="button" id="prevBtn" click="nextPrev(-1)">Previous</button>

</div>

</form>

function showTab(n) {

var x = document.getElementsByClassName("tab");

x[n].style.display = "block";

if (n == 0) {

document.getElementById("prevBtn").style.display = "none";

} else {

document.getElementById("prevBtn").style.display = "inline";

}

if (n == (x.length - 1)) {

document.getElementById("nextBtn").classList.add('hide');

document.getElementById("submitBtn").classList.remove('hide');

} else {

document.getElementById("nextBtn").classList.remove('hide');

document.getElementById("submitBtn").classList.add('hide');

}

fixStepIndicator(n)

}

為此，您需要填寫action表格的屬性。

在不添加額外元素的情況下執行此操作的另一種方法是更改onClick下一步/提交按鈕的操作。

function showTab(n) {

var x = document.getElementsByClassName("tab");

var nextSubmitBtn = document.getElementById("nextBtn");

x[n].style.display = "block";

if (n == 0) {

document.getElementById("prevBtn").style.display = "none";

} else {

document.getElementById("prevBtn").style.display = "inline";

}

if (n == (x.length - 1)) {

nextSubmitBtn.textContent = "Submit";

nextSubmitBtn.onClick = someSubmitFunc;

} else {

nextSubmitBtn.textContent = "Next";

nextSubmitBtn.onClick = function () { nextPrev(1); };

}

fixStepIndicator(n)

}

這將允許您保留相同的 HTML 并通過 JS 處理解決方案。如果您這樣做，請記住將當前屬性保留onClick在“下一步”按鈕上，因為這將是運行的初始函數（當您第一次單擊“下一步”時）

一些提示和注意事項：

如果您僅更改元素的文本（例如從“next”到“submit”），最好使用僅更改文本的函數：

// Pure JS

element.textContnet = 'some text';

// jQuery

$element.text('some other text');

這將有助于防止可能來自innerHTML.

你說你正在使用 jQuery，但它只在所提供的 JS 代碼中的一行中使用。如果這是唯一使用 jQuery 庫的行，您可以輕松替換它，并且不包含該庫，從而節省網站大小。

// jQuery way to add class (line 111)

$("#sdate").addClass("invalid");

// Pure JS equivalent

document.getElementById('sdate').classList.add('invalid');

兩者都可以完成工作（添加一個類），如果您更喜歡使用 jQuery，但如果這是您唯一使用它的地方，那么這可能是一個替代方案。

反對回復 2023-09-28

1 回答
0 關注
113 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

帶有 onSubmit 處理程序的多步驟表單（純 JavaScript）？

帶有 onSubmit 處理程序的多步驟表單（純 JavaScript）？

1 回答

添加回答

帶有 onSubmit 處理程序的多步驟表單（純 JavaScript）？

帶有 onSubmit 處理程序的多步驟表單（純 JavaScript）？