簡體   English   中英

重置日期輸入類型,輸入顯示在禁用的文本區域上並附加在之后

[英]Reset date input type with input displayed on a disabled textarea and appended after

我有一個表單,一側帶有輸入字段,另一側帶有禁用的輸入字段,顯示來自其相應輸入字段的值。 我還可以選擇克隆這些 forms,只需一個按鈕即可同時克隆兩側,其中之一是教育,因此可以進行多種教育等。

一切正常,除了日期輸入和 output 字段,如果我使用.reset()document.getElementById("myid").value = ""; 在他們身上 output 停止工作,它只是保持空白。 即使我不重置它們,克隆后日期選擇器也會停止工作。

這是表格這一部分的 javascript 代碼

 /* Print funksjon for år fra */ function velgDatoUtdanning() { var årUtdanning = document.getElementById("input-år").value; document.getElementById("output-år").innerHTML = årUtdanning; } /* Print funksjon for år til */ function velgDatoUtdanningTil() { var årUtdanningTil = document.getElementById("input-årtil").value; document.getElementById("output-årtil").innerHTML = årUtdanningTil; } /* Print funksjon for skole */ var inputBox = document.getElementById("input-skole"); inputBox.onkeyup = function () { document.getElementById("output-skole").innerHTML = inputBox.value * 2; var val = document.getElementById("input-skole").value; document.getElementById("output-skole").value = val; }; /* Print funksjon for fag */ var inputBox = document.getElementById("input-fag"); inputBox.onkeyup = function () { document.getElementById("output-fag").innerHTML = inputBox.value * 2; var val = document.getElementById("input-fag").value; document.getElementById("output-fag").value = val; }; /* Legg til ny utdanning append method */ function appendUtdanning() { if (document.getElementById("input-skole").value == "") { return false; } else if (document.getElementById("input-fag").value == "") { return false; } else { let formUtdanning = document.querySelector("#reset-utdanning"); let clonedFormUtdanning = formUtdanning.cloneNode(true); clonedFormUtdanning.id = "formUtdanning-kopi"; var utdanningNy = document.body.appendChild(clonedFormUtdanning); document.getElementById("motta-utdanning").appendChild(utdanningNy); document.getElementById("reset-utdanning").reset(); let formUtdanningHøyre = document.querySelector("#copy-høyre"); let clonedFormUtdanningHøyre = formUtdanningHøyre.cloneNode(true); clonedFormUtdanningHøyre.id = "formUtdanningHøyre-kopi"; var utdanningNyHøyre = document.body.appendChild(clonedFormUtdanningHøyre); document.getElementById("motta-utdanningHøyre").appendChild(utdanningNyHøyre); document.getElementById("output-skole").value = ""; document.getElementById("output-fag").value = ""; addEventListener("click", function (event) { event.preventDefault(); }); } }
 <div id="copy-utdanning"> <form id="reset-utdanning" class="venstre-form"> <div class="utdanning"> <table id="duplisere-utdanning"> <h4 class="h4-venstre">Utdanning</h4> <tr> <label for="FraUtdanning">Fra</label> <input type="date" rows="2" maxlength="50" id='input-år' class="venstre-input" placeholder="År" onchange="velgDatoUtdanning()"></input> </tr> <tr> <label for="FraUtdanning">Til</label> <input type="date" rows="2" maxlength="50" id='input-årtil' class="venstre-input" placeholder="År" onchange="velgDatoUtdanningTil()"></input> </tr> <tr> <textarea type='text' rows="1" maxlength="50" id='input-skole' class="venstre-input" placeholder="Skole"></textarea> </tr> <tr> <textarea type='text' rows="1" maxlength="50" id='input-fag' class="venstre-input" placeholder="Fag"></textarea> </tr> </table> </div> </form> </div> <div class="kopi-knapp"> <button class="knapp" id="appendUtdanningknapp" onclick="appendUtdanning();">Legg til utdanning</button> </div> <div id="motta-utdanning"> </div> <div> <div class="output-posisjon"> <div id="copy-utdanningHøyre"> <form id="copy-høyre"> <table id="" class=""> <tbody> <tr> <th>Utdanning</th> </tr> <tr> <td><textarea type="date" class="textarea-høyre" type='text' id='output-år' disabled></textarea></td> <td><textarea type="date" class="textarea-høyre" type='text' id='output-årtil' disabled></textarea></td> </tr> </tbody> <tbody> <tr> <td><textarea class="textarea-høyre" type='text' id='output-skole' disabled></textarea></td> <td><textarea colspan="2" class="textarea-høyre" type='text' id='output-fag' disabled></textarea></td> </tr> </tbody> </table> </form> </div> <div id="motta-utdanningHøyre"> </div> </div> </div>

這就是我重置顯示日期的 output texareas 時發生的情況: JSFiddle

任何人知道如何正確重置 output 日期字段或我哪里出錯了?

我最終找到了一個解決方法,我要做的是創建一個類型為 html 的腳本並添加我想在其中克隆的 html,這樣我就不需要重置任何東西,即使它不能幫助我找出什么問題的根源是。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM