Unable to capture bootstrap modal input on button click

When I click on the button this pops up:

image

When Send Email is clicked I would like for the message input to be passed to a view.

URL path:

path('email_button/<int:id>/<int:sponsor>/<str:message>/', views.email_button, name='email_button'),

template:

                  <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Send Email</button>
                  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="exampleModalLabel">Email Message</h5>
                          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                          <form>
                            <div class="mb-3">
                              <label for="recipient-name" class="col-form-label">Recipient:</label>
                              {{ fish.alias_name }}
                            </div>
                            <div class="mb-3">
                              <label for="message-text" class="col-form-label">Message:</label>
                              <textarea class="form-control" id="message-text"></textarea>
                            </div>
                          </form>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
                          <a href="{% url 'email_button' fish.id sponsor message %}" class="btn btn-secondary">Email</button>
                      </div>
                    </div>
                  </div>

js code:

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
  // Button that triggered the modal
  var button = event.relatedTarget
  // Extract info from data-bs-* attributes
  var recipient = button.getAttribute('data-bs-whatever')
  // If necessary, you could initiate an AJAX request here
  // and then do the updating in a callback.
  //
  // Update the modal's content.
  var modalTitle = exampleModal.querySelector('.modal-title')
  var modalBodyInput = exampleModal.querySelector('.modal-body input')

  modalTitle.textContent = 'New message to ' + recipient
  modalBodyInput.value = recipient
})

Do not need the recipient info because I am passing the sender and recipient pk’s in the URL, but need to get the message. Can’t figure out where to put the js code to make it work.

error message shows the ids but not message

Reverse for ‘email_button’ with arguments ‘(32, 2, ‘’)’ not found. 1 pattern(s) tried: [‘accounts/email_button/(?P[0-9]+)/(?P[0-9]+)/(?P[^/]+)/\Z’]

I strongly suggest that you don’t try to handle this as a url parameter. I would suggest that you turn that box into a form and submit that form in the same manner as you would accept and process any other form.

Otherwise, you’re going to have to address issues of characters not being valid in urls causing problems.