Question

我的代码会在单击按钮时添加输入字段。我设置为在限制== 5（计数器）时显示引导警告。它是通过设置.innerhtml完成的。我的问题是，当我在5（限制）次数后点击添加字段时，它会在警告中添加，但它会清除字段值。如何重新编写代码以使值不会消失？我花了两个多小时在谷歌上，并没有运气尝试不同的东西，希望你们可以在这里帮助。

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中的一些选项以压缩此处的代码。我还没有包含typePicker函数，因为它只显示基于select值的html。如果需要，我可以编辑以包含此内容。如果我现在添加它，那么Stack Overflow表示代码太多，内容不够。

Answer 1

您的问题可能就在这里

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

innerHTML属性未反映更新的输入。不是将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);

添加警告后清除HTML输入值

1 个答案: