perticular javascript関数呼び出しでHTMLコントロールの値がデフォルト値に変更

Question

私は、ユーザーがテキストフィールドにデータを入力してjqueryを使って入力するようなフォームが必要です。新しいテキストフィールド、ドロップダウンメニュー、 テキストフィールド。その動作もしますが、ユーザが別のデータを入力したときのようなバグがあり、以前のコントロールの時間値、ドロップダウン、テキストフィールドの変更をデフォルトに入力します。ここで

にそれを解決するために私を助けることは、私のコードです：

<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コード：

<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

あなたが任意の要素上のinnerHTMLを行うと、それは完全にどのような今までに破壊されますelmentの中にすでにあるコンテンツ。 むしろあなたappndChildとしては、上記のコードに関連する変更を行うと、あなたの事を動作させることができ、以下

var divName = document.getElementById('mboName'); 

    var mboName = document.createElement("INPUT"); 
    mboName.setAttribute("type", "text"); 
    mboName.setAttribute("class", "form-control"); 
divName.appendChild(mboName); 

を示さなければなりません。

select dropdownを追加するには、次のコードを参照してください。

var divState = document.getElementById('mboState'); 
var selectData = [{name:"In Progress",value:"1"},{name:"Completed",value:"2"},{name:"Cancelled",value:"3"}]; 
var selectList = document.createElement("select"); 
selectList.class = "form-control"; 
divState.appendChild(selectList); 
for (var i = 0; i < selectData.length; i++) { 
    var option = document.createElement("option"); 
    option.value = selectData[i].value; 
    option.text = selectData[i].name; 
    selectList.appendChild(option); 
}