Wenn Benutzer drücken Sie Enter, ändert es Drop-down-Menü Inhalt und Textfelddaten auf seine Standard

Question

Ich habe ein Formular, wo ich brauche eine Einrichtung, wo der Benutzer einige Daten in Textfeld eingeben und gibt die Zeit mit jquery eingeben es sollte neue Steuerelemente wie neues Textfeld erstellen , Dropdown-Menü, Textfeld. und es funktioniert auch, aber es hat einen Bug wie wenn Benutzer andere Daten eingeben und Treffer geben den Zeitwert früherer Kontrollen, Dropdown und Textfeld ändert sich in den Standard. mir helfen, es

hier zu lösen, ist mein Code:

<script type="text/javascript"> 
function addMbo(value){ 
var div = document.getElementById('mboTable'); 
var keycode = (event.keyCode ? event.keyCode : event.which); 
if(keycode == '13'){ 
    event.preventDefault(); 
var divName = document.getElementById('mboName'); 
var divState = document.getElementById('mboState'); 
var divProgress = document.getElementById('mboProgress'); 

divName.innerHTML = divName.innerHTML + "<input class=form-control type=text  name=mboName value='" + value + "' id=mboNamw/>" 
divState.innerHTML = divState.innerHTML + "<select class=form-control > <option value=1>In Progress </option><option <value=2>Completed</option><option value=3>Cancled</option></select>" 
divProgress.innerHTML = divProgress.innerHTML + "<input class=form-control type=text name=progress id=progress />" 
document.getElementById('mboNameInput').value = null; 


} 
} 

</script> 

HTML-Code:

<div class="col-sm-4"> 
     <div class="row"> 
      <div class="col-sm-5"> 
       <b>Objectives</b> 
      </div> 
      <div class="col-sm-4"> 
       <b>Status</b> 
      </div> 
      <div class="col-sm-3"> 
       <b>Compl. %</b> 
      </div> 
     </div> 
     <div class="row"> 
      <div id="mboTable"> 
       <div id="mboName" class="col-sm-5"></div> 
       <div id="mboState" class="col-sm-4"></div> 
       <div id="mboProgress" class="col-sm-3"></div> 
      </div> 
     </div> 
     <div class="row" > 
      <div class="col-sm-5"> 
      <input type="text" id="mboNameInput" class="form-control " onkeydown="addMbo(this.value)" placeholder="Your MBO..."> 
      </div> 
     </div> 
    </div> 

here is jsfiddle

Answer 1

prüfen unten Lösung für Sie ausarbeitet

$(function() { 
 

 
    $("#mboNameInput").on("keydown", function(e) { 
 
    
 
    if (e.keyCode == 13) { 
 
    \t \t var $nameDiv= $("#mboName"); 
 
     var $stateDiv= $("#mboState"); 
 
     var $progressDiv= $("#mboProgress"); 
 
     
 
     $nameDiv.append($("<input/>").attr("type","text").attr("value",$(this).val())); 
 
     $stateDiv.append($("<select/>").append($("<option/>").text("InProgress")).append($("<option/>").text("Completed")).append($("<option/>").text("Canceled"))); 
 
     $progressDiv.append($("<input/>").attr("type","text")); 
 
     $(this).val(''); 
 
    } 
 
    \t \t 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-bordered table-responsive"> 
 
    <tr> 
 
    <th>Objectives</th> 
 
    <th>Status</th> 
 
    <th>% Comp</th> 
 
    </tr> 
 
     <tr> 
 
     
 
    <div id="mboTable"> 
 
    <td><div id="mboName" class="col-lg-4"></div></td> 
 
    <td><div id="mboState" class="col-lg-5"></div></td> 
 
    <td><div id="mboProgress" class="col-lg-3"></div></td> 
 
    </div> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
    <div class="col-lg-5"> 
 
    <input type="text" id="mboNameInput" class="form-control " placeholder="Your MBO..."></div> 
 
    </td></tr> </table>