获取隐藏的表单值并以模式显示

时间:2019-02-20 21:32:43

标签: twitter-bootstrap bootstrap-modal

下面是我页面上的表格。在每一行中,您将看到一个名为“ unitType”的隐藏值。我想做的是单击每行上的一个按钮,获取该特定行的unitType隐藏值的值,然后弹出一个引导程序模态,并使用隐藏字段中的值设置模态图像标签src,并连接其余的引导模态中显示相应图像的路径。

希望这是在这里提问的正确方法。

<form action="" method="POST">
<div class="table-responsive">
    <table class="table table-striped table-sm">
        <thead class="thead-dark">
            <tr>
                <th scope="col">Location</th>
                <th scope="col">Serial #</th>
                <th scope="col">Level</th>
                <th scope="col"></th>
                <th scope="col"></th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr scope="row">
                <td class="align-middle">East Entrance (Elvis Car)</td>
                <td class="align-middle">CR5E180022B</td>
                <td><input type="number" name="LevelAmount[]" class="unitType form-control" value=""></td>
                <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Image</button></td>
                <td><input type="hidden" class="unitType" name="unitType" value="Sienna 5 B.png"></td>
                <td><input type="hidden" name="id[]" value="S1149"></td>
            </tr>
            <tr scope="row">
                <td class="align-middle">Hotel Elevator Bthrm - Womens</td>
                <td class="align-middle">CS3G170159</td>
                <td><input type="number" name="LevelAmount[]" class="unitType form-control" value=""></td>
                <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Image</button></td>
                <td><input type="hidden" class="unitType" name="unitType" value="Sienna 3.png"></td>
                <td><input type="hidden" name="id[]" value="S1151"></td>
            </tr>
        </tbody>
    </table>
</div>
<div class="row">
    <div class="col-12 text-right"><input type="hidden" name="SessionID[]" value="">
        <input class="btn btn-warning" type="submit" name="submit" value="Submit">
    </div>
</div>

下面的html是我的引导程序模式代码。

<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
    <div class="modal-content">
    <div class="modal-header">
        <h5 class="modal-title">Diffuser</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
    <img id="unitType" src="">
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

请找到更新的答案

services.AddSwaggerGen(c => 
    {
c.SwaggerDoc("v1", new Swashbuckle.AspNetCore.Swagger.Info {Title = "PME SERVICES", Version = "v1"});
            });
$("button").click(function() {
  var ele = $(this).parents('tr').find('input[type="hidden"]').val()
  alert(ele)
});