如何将输入元素动态插入模态中?

马克思主义

我正在为用户输入创建模态。可用的输入取决于用户单击的按钮/情况,例如,在一种情况下,模式应提供文本输入,而在另一种情况下,模式应显示单选按钮。因此,我想使用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>

我的html代码中得到了[object HTMLInputElement]而不是input元素。

太白

您必须使用下面的代码在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> 
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将 django 中的数据输入到模态中?

在Meteor中,如何将模板事件附加到动态插入的元素上?

如何将输入的值插入其下方的输入中

如何将输入到Bootstrap模态(窗体)中的输入中的值传递到HTML表?

如何将图像动态插入到 Bootstrap Popover 中

如何将文本插入在输入中键入的列表中

如何将元素插入数组中的特定位置?

如何将新元素动态推送到列表中

如何将输入字段数据从模态传递到react-Native中的容器?

如何从jQuery中动态打开模态的输入中获取值?

如何将元素插入向量?

如何将元素插入子节点

如何将动态添加的输入字段与父元素/ id相关联?

如何将分配的 eventHandler 动态更改为特定的输入元素?

如何将输入的值插入JS中的其他输入?

如何将 JavaScript 变量插入 jQuery 以插入到 HTML 元素中?

如何将动态下拉列表插入动态标签?

如何将动态创建的按钮单击事件绑定到 javascript 中动态创建的输入?

如何将动态输入值绑定到 Vue.js 中的 v-for 输入字段

如何从输入元素中删除插入符号

如何将 n 个连续元素插入到元素类型不可复制的 std::vector 中?

在Angular 8中,如何将动态数据从可观察对象传递到模态对话框?

如何将动态字节字符串插入向量中?

如何将局部变量动态插入到 React JSX 映射函数中?

如何将 JSON 动态插入到手风琴菜单中?

如何将递增的数字插入到动态添加的 HTML 表格行中?

如何将sql中的动态数据插入chartjs堆积条形图javascript

Jquery 将变量中的数据插入到动态输入中

如何将动态创建的输入字段中的值分配给Python中的各个变量