Bootstrap（輸入文本到模態）

我有這個代碼，我需要添加介紹模式（輸入文本進行驗證）：

        echo'
        <div class="input-group mb-3">
          <div class="input-group-prepend">
            <span class="input-group-text" id="basic-addon1">KóD</span>
          </div>
          <input type="text" class="form-control" placeholder="Vlo? zde zvací kód hrá?e, ktery tě pozval" aria-label="Vlo? zde zvací kód hrá?e, ktery tě pozval" aria-describedby="basic-addon1">
        </div>
        
        <center><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#overeni-kodu">
          Ulo?it
        </button></center>

        <div class="modal fade" id="overeni-kodu" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="overeni-kodu">Kontrola zadání</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                Pozval Tě hrá? se zvacím kódem: <span class="badge badge-info">XXXXXX</span>
                <br><br>
                Je to správně?
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Opravit</button>
                <button type="button" class="btn btn-success">Opravdu ulo?it</button>
              </div>
            </div>
          </div>
        </div>
        ';

我需要從輸入組mb-3（文本）位置到模態（代碼XXXXXX中的位置）

我怎樣才能添加它？甚至可能嗎？

uj5u.com熱心網友回復：

我的理解是你想用給定的代碼替換 XXXXXX。如果是這樣，您需要添加 3 件事。

1. 分別為 input 和 span添加id="code"和id="codeResult"屬性。
2. 在按鈕中添加onclick="CodeDisplay()"。
3. 在 HTML 代碼的末尾添加以下 JavaScript 函式。

    <script>
            function CodeDisplay(){
                var code = document.getElementById('code').value;
                document.getElementById('codeResult').innerHTML = code;
            }
    </script>

片段

<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="input-group mb-3">
       <div class="input-group-prepend">
         <span class="input-group-text" id="basic-addon1">KóD</span>
       </div>
       <input id="code" type="text" class="form-control" placeholder="Vlo? zde zvací kód hrá?e, ktery tě pozval" aria-label="Vlo? zde zvací kód hrá?e, ktery tě pozval" aria-describedby="basic-addon1">
     </div>

     <center><button onclick="CodeDisplay()" type="button" class="btn btn-primary" data-toggle="modal" data-target="#overeni-kodu">
       Ulo?it
     </button></center>

     <div class="modal fade" id="overeni-kodu" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
       <div class="modal-dialog modal-dialog-centered" role="document">
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="overeni-kodu">Kontrola zadání</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
           <div class="modal-body">
             Pozval Tě hrá? se zvacím kódem: <span id="codeResult" class="badge badge-info">XXXXXX</span>
             <br><br>
             Je to správně?
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-dismiss="modal">Opravit</button>
             <button type="button" class="btn btn-success">Opravdu ulo?it</button>
           </div>
         </div>
       </div>
     </div>

<script>
        function CodeDisplay(){
            var code = document.getElementById('code').value;
            document.getElementById('codeResult').innerHTML = code;
        }
</script>


<!-- Bootstrap dependency (Jquery & JS) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

標籤：

上一篇：在jqueryonclick按鈕中使用條件

下一篇：一個網頁上的簡單數學