How to Make a Modal Popup to Take an Input Value Using Jquery or JavaScript

$(document).ready(function() {  $(document).on("click", ".form_click", function(event) {    event.preventDefault();
    var query_id = $(this).closest('form') //target common parent      .find('[name=query_id]') //target element      .val();
    console.log(query_id);  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form id="send_reply" method="post" antype="multipart/form-data">  <input type="hidden" name="query_id" value="1" />  <div class="modal-footer">    <button type="button" id="" class="btn btn-default form_click">Reply</button>  </div></form>

Get Value from JQuery Modal Dialog Submit to another Input Type

Here is an Demo Code As per your requirement using JQuery UI.

JSFIDDLE

//HTML CODE

<form action="milk.php" id="milk_form">
  <input type="text" name="milk_input_name" id="milk_input_id" class="milk_input_class" value=""><br/>
  <a id="milk_a_id" href="#">See Milk List</a>
</form> 

  <div id="dialog" >
     <select id="myselect" name="Icecream Flavours">
                <option value="double chocolate">Double Chocolate</option>
                <option value="vanilla">Vanilla</option>
                <option value="strawberry">Strawberry</option>
                <option value="caramel">Caramel</option>
        </select>
  </div>

//JQUERY

$(function() {
    var dialog = $("#dialog" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
           "Create an account": addUser,
        Cancel: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
       //Do Something
      }
    });

    $( "#milk_a_id" ).on( "click", function() {
      dialog.dialog( "open" );
    });

     function addUser(){
         var selectedItem = $("#myselect option:selected" ).text();
        $("#milk_input_id").val(selectedItem);
          dialog.dialog( "close" );
     }
  });

how can i get value from input text and show to my modal?

^[1] You can use just one $(document).ready()

^[2] No need to use something like $(p).html() + '<b>'... you can add the HTML Structure to a variable then use .html(HTMLStructure) to add the html structure to the element .. this can be done with .append() too..

^[3] While the id should be unique and you have id for the desired input So you can get its value by use $('#ceklain').val()

$(document).ready(function() {
    // Tampil ke modal detail
    $("#detail").click(function() {
        var p = $("#hasildetail #isidetail");
        var HTMLStructure = "<h4>you have selected : </h4>";
        $.each($("input[name='hobby']:checked"), function() {
            HTMLStructure += '<br>' + $(this).val();
        });
        HTMLStructure += $('#ceklain').val();
        $(p).html(HTMLStructure);
    });
    // Checkbox Lain-lain
    $('#ceklain').hide();
    $('#lainlain').change(function() {
        if (this.checked)
            $('#ceklain').show(1000);
        else
            $('#ceklain').hide(1000);

    });
});

Input value from HTML not passing to modal

You are assigning value of {{ histor.booking_id }} to placeholder instead use value="{{ histor.booking_id }}" .Then , use class for click event and inside this get value of input using $(this).prev().val() and put it inside your modal.

Demo Code :

$(".tocancel").click(function() {
  var name = $(this).prev().val(); //use prev
  $("#modal_body").html(name);
  $("#bookId").val(name); //use val here
});

<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>

<table class="table table-striped">
  <thead>
    <tr>
      <th>Seat</th>
      <th>Start date</th>
      <th>End date</th>
      <th>Number of days</th>
      <th>Action</th>

    </tr>
  </thead>

  <tbody>

    <tr>
      <td>A</td>
      <td>2-10-1</td>
      <td>10-1-10</td>
      <td>5</td>
      <td>
        <form action="/" method="post">
          <!--added value="{{ histor.booking_id }}"-->
          <input type="text" class="form-control" name="idtocancel" autocomplete="on" selected placeholder={{ histor.booking_id }} value="1">
          <button type="button" class="btn btn-success tocancel" data-toggle="modal" data-target="#exampleModal">Cancel 1</button>
        </form>

      </td>
    </tr>
    <tr>
      <td>B</td>
      <td>2-10-1</td>
      <td>10-1-11</td>
      <td>5</td>
      <td>
        <form action="/" method="post">
          <input type="text" class="form-control" name="idtocancel" autocomplete="on" selected placeholder={{ histor.booking_id }} value="2">
          <button type="button" class="btn btn-success tocancel" data-toggle="modal" data-target="#exampleModal">Cancel 2</button>
        </form>

      </td>
    </tr>
  </tbody>

</table>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Do you really wish to cancel this booking?</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <h6 id="modal_body"></h6>

      </div>
      <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">No, go back</button>

        <input class="form-control" name="bookId" id="bookId" autocomplete="on" selected>
        <button type="button" id="submit" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">Yes, cancel the booking</button>
      </div>
    </div>
  </div>
</div>

$( "#dialog-modal" ).dialog({
 open: function( event, ui ) {
     var boxInput=$("#befor-box").find('input[name="email"]').val(); //get the value..
     $("#dialog-modal").find('input[name="email"]').val(boxInput); //set the valu

 }
});