Bootstrap modal toggle button won't cast user id in url.

Question

0.00/5 (No votes)

See more:

Hi everyone!

I have been struggling with this Bootstrap modal for a few days now. I would like the toggle button to cast user id in url and to open a modal with the data for the user. So far I could either cast user id in url with the toggle button when I set the button type to "submit", or open a modal with the user data after writing the id in url manually, when changing the button type to "button".

<form action = "admin_usersearch.php?id='.$row['id'].'" method="POST">
<button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">class="fas fa-user-edit"></button>
</form>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Edit user</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">

MODAL CONTENT
....

<script type="text/javascript">
  var myModal = document.getElementById('myModal')
  var myInput = document.getElementById('myInput')

  myModal.addEventListener('shown.bs.modal', function () {
  myInput.focus()
  })
</script>

I really don't understand what I'm doing in terms of javascript, I'm very new to it. I'm not sure what other code is relevant to this issue. If anything is missing, just let me know, and I'll paste it here.

Any help is greatly appreciated!

What I have tried:

Searched the internet for solution for hours.
I have tried to wrap the button with type "button" in tag, which just cast id in url.
I tried to add javascript onclick event with a link, which didn't work either (solution also found online).

Posted 28-Mar-21 7:22am

InnaTS

Updated 30-Mar-21 3:38am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

InnaTS · Accepted Answer · 2021-03-30T03:38:00

I found a solution I was looking for!

I removed the form tag from around the button, added #userModal id to the modal, and added data-id to the modal toggle button:

<button type="button" class="btn btn-primary userinfo" data-id='."$id".'>class="fas fa-user-edit"></button>

and used following javascript:

<script type="text/javascript">
$(document).ready(function(){
  $('.userinfo').click(function(){
    var id = $(this).data('id');

    $.ajax({
      url: 'admin_useredit.php',
      type: 'post',
      data: {id: id},
      success: function(response){
        $('.modal-body').html(response);

        $('#userModal').modal('show');
      }
    });
  });
});

</script>

where

admin_useredit.php

contains the dynamic output I'd like to see in the modal.

I used Bootstrap JS and jQuery libraries.