jquery 我们可以使用模态输入字段输入表单吗?[已关闭]

zxlwwiss  于 2022-12-12  发布在  jQuery
关注(0)|答案(2)|浏览(177)

已关闭。此问题需要更多focused。当前不接受答案。
**想要改进此问题吗?**更新问题,使其仅关注editing this post的一个问题。

6天前关闭。
Improve this question
我想做一个按钮,它将打开一个模态,模态将有输入字段。一旦添加按钮点击,我想把所有的输入值转移到形式。如何做到这一点?如果有一些例子,这将是很有帮助的。谢谢。

bvjveswy

bvjveswy1#

我不知道这是否与你的问题有关,但这是我在我的问题上所做的:

<div class="modal fade" id="modalize" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">Edit <span id="name"></span></div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="<?=$_SERVER['REQUEST_URI'];?>" class="form" method="POST" id="form-modal">
                    <input type="hidden" name="emp_id" id="emp_id">
                    <div class="form-group mb-4">
                        <label for="employee_name">Employee Name:</label>
                        <input type="text" name="employee_name" id="employee_name" class="form-control readonly" readonly/>
                    </div>
                    <div class="form-group mb-4">
                        <label for="employee_name">Date Hired:</label>
                        <input type="date" name="date_hired" id="date_hired" class="form-control"/>
                    </div>
                    <div class="form-group mb-4 dr" id="resigned">
                        <label for="date_resigned">Date Resigned: <span class="text-danger" style="font-size: 60%;">(* 01-01-1970 if still active)</span> </label>
                        <input type="date" name="date_resigned" id="date_resigned" class="form-control"/>
                    </div>
                    <div class="form-group mb-2">
                        <button type="submit" name="submit" class="btn btn-success float-end rounded-pill shadow-0">
                            <i class="fa-solid fa-check me-1"></i>
                            Submit Data
                        </button>
                        <div class="clearfix"></div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

有许多按钮可用于编辑每项数据:

<button class="btn-primary edit_modal" data-bs-toggle="modal" data-bs-target="#modalize">Edit</button>

我也很难将值从服务器输入到前端,但我自己解决了这个问题,

$('.edit_modal').each(function(id, el){
    $(el).click(function(e){
        $('.modal #name').html($(this).data('emp'))
        $('.modal #employee_name').val($(this).data('emp'))
        $('.modal #date_hired').val($(this).data('hired'))
        $('.modal #date_resigned').val($(this).data('resigned'))
        $('.modal #emp_id').val($(this).data('id'))
    })
})

希望能有所帮助!

u91tlkcl

u91tlkcl2#

这可以通过在代码中使用<form>标记来完成,如下所示
于飞:

<button class="openForm">click</button>
        <div class="modal">
            <form action="" method="">
                <label>
                Your email:
                <input type="email" name="email">
                </label>
                <br>
                <label>
                Your message:
                <input name="message">
                </label>
                <br>
                <button type="submit">Send</button>
            </form>
        </div>

JavaScript语言:

document.querySelector(".modal").style.display = "none"
    
document.querySelector(".openForm").onclick = () => {
    let display = document.querySelector(".modal").style.display
    if (display == "none"){
        document.querySelector(".modal").style.display = "block"
    }
    else {
        document.querySelector(".modal").style.display = "none"
    }
}

相关问题