Обновлено: как мне передать значение по умолчанию в мой модальный элемент ввода

ProgramBox

Обновлено: как мне передать значение по умолчанию в мой модальный элемент ввода

Post author:admin
Запись опубликована:5 марта, 2023
Post category:Вопросы по программированию

#javascript #asp.net-mvc #asp.net-core #bootstrap-4

Вопрос:

Обновлено: застрял на этом уже 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 amp;amp; td2 <= yMax):
                    alert(td1   " - "   td2   " YMin "   yMin   " yMax "   yMax);
                    elements[i].style.backgroundColor = "lightyellow";
                    elements[i].style.color = 'brown';

                    break;

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

                    break;

                case (td2 >= rMin amp;amp; 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">amp;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>

1. Этот редактор продолжает удалять часть моего содержимого….. Как мне показать свои примеры кода???

2. Не могли бы вы поделиться своим полным представлением? В противном случае код jquery будет оказывать другое влияние.

3. Только что обновлен код (Visual Studio 2019, .net core 3.1, MVC)

4. Только что заметил, что объект DOM показывает ~input id=»modal-cardname» name=»mycardname» ~ SSOAKLS ~/input ~ …… SSOAKLS — это имя, которое я передал. Оно находится между открывающим тегом и закрывающим тегом (не в атрибуте value=»») Если я вручную введу значение в значение =»SSOAKLS», оно будет работать. Наличие данных между тегами open и close не работает. (Он также не отображается в пользовательском интерфейсе.

Ответ №1:

Я не знаю, есть ли на этой странице несколько одинаковых текстовых полей и кнопок. Вы имеете в виду переместить все ATTRIBUTES в текстовое поле, соответствующее этой кнопке, или передать 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>
}

Результат:

1. Хороший вопрос, и да, я планирую в конечном итоге иметь поля ввода для каждого…. Я не вижу никаких изменений в этом коде??? Это дает мне тот же результат, нет значения в поле ввода в модальном.

Ответ №2:

Я, наконец, понял это:

Изменить: $target(‘#CardName’)(‘значение попробуйте это’);

Для:

var myCardName = $(this).data(‘cardname’);

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