Изменить URL с Javascript в модальном

Question

Я почти достиг цели, которой хочу достичь ... но последний шаг отсутствует. Пользователь должен заполнить URL-адрес (прикрепив параметр), а затем открыть его.

У меня есть следующая кликабельная ссылка в моей HTML

<a class="dropdown-item" href="#" data-href="https://www.example.com/create&r=1&q=" data-toggle="modal" data-target="#mood"><i class="fa fa-trash"></i> MOOD</a> 

, которая открывает модальный Bootstrap, где пользователь может вставить строку для завершения указанного выше URL (URL + строка пользователя)

<!-- Modal -->
<div class="modal fade" id="mood" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            Complete
        </div>
        <div class="modal-body">
            <label for="moodUser">Enter your mood</label>
            <input type="text" class="form-control" id="moodUser" aria-describedby="moodHelp" placeholder="Enter mood">
            <small id="moodHelp" class="form-text text-muted">info .</small>
          </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <a class="btn btn-danger btn-ok">Complete</a>
        </div>
    </div>
</div>

Здесь Javascript, чтобы открыть модальный и передать HREF

$('#mood').on('show.bs.modal', function(e) {
  $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
});

Теперь, как я могу добавить содержимое id = "mood" в мой URL, когда пользователь нажимает "Complete"?

Answer 1

Вот как вы можете обработать нажатие кнопки Complete.

Чтобы сделать вещи чище, давайте сначала дадим идентификаторы используемым элементам и изменим привязку Complete к кнопке:

    <a id="mood-anchor" class="dropdown-item" href="#"
      data-href="https://www.example.com/create&r=1&q=" data-toggle="modal"
      data-target="#mood"><i class="fa fa-trash"></i> MOOD</a>

      <!-- ... -->

      <button id="ok-btn" class="btn btn-danger btn-ok">Complete</btn>

    $('#mood').on('show.bs.modal', function(e) {
      $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));

      // set up the 'Complete' button handler
      const okbutton = document.getElementById('ok-btn');
      okbutton.onclick = function () {
        // get value of user-entered data
        const inputVal = document.getElementById('moodUser').value;
        const atag = document.getElementById('mood-anchor');

        // append it to the anchor tag's 'data-href'
        atag.dataset.href += inputVal;

        // hide the modal
        $('#mood').modal('hide');
      };
    });