在引導程序中，如何將值傳遞給模式中的表單？

Question

我現在正在創建一個大學搜索網站。 用戶輸入關鍵字將返回結果並將這些結果放入卡片中。 它將有一個“添加評論”按鈕。 用戶單擊按鈕后，它將彈出一個模式，其中包含一個帶有兩個空白的表單。 第一個空白是大學的名稱。 大學名稱必須預先填寫。 我嘗試了幾種方法，但仍然無法找到正確的方法。

以下是 HTML 代碼的一部分：

<div class="container">
            <div class="row" id="universitycard"> <!-- place holder -->

            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Add review</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-row">
                                <div class="col">
                                    <label for="University Name" class="col-form-label">University Name:</label>
                                </div>
                                <div class="col">
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="universitynameinput" value="" disabled>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
        </div>

這是JS代碼：

function makeApiCall(page){
    var keyword = document.getElementById('user_input').value;
    console.log(document.getElementById('user_input').value); // for debug using
    var url = 'http://universities.hipolabs.com/search?name='+ keyword;
    $.ajax({url: url, dataType: "json"}).then(function(university) {
        console.log(university)
        for (var i = 0; i < 30; i++) {
            console.log(university[i].name)
            document.getElementById('universitycard').innerHTML +=
            `<div class="card" style="width: 30%;">
                <div class="card-body">
                <h5 class="card-title" id = "universityinfo" >${university[i].name}</h5>
                    <p class="card-text"> ${university[i].country} </p>
                    <a href="${university[i].web_pages}" class="btn btn-warning">University Website</a>
                    <br></br>
                    <button type="button" class="btn btn-primary" id = "${university[i].name}" data-toggle="modal" data-target="#exampleModal">Add Rewiew</button>
                </div>
            </div>`
       
        }

    })
}
function clearpage(){ //refresh page when click the submit
    document.getElementById('universitycard').innerHTML="";
}


$(document).ready(function(){
    $(".Add Rewiew").click(function(){
        $("#universitynameinput").val($(this).data('id'));
        $('#exampleModal').modal('show');
    });
});

Answer 1

由於您是動態創建的 div，因此您需要將其與DOM中的static元素（即文檔、正文、任何 div 等）綁定。另外，將class提供給您的模態按鈕，即： addreview然后使用.attr('id')獲取id 值並將其分配給模態框內的輸入框。

演示代碼：

 //suppose this is your json arry var university = [{ "country": "United States", "web_pages": ["http://www.usafa.af.mil/", "http://www.usafa.edu/"], "state-province": null, "alpha_two_code": "US", "name": "United States Air Force Academy", "domains": ["usafa.af.mil", "usafa.edu"] }, { "country": "Kenya", "web_pages": ["http://www.usiu.ac.ke/"], "state-province": null, "alpha_two_code": "KE", "name": "United States International University", "domains": ["usiu.ac.ke"] }, { "country": "United States", "web_pages": ["http://www.usna.edu/"], "state-province": null, "alpha_two_code": "US", "name": "United States Naval Academy", "domains": ["usna.edu"] }, { "country": "United States", "web_pages": ["http://www.usma.edu/"], "state-province": null, "alpha_two_code": "US", "name": "United States Military Academy", "domains": ["usma.edu"] }, { "country": "United States", "web_pages": ["http://www.usmma.edu/"], "state-province": null, "alpha_two_code": "US", "name": "United States Merchant Marine Academy", "domains": ["usmma.edu"] }, { "country": "United States", "web_pages": ["http://www.uscga.edu/"], "state-province": null, "alpha_two_code": "US", "name": "United States Coast Guard Academy", "domains": ["uscga.edu"] }] makeApiCall(); function makeApiCall(page) { // var keyword = document.getElementById('user_input').value; // console.log(document.getElementById('user_input').value); // for debug using // var url = 'http://universities.hipolabs.com/search?name=United States'; /*$.ajax({ url: url, dataType: "json" }).then(function(university) {*/ //console.log(university) for (var i = 0; i < university.length; i++) { //console.log(university[i].name) //added class for button addreview document.getElementById('universitycard').innerHTML += `<div class="card" style="width: 30%;"> <div class="card-body"> <h5 class="card-title" id = "universityinfo" >${university[i].name}</h5> <p class="card-text"> ${university[i].country} </p> <a href="${university[i].web_pages}" class="btn btn-warning">University Website</a> <br></br> <button type="button" class="btn btn-primary addreview" id = "${university[i].name}" data-toggle="modal" data-target="#exampleModal">Add Rewiew</button> </div> </div>` } /*})*/ } //onlick of addreview buttn $(document).on("click", ".addreview", function() { //assign value inside input-box $("#universitynameinput").val($(this).attr('id')); $('#exampleModal').modal('show'); });

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="container"> <div class="row" id="universitycard"> <;-- place holder --> </div> </div> <:-- Modal --> <div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Add review</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form> <div class="form-row"> <div class="col"> <label for="University Name" class="col-form-label">University Name:</label> </div> <div class="col"> <div class="form-group"> <input type="text" class="form-control" id="universitynameinput" value="" disabled> </div> </div> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Submit</button> </div> </div> </div> </div>