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

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

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

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

飲歌長嘯 2023-09-28 09:52:24
我正在使用互聯(lián)網(wǎng)上的一些代碼來嘗試創(chuàng)建一個(gè)模擬遛狗約會(huì)安排應(yīng)用程序。到目前為止，我的多步驟表單可以正常工作，但是我一直在嘗試?yán)^續(xù)開始提交處理，并意識(shí)到隨著 JavaScript 中的“下一步”按鈕更改為“提交”( ) innerHTML，我不確定將onSubmit()處理功能放在哪里。挑戰(zhàn)是我不允許使用任何服務(wù)器端編程，只能使用 HTML、CSS、JS 和 jQuery。處理表單似乎很簡單，但我不確定在哪里實(shí)現(xiàn)該onSubmit()功能。請(qǐng)對(duì)我寬容點(diǎn)，這是一個(gè)大學(xué)挑戰(zhàn)，JS 不是我的強(qiáng)項(xiàng)，我嘗試過在網(wǎng)上查找，但我唯一的建議是將 onSubmit 放入按鈕本身，這將是顯而易見的選擇，但因?yàn)樗嵌嗖奖韱翁峤话粹o未編碼到 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貢獻(xiàn)1788條經(jīng)驗(yàn) 獲得超4個(gè)贊

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


<form id="regForm" name="regForm" action="[NEED ACTION]" class="col-sm-6">

    ...

    <div style="overflow:auto;">

        <div style="float:right;">

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

            <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>

            <submit type="submit" class="hide" value="Submit" />

        </div>

    </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表格的屬性。


在不添加額外元素的情況下執(zhí)行此操作的另一種方法是更改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 處理解決方案。如果您這樣做，請(qǐng)記住將當(dāng)前屬性保留onClick在“下一步”按鈕上，因?yàn)檫@將是運(yùn)行的初始函數(shù)（當(dāng)您第一次單擊“下一步”時(shí)）


一些提示和注意事項(xiàng)：


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


// Pure JS

element.textContnet = 'some text';


// jQuery

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

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


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


// jQuery way to add class (line 111)

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


// Pure JS equivalent 

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

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


查看完整回答
反對(duì) 回復(fù) 2023-09-28
  • 1 回答
  • 0 關(guān)注
  • 129 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)