При вызове определенной функции javascript значение элемента управления HTML меняется на значение по умолчанию

javascript jquery html

44 просмотра

1 ответ

У меня есть форма, где мне нужно такое средство, где пользователь вводит некоторые данные в текстовое поле, и хиты вводят это время, используя 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>

вот jsfiddle

Автор: Zala Krunal Источник Размещён: 08.11.2019 11:02

Ответы (1)


2 плюса

Решение

Когда вы выполняете innerHTML для любого элемента, он полностью уничтожает то, что когда-либо уже было внутри элемента. Скорее вы должны appndChild, как показано ниже,

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

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

Вы можете внести соответствующие изменения в приведенный выше код и заставить ваши вещи работать.

Посмотрите код ниже, чтобы добавить выпадающий список.

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);
}
Автор: Ruhul Размещён: 20.08.2016 08:23
Вопросы из категории :
32x32