CODEWITHSUNDEEP
javascripttwitter-bootstrap
Kelly o'Brian
Kelly o'Brian

Reputation: 445

Modify URL with Javascript in modal

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

Upvotes: 0

Views: 137

Answers (1)

terrymorse
terrymorse

Reputation: 7086

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

Upvotes: 1

Related Questions