Javascript 如何使用模态对话框boostrap获取输入表单的值

当我想从下面的表单输入中检索值时，我遇到了问题.如果在使用onclick事件的模式对话框中，您能告诉我从输入表单中检索值的方法吗？

function add_rute(x, y) {
  var hari = $("input[name=hari]").val();
  var rute = $("input[name=rute]").val();
  console.log(hari);
}

<?php
  $query = "SELECT * FROM  LTSUB_itin order by id ASC";
  $rs = mysqli_query($con, $query);
  while ($row = mysqli_fetch_array($rs)) {
?>
  <button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#exampleModal<?php echo $row['id']  ?>">
    <i class="far fa-calendar-plus"></i>
  </button>
  <div class="modal fade" id="exampleModal<?php echo $row['id'] ?>" 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">ADD DAY ID :
            <?php echo  $row['id'] ?>
          </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="row">
              <div class="col">
                <label for="hari">day </label>
                <input type="text" class="form-control" id="hari" name="hari" placeholder="Select Day">
              </div>
              <div class="col">
                <label for="rutet">Rute</label>
                <input type="text" class="form-control" id="rute" name="rute" placeholder="rute">
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-success btn-sm" onclick="add_rute(<?php echo $row['id'] ?>,<?php echo $row['master_id'] ?>)">Submit</button>
        </div>
      </div>
    </div>
  </div>
<?php } ?>