Bootstrap (input text to modal)

Question

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

        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, který tě pozval" aria-label="Vlož zde zvací kód hráče, který 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>
        ';

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?

Answer 1

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

1. add id="code" and id="codeResult" attributes for both input and span respectively.
2. add onclick="CodeDisplay()" in the button.
3. 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 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, 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" 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>