警告の追加時にHTML入力値がクリアされる

Question

ボタンをクリックしたときに入力フィールドを追加するコードがあります。制限== 5（カウンタ）のときにブートストラップ警告を表示するように設定しました。それはすべて.innerhtmlを設定することで行われます。私の問題は、5（制限）時間後にフィールドを追加すると、警告に追加されますが、フィールド値はクリアされるということです。値が消えないようにこのコードを再作成するにはどうすればよいですか？私は過去2時間をGoogleで過ごしましたが、別のものを試してみるとうれしいことです。

function typePicker(){ 
 
var sel=document.getElementById("type"); 
 
var typeInputs=document.getElementById("typeInputs"); 
 
var aps = '<div class="form-group"><input type="text" class="form-control" name="ipaddress" id="ipaddress" placeholder="IP Address"></div><!-- IP Address --><div class="form-group"><input type="text" class="form-control" name="mac-address" id="mac-address" placeholder="MAC Address"></div><!-- MAC Address --><div class="form-group"><input type="text" class="form-control" name="range" id="range" placeholder="Range in M"></div><!-- Range --><div class="form-group"><input type="text" class="textbox-n form-control" name="bands" id="bands" placeholder="Bands" ></div><!-- Bands --><div class="form-group"><input type="text" class="form-control" name="channels" id="channels" placeholder="Channel(s)"></div><!-- Channels --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="btn-group" data-toggle="buttons"><label for="">PoE</label><br><label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label></div> <br><br><!-- PoE --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input class="form-control" id="location" placeholder="Location"></div><!-- Location --></div>'; 
 
var cables = '<div class="form-group"><input type="text" class="form-control" id="type" name="type" placeholder="Type"></div><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="quantity" name="quantity" placeholder="Quantity"></div><!-- Quantity --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location -->'; 
 
var deskPhones = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="form-group"><input type="text" class="form-control" id="phoneNumber" name="phoneNumber" placeholder="Phone Number"></div> <!-- Phone Number --><div class="form-group"><input type="text" class="form-control" id="extension" name="extension" placeholder="Extension"></div><!-- Extension -->'; 
 
var desktops = '<div class="form-group"><input type="text" class="form-control" id="cpu" name="cpu" placeholder="CPU"></div><!-- CPU --><div class="form-group"><input type="text" class="form-control" id="ram" name="ram" placeholder="RAM"></div> <!-- RAM --><div class="form-group"><input type="text" class="form-control" id="gpu" name="gpu" placeholder="GPU"></div><!-- GPU --><div class="form-group"><input type="text" class="form-control" id="vram" name="vram" placeholder="VRAM"></div><!-- VRAM --><div class="form-group"><input type="number" class="form-control" id="numDrive" name="numDrive" placeholder="Number of Drives"></div><!-- Number of Drives --><div class="form-group"><input type="number" class="form-control" id="sizeDrive name="sizeDrive" placeholder="Size of Drive(s)"></div><!-- Size of Drive(s) --><div class="form-group"><input type="text" class="form-control" id="sizeDrive" name="sizeDrive" placeholder="Type of Drive(s)"></div><!-- Type of Drives --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input type="number" class="form-control" id="usbPorts" name="usbPorts" placeholder="Number of USB Ports"></div><!-- Number of USB Ports --><div class="form-group"><input type="text" class="form-control" id="name" name="name" placeholder="Machine Name"></div><!-- Machine Name --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="btn-group" data-toggle="buttons"><label for="">Stand Alone</label><br><label class="btn btn-primary"><input type="radio" name="standAlone" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="standAlone" id="option2"> No</label></div> <br><br><!-- Stand Alone -->'; 
 
var laptops = '<div class="form-group"><input type="text" class="form-control" id="cpu" name="cpu" placeholder="CPU"></div><!-- CPU --><div class="form-group"><input type="text" class="form-control" id="ram" name="ram" placeholder="RAM"></div><!-- RAM --><div class="form-group"><input type="text" class="form-control" id="gpu" name="gpu" placeholder="GPU"></div><!-- GPU --><div class="form-group"><input type="text" class="form-control" id="vram" name="vram" placeholder="VRAM"></div><!-- VRAM --><div class="form-group"><input type="number" class="form-control" id="sizeDrive" name="sizeDrive" placeholder="Size of Drive(s)"></div><!-- Size of Drive(s) --><div class="form-group"><input type="text" class="form-control" id="typeDrive"name="typeDrive" placeholder="Type of Drive(s)"></div><!-- Type of Drives --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input type="number" class="form-control" id="usbPorts" name="usbPorts" placeholder="Number of USB Ports"></div><!-- Number of USB Ports --><div class="form-group"><input type="text" class="form-control" id="name" name="name" placeholder="Machine Name"></div><!-- Machine Name --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="form-group"><input type="text" class="form-control" id="user" name="user" placeholder="User"></div><!-- User --><div class="btn-group" data-toggle="buttons"><label for="">Stand Alone</label><br><label class="btn btn-primary"><input type="radio" name="standAlone" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="standAlone" id="option2"> No</label></div> <br><br><!-- Stand Alone -->'; 
 
var mobilePhones = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="lifeExpectancy" name="lifeExpectancy" placeholder="Life Expectancy"></div><!-- Life Expectancy --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="phoneNumber" name="phoneNumber" placeholder="Phone Number"></div><!-- Phone Number --><div class="form-group"><input type="text" class="form-control" id="os" name="os" placeholder="Operating System"></div><!-- OS --><div class="form-group"><input type="text" class="form-control" id="simNumber" name="simNumber" placeholder="SIM Number"></div><!-- SIM Number -->'; 
 
var monitors = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="text" class="form-control" id="cost" nameid="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="form-group"><input type="text" class="form-control" id="resolution" name="resolution" placeholder="Resolution"></div><!-- Resolution --><div class="form-group"><input type="text" class="form-control" id="panelType" name="panelType" placeholder="Panel Type"></div><!-- Panel Type -->'; 
 
var printers = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input class="form-control" id="lifeExpectancy" name="lifeExpectancy" placeholder="Life Expectancy"></div><!-- Life Expectancy --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location -->      '; 
 
var projectors = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div><!-- Location --><div class="form-group"><input type="text" class="form-control" id="resolution" name="resolution" placeholder="Resolution"></div><!-- Resolution -->'; 
 
var routers = '<div class="form-group "><select class="custom-select form-control" id="sel-speed" name="router-speed" onchange="speed()"><option selected>Select Router Speed</option><option value="100">10/100 Mbps</option><option value="1000">10/100/1000 Mbps</option><option value="10000">10/100/1000/10000 Mbps</option><option value="other">Other</option></select></div><!-- Router Speed --><div class="form-group" id="speed" name="speed"></div> <!-- Router Speed other input only show when above "other" is selected --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="btn-group" data-toggle="buttons"><label for="">PoE</label><br><label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label></div><br><br><!-- PoE --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date -->'; 
 
var switches = '<div class="form-group "><select class="custom-select form-control" id="sel-speed" name="switch-speed" onchange="speed()"><option selected>Select Switch Speed</option><option value="100">10/100 Mbps</option><option value="1000">10/100/1000 Mbps</option><option value="10000">10/100/1000/10000 Mbps</option><option value="other">Other</option></select></div><!-- Switch Speed --><div class="form-group" id="speed"></div> <!-- Switch Speed other input only show when above "other" is selected --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input type="number" class="form-control" id="switch-ports" name="switch-ports" placeholder="Number of Ports" min="1"></div><!-- Number of Ports --><div class="btn-group" data-toggle="buttons"><label for="">PoE</label><br><label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label></div><br><br><!-- PoE --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date -->'; 
 
var tablets = '<div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="form-group"><input type="text" class="form-control" id="cost" name="cost" placeholder="Cost"></div><!-- Cost --><div class="form-group"><input type="number" class="form-control" id="life" name="life" placeholder="Life Expectancy In Months" min="0.25" step="0.25"></div><!-- Expected Life in Months --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input type="text" class="form-control" id="location" name="location" placeholder="Location"></div>   <!-- Location --><div class="form-group"><input type="text" class="form-control" id="ram" name="ram" placeholder="RAM"></div><!-- RAM --><div class="form-group"><input type="text" class="form-control" id="resolution" name="resolution" placeholder="Resolution"></div><!-- Resolution -->'; 
 
// var other = '<div class="form-group"><label for="customField" class="control-label">Custom Field</label><input type="text" class="form-control" id="customField" name="customField" placeholder="Custom Field"></div>'; 
 
var other = '<div class="form-group"><label for="customField" class="control-label">Custom Field</label><input type="text" class="form-control" id="customField" name="customField" placeholder="Custom Field"> </div> <input type="button" class="btn btn-primary add" id="add" value="Add Field"/>'; 
 
var type = '<div class="form-group"><input type="text" class="form-control" id="type" name="type" placeholder="Asset Type"></div>'; 
 

 
if(sel.value=="aps"){ 
 
typeInputs.innerHTML=aps; 
 
} 
 

 
if(sel.value=="cables"){ 
 
    typeInputs.innerHTML=cables; 
 
} 
 

 
if(sel.value=="deskPhones"){ 
 
    typeInputs.innerHTML=deskPhones; 
 
} 
 

 
if(sel.value=="desktops"){ 
 
    typeInputs.innerHTML=desktops; 
 
} 
 

 
if(sel.value=="laptops"){ 
 
typeInputs.innerHTML=laptops; 
 
} 
 

 
if(sel.value=="mobilePhones"){ 
 
typeInputs.innerHTML=mobilePhones; 
 
} 
 

 
if(sel.value=="monitors"){ 
 
typeInputs.innerHTML=monitors; 
 
} 
 

 
if(sel.value=="printers"){ 
 
typeInputs.innerHTML=printers; 
 
} 
 

 
if(sel.value=="projectors"){ 
 
typeInputs.innerHTML=projectors; 
 
} 
 

 
if(sel.value=="routers"){ 
 
typeInputs.innerHTML=routers; 
 
} 
 

 
if(sel.value=="switches"){ 
 
typeInputs.innerHTML=switches; 
 
} 
 

 
if(sel.value=="tablets"){ 
 
typeInputs.innerHTML=tablets; 
 
} 
 

 
if(sel.value=="other"){ 
 
typeInputs.innerHTML=type + other; 
 
} 
 

 

 
} 
 

 
var typeInputs=document.getElementById("typeInputs"); 
 
var otherMessage = '<br><br><div class="alert alert-warning" role="alert">Limit of 5 custom fields for your plan!</div>'; 
 
var sel=document.getElementById("type"); 
 
var limit = 6; 
 
var counter = 1; 
 
$(document).on("click",".add",function(){ 
 
if(counter < limit){ 
 
    if(sel.value !="other"){ 
 
    counter = 1; 
 
    } 
 
    counter ++; 
 
    if(counter == limit){ 
 
    var p = document.getElementById("typeInputs").innerHTML; 
 
    return typeInputs.innerHTML = p + otherMessage; 
 
    } 
 
    var n= $(this).prev(".form-group").length+1; 
 
var temp = $(this).prev(".form-group").clone(); 
 
$('input:first',temp).attr('placeholder','Custom Field').val(""); 
 
$(this).prev(".form-group").after(temp); 
 
} 
 
});

<div class="form-group"> 
 
    <label for="type" class="control-label">Type</label> 
 
    <select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()"> 
 
     <option value="aps">Access Point</option> 
 
     <option value="cables">Cable</option> 
 
    
 
     <option value="other">Other</option> 
 
    </select> 
 
    </div> 
 
           
 
    <div class="form-group" id="typeInputs"> 
 
            
 
    </div> 
 
    
 
    <script 
 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
 
    crossorigin="anonymous"></script>

私はここのコードを凝縮するために選択のオプションの一部を削除しました。また、select値に基づいてhtmlを表示するだけなので、typePicker関数も含まれていません。必要に応じて編集することができます。 Stack Overflowでは、今すぐ追加すると余りにも多くのコードでコンテンツが不足していると言われています。

Answer 1

あなたの問題はinnerHTML属性が更新され、入力が反映されていませんここで

var p = document.getElementById("typeInputs").innerHTML; 
return typeInputs.innerHTML = p + otherMessage; 

可能性があります。 innerHTMLの代わりにメッセージ文字列を設定する代わりに、おそらく要素を作成してDOMオブジェクトに追加してみてください。

var warning = document.createElement('div'); 
warning.innerHTML = '<br><br><div class="alert alert-warning" role="alert">Limit of 5 custom fields for your plan!</div>'; 
document.getElementById("typeInputs").appendChild(warning);