Bootstrap (input text to modal)-CodePudding

I have this one code, i need add intro modal (input text for verify):

        echo'
        <div >
          <div >
            <span  id="basic-addon1">KÓD</span>
          </div>
          <input type="text"  placeholder="Vlož zde zvací kód hráče, který tě pozval" aria-label="Vlož zde zvací kód hráče, který tě pozval" aria-describedby="basic-addon1">
        </div>
        
        <center><button type="button"  data-toggle="modal" data-target="#overeni-kodu">
          Uložit
        </button></center>

        <div  id="overeni-kodu" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
          <div  role="document">
            <div >
              <div >
                <h5  id="overeni-kodu">Kontrola zadání</h5>
                <button type="button"  data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div >
                Pozval Tě hráč se zvacím kódem: <span >XXXXXX</span>
                <br><br>
                Je to správně?
              </div>
              <div >
                <button type="button"  data-dismiss="modal">Opravit</button>
                <button type="button" >Opravdu uložit</button>
              </div>
            </div>
          </div>
        </div>
        ';

And i need from input-group mb-3 (text) place to modal (where is in code XXXXXX)

How i can add it? Is it even possible?

CodePudding user response：

What I understood is that you want to replace XXXXXX with the given code. If so you need to add 3 things.

add id="code" and id="codeResult" attributes for both input and span respectively.
add onclick="CodeDisplay()" in the button.
add the following JavaScript function at the end of HTML code.

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

Snippt

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

  <div >
       <div >
         <span  id="basic-addon1">KÓD</span>
       </div>
       <input id="code" type="text"  placeholder="Vlož zde zvací kód hráče, který tě pozval" aria-label="Vlož zde zvací kód hráče, který tě pozval" aria-describedby="basic-addon1">
     </div>

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

     <div  id="overeni-kodu" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
       <div  role="document">
         <div >
           <div >
             <h5  id="overeni-kodu">Kontrola zadání</h5>
             <button type="button"  data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
           <div >
             Pozval Tě hráč se zvacím kódem: <span id="codeResult" >XXXXXX</span>
             <br><br>
             Je to správně?
           </div>
           <div >
             <button type="button"  data-dismiss="modal">Opravit</button>
             <button type="button" >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>