Updated: How do I pass a default value into my modal input element

Question

UPdated: have been stuck on this for 3 day's now and I cannot find an answer anywhere. I have a model that contains -input type="text" name="mycardname" id="CardName"/- I want to post the card name into the value of the input box. I can put it in a label or a span, but cannot find a way or example to add it to the input box. My code is below.

    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($('



    


        
            
                
                    my card
                

                
                    
                        my card title
                    

                    
                        @DateTime.Now.ToString("MMMM yyyy")
                        
                    

                
            
        



    


    
        
            
                Display Statistics For
                
            
            

                
                


                
                     Monthly
                     Quarterly

                
                You have selected Monthly
                You have selected quarterly



                
                    
                

                
                    @*Yearly Quarter of*@
                    

                    

                
            
            
                

                @* Apply*@

user_11398810 · Answer

I don’t know if there are multiple text boxes and buttons that are the same on this page. Do you mean to traverse all ATTRIBUTES to the text box corresponding to this button or to pass the ATTRIBUTES corresponding to the modal value into the text box?

If you pass in a corresponding ATTRIBUTES, please refer to the following example:




@section Scripts{
    
}

Result:

user_11578011 · Answer

I finally figured it out:

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

to:

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

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

Updated: How do I pass a default value into my modal input element

2 Answers