更新：如何将默认值传递给我的模态输入元素

Posted 2023-05-08

【中文标题】更新：如何将默认值传递给我的模态输入元素

【英文标题】：Updated: How do I pass a default value into my modal input element

【发布时间】：2021-01-27 07:01:24

【问题描述】：

更新：现在已经坚持了 3 天，我无法在任何地方找到答案。 我有一个包含 -input type="text" name="mycardname" id="CardName"/- 我想把卡名贴到输入框的值里。 我可以将它放在标签或跨度中，但找不到将其添加到输入框的方法或示例。 我的代码如下。

    var ATTRIBUTES = ['cardname', 'metric', 'month'];

    $('.CardModal').on('click', function (e) 

        var $target = $(e.target);
        var modalSelector = $target.data('target');
        ATTRIBUTES.forEach(function (attributeName) 
            var $modalAttribute = $(modalSelector + ' #modal-' + attributeName);

            var dataValue = $target.data(attributeName);
            $modalAttribute.text(dataValue || '');

            $target('#CardName')('value try This');
        );
    );

    $('#settingsModal,#monthModal').on('show.bs.modal', function (event) 
        alert("this alert");
        var $card = $(event.relatedTarget).closest('.card');
        var $modal = $(this);

        var data = $card.data();
        Document.getElementById('#CardName').val("try This");




        for (var item in data) 
            $modal.find('[name="' + item + '"]').val(data[item]);
        
    );

    $('#monthModal .btn-primary').click(function () 
        var $modal = $(this).closest('.modal');

        var searchType = $modal.find('input[name="SearchTypeRadio"]:checked').val();


        var metric = $modal.find('[name="metric"]').val();
        var month = $modal.find('[name="month"]').val();
        var cdName = $modal.find('[name="mycardname"]').val();

        alert("SearchType: " + searchType + " Metric: " + metric + " Month: " + month + " Card Name: " + cdName);



    );

    $('.btnApplyColors').on('click', function () 


        var $modal = $(this).closest('.modal');
        var cardName = $modal.find('[name="name"]').val();
        var grMin = $modal.find('[name="greenmin"]').val();
        var grMax = $modal.find('[name="greenmax"]').val();
        var yMin = $modal.find('[name="yellowmin"]').val();
        var yMax = $modal.find('[name="yellowmax"]').val();
        var rMin = $modal.find('[name="redmin"]').val();
        var rMax = $modal.find('[name="redmax"]').val();

        var cardTR = cardName + 'TR';


        var elements = document.getElementsByClassName(cardTR); // get all elements
        for (var i = 0; i < elements.length; i++) 
            var tsd1 = cardName + i + 'TD1';
            var tsd2 = cardName + i + 'TD2';

            var td1 = document.getElementById(tsd1).innerhtml;
            var td2 = parseInt(document.getElementById(tsd2).innerHTML);


            alert(td1 + " - " + td2);

            switch (true) 

                case (td2 >= yMin && td2 <= yMax):
                    alert(td1 + " - " + td2 + " YMin " + yMin + " yMax " + yMax);
                    elements[i].style.backgroundColor = "lightyellow";
                    elements[i].style.color = 'brown';

                    break;

                case (td2 >= grMin && td2 <= grMax):
                    alert(td1 + " - " + td2 + " grMin " + grMin + " grMax " + grMax);
                    elements[i].style.backgroundColor = "#E7FCE3";
                    elements[i].style.color = 'darkgreen';

                    break;

                case (td2 >= rMin && td2 <= rMax):
                    alert(td1 + " - " + td2 + " rMin " + rMin + " rMax " + rMax);
                    elements[i].style.backgroundColor = "mistyrose";
                    elements[i].style.color = 'red';

                    break;
                default:
                    alert("Hit the Default because " + td2 + " not found");
                    break;
            
        

        $('#ScoreCardDefaults').modal('hide');



    );

    $(document).ready(function () 
        $('input[type="radio"]').click(function () 
            var inputValue = $(this).attr("value");
            var targetBox = $("." + inputValue);
            $(".box").not(targetBox).hide();
            $(targetBox).show();
        );
    );

    //  clean this up //

    let startYear = 2000;
    let endYear = new Date().getFullYear();
    for (i = endYear; i > startYear; i--) 
        $('#yearpicker').append($('<option />').val(i).html(i));
    

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4">


        <div class="col mb-4" data-mincoolscale="71">
            <div class="card text-center" data-metric="14" data-month="2020-10" data-mincoolscale="71" data-maxcoolscale="100" data-minwarmscale="51" data-maxwarmscale="70" data-minhotscale="0" data-maxhotscale="50">
                <div class="card-img-top d-flex align-items-center justify-content-center bg-primary text-light metric-header">
                    <span class="h5 my-1">my card</span>
                </div>

                <div class="card-body pt-3">
                    <h6 class="card-title">
                        my card title
                    </h6>

                    <p>
                        <span class="metric-date">@DateTime.Now.ToString("MMMM yyyy")</span>
                        <button type="button" class="btn btn-sm btn-link CardModal" data-cardname="The Card Name" data-toggle="modal" data-target="#monthModal" title="Edit" aria-title="Edit">
                            Ccc
                        </button>
                    </p>

                </div>
            </div>
        </div>



    </div>
</div>
<div class="modal fade" id="monthModal" tabindex="-1" aria-labelledby="monthModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="monthModalTitle">Display Statistics For</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

                <span id="modal-cardname"></span>
                <input type="text" name="mycardname" id="CardName" />


                <div class="myRadios">
                    <label><input type="radio" name="SearchTypeRadio" value="Monthly"> Monthly</label>
                    <label><input type="radio" name="SearchTypeRadio" value="Quarterly"> Quarterly</label>

                </div>
                <div style="display:none" class="Monthly box">You have selected Monthly</div>
                <div style="display:none" class="Quarterly box">You have selected quarterly</div>



                <div style="display:none" class="Monthly box form-group">
                    <input type="month" id="month" name="month" class="form-control w-auto" placeholder="mm/yyyy" max="@DateTime.Now.ToString("yyyy-MM")" min="2010-01" />
                </div>

                <div style="display:none" class="Quarterly box form-group">
                    @*<label for="month">Yearly Quarter of</label>*@
                    <select id="QTRS">
                        <option value="1" selected>1st Quarter</option>
                        <option value="2">2nd Quarter</option>
                        <option value="3">3rd Quarter</option>
                        <option value="4">4th Quarter</option>
                    </select>

                    <select name="yearpicker" id="yearpicker"></select>

                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

                @*<a class=" btn btn-primary" asp-controller="Home" asp-action="updateSSOA"> Apply</a>*@

                <button type="button" class="btn btn-primary" data-dismiss="modal">Apply</button>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

这个编辑器不断删除我的一些内容.....如何显示我的代码示例？？？

能否分享一下您的整体看法？否则jquery代码会产生不同的影响。

刚刚更新了代码（Visual Studio 2019、.net core 3.1、MVC）

刚注意到 DOM 对象显示 ~input id="modal-cardname" name="mycardname"~SSOAKLS~/input~ ...... SSOAKLS 是我传入的名称。它是在开始标签和结束标签之间（不在 value="" 属性中）如果我手动将值输入 value="SSOAKLS" 它将起作用。在打开和关闭标签之间放置数据是行不通的。 （它也不会显示在 UI 上。

【参考方案1】：

我不知道这个页面上是否有多个相同的文本框和按钮。你的意思是遍历所有ATTRIBUTES到这个按钮对应的文本框还是把modal值对应的ATTRIBUTES传到文本框中？

如果传入对应的ATTRIBUTES，请参考以下示例：

<input type="text" name="mycardname" id="CardName" />

<button type="button" class="btn btn-sm btn-link CardModal"
        data-cardname="kls01" data-toggle="modal" data-target="#monthModal"
        title="Edit" aria-title="Edit">
    Launch Modal
</button>
@section Scripts
    <script>
        $(function () 
            var ATTRIBUTES = ['cardname', 'metric', 'month'];
            $('.CardModal').on('click', function (e) 
                var $target = $(e.target); 
                var modalSelector = $target.data('target'); 
                ATTRIBUTES.forEach(function (attributeName) 
                    var $modalAttribute = $(modalSelector + ' #modal-' + attributeName);
                    var dataValue = $target.data(attributeName); 
                    $modalAttribute.text(dataValue || '00');
                    if ($target.prev().val() == '' || $target.prev().val == null) 
                        $target.prev().val(attributeName || '')
                    
                );
            );
        )
    </script>

结果：

【讨论】：

好问题，是的，我计划最终为每个输入框提供输入框......我没有看到这段代码有任何变化？？？这给了我相同的结果，模态框上的输入框中没有值。

【参考方案2】：

我终于明白了：

改变： $target('#CardName')('value try This');

到：

var myCardName = $(this).data('cardname');

$(".modal-body #mycardname").val(myCardName);