Как я могу вставить элемент ввода динамически в модальное? - PullRequest
Новая
       16

Как я могу вставить элемент ввода динамически в модальное?

0 голосов
/ 09 июня 2019

Я работаю над модом для пользовательских входов. Доступные входы зависят от кнопки / случая, когда пользователь нажал, например, в одном случае модал должен предлагать ввод текста, а в другом случае модал должен показывать переключатель. Поэтому я хочу динамически вставлять элемент ввода в мой мод с помощью JavaScript.

Протестировано на простой HTML-странице, мой код работает, но не в модальном. Есть что-то особенное в модалах, которые я пропустил? Как я могу настроить свой код, чтобы получить элемент ввода? 

<html lang="en">
<div id="workModal" class="w3-modal">
  <div class="w3-modal-content">
  <span class="close">&times;</span>
  <h4>Input</h4>
  <div id="mod_in"></div>
  </div>
</div>
</html>

<script>
var modal = document.getElementById("workModal");
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {modal.style.display = "none";};
window.onclick = function(event) {if (event.target == modal {modal.style.display = "none";}}

// here starts the filling of the modal:
function build_modal(info) {
    let element = document.getElementById("mod_in");
    let inElement = "";
    info.dataInputs.forEach(function (item){
        inElement = document.createElement("input");
        if (item.dataType.includes('string')){
            inElement.setAttribute("type", "text");
        }
        if (item.minOccurs > 0) {inElement.required = true}
        element.appendChild(inElement)
    });
    element.innerHTML = inElement;
    let modal = document.getElementById("workModal");
    modal.style.display = "block";
}
</script>

Вместо элемента ввода я получаю [object HTMLInputElement] в своем HTML-коде.

1 Ответ

0 голосов
/ 09 июня 2019

Вы должны использовать, как показано ниже, код для добавления новых элементов в HTML: 

$("button").click(function(){      //you can call your function after any events
  $("p").append("<b>Appended text</b>");  //you can append every element instead of <b> 
});
...