如何将数据值从Bootstrap模式传递到父表单

如何将数据属性或单击事件从Bootstrap模式传递到父表单/窗口。如何将数据值从Bootstrap模式传递到父表单

例如，在点击下面的输入框，模态将与具有div的数据属性

<input type="text" name="menu_image_id" class="form-control" data-toggle="modal" data-target=".show_modal_w" /> 

<input type="text" name="menu_image_id_2" class="form-control" data-toggle="modal" data-target=".show_modal_w" />

模态窗口

<div class="modal fade show_modal_w" tabindex="-1" role="dialog"> 
    <div class="modal-dialog modal-lg" role="document"> 
     <div data-id="1" data-dismiss="modal">Hello</div> 
     <div data-id="2" data-dismiss="modal">Welcome</div> 
     <div data-id="3" data-dismiss="modal">Morning</div> 
    </div> 
</div>

现在，当用户点击的模态内的DIV弹出例如Hello，Welcome或Morning，那么我们需要将id值从模态传递给名为menu_image_id的父输入框。

我试过使用下面的关闭功能，但无法获取模态数据ID到父窗口。

$('.show_modal_w').on('hidden.bs.modal', function (e) { 
    $(e.relatedTarget); 
})

来源

2016-12-15 Vinoth Kumar

我想比你做了不同的方式，

，而不是捕捉hidden.bs.modal，我捕捉div.on.click，所以不是：

$('.show_modal_w').on('hidden.bs.modal', function (e) { 
    $(e.relatedTarget); 
})

我写

$("body").on("click", ".show_modal_w div[data-id]", function() { 
    $("input[name='menu_image_id']").val($(this).data("id") + " - " + $(this).text()); 
    $(".show_modal_w").modal("hide"); 
});

这里是一个的jsfiddle：https://jsfiddle.net/f9urohoo/ 我把ID并在[name =“menu_image_id”]的输入中点击div的文本，但是您可以根据需要进行修改。

告诉我，如果它是你想要的

来源

2016-12-15 15:34:49

感谢您的解决方案。它运行良好，问题是我们面临的问题是，即使我们有多个名称，它总是将值放入name = menu_image_id中，有没有什么办法让menu_image_id变成动态的，就像我们需要捕获点击输入名称字段。 –

@Vinoth Kumar我不确定明白你想要什么，你解释一下你想要的典型工作流程吗？ –

是的，我已经通过为每个输入框[存储图像ID]添加唯一ID并使用e.relatedTarget将该值传递给模态并在该模式中放置隐藏的输入框来存储输入框唯一键值来解决此问题。然后点击模态div后，我通过body搜索存储在模态隐藏盒中的唯一密钥，并将模式div单击id放置在那里。终于解决了:-)感谢您的大力帮助Gille –

如何将数据值从Bootstrap模式传递到父表单

回答

相关问题