如何將數據值從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模式傳遞到父表單

回答

相關問題