Modify URL with Javascript in modal

Question

I am almost there with what I want to achieve... but a last step is missing. A URL needs to be completed by the user (attaching a parameter) and then the URL needs to be opened.

I have the following clickable link in my 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>

which opens a Bootstrap modal where the user can insert a string to complete the URL above(URL+user'string)

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

Here the Javascript to open the modal and pass the HREF

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

Now, how can I add the content of id="mood" to my url when the user clicks on "Complete"?

You have a div and an input with id="mood". You can't use the same ID twice. — terrymorse
– terrymorse, Commented Apr 13, 2020 at 21:00
Is this what you intend: Complete button press append the value of the modal's input to the anchor tag's data-href attribute, then dismisses the modal? — terrymorse
– terrymorse, Commented Apr 13, 2020 at 21:09
Terrymorse, I corrected the div and input with the same name, thank you for the catch. Your description is what I am trying to achieve. — Kelly o'Brian
– Kelly o'Brian, Commented Apr 13, 2020 at 21:14

terrymorse · Accepted Answer · 2020-04-13 21:36:14Z

Here's how you could handle a click on the Complete button.

To make things cleaner, let's first give ids to the elements we are using, and change the Complete anchor to a button:

    <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');
      };
    });

Collectives™ on Stack Overflow

Modify URL with Javascript in modal

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related