How to pass Span id value through href to another page

Question

I am trying to pass song_id to a modal then pass the value gotten from the song_id in the modal to another page through href. The song_id value is stored in the span id, I then want to pass the span id value through href stored in a php variable and display it in the next page, but the span value does not go through to the next page using the href, Please i need guide on how to pass the span id value stored in the variable to the next page using href.

This is my code:

     // This is where am getting song_id from

                <?php
                require '../db.php';
                $sql = "select * from songs order by song_id desc Limit 20";
               $sql_query = mysqli_query($con,$sql);

                 while ($row = mysqli_fetch_array($sql_query)) {
                     $song_id = $row['song_id'];

                  ?>
                   
    // This is the code triggering the modal and passing the song_id to the modal

         <li><a data-id="<?php echo $row['song_id']; ?>"  onclick="$('$playlist_id').text($(this).data('id')); $('#myModal3').modal('show');"><span class='icon icon_playlst'></span>Add To Playlist</a></li>


// This is the modal which would receive song_id and pass it to my_playlist.php through href.



<!-- Select Playlist Start-->
    <div id="myModal3" class="modal  centered-modal" role="dialog">
        <div class="modal-dialog login_dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <button type="button" class="close" data-dismiss="modal">
                    <i class="fa_icon form_close"></i>
                </button>
                <div class="modal-body">
                    
                    <form action="create_playlist.php" method="post">
                            
                    <div class="ms_register_form">
                        <h2>Add to Playlist</h2> 
                          
                             <div class="ms_weekly_box">
                            <div class="weekly_left">
                                <div class="w_top_song">
                                  
                                    <div class="w_tp_song_name">

      //This is where i store the song_id in a php variable and pass it in the href of my_playlist.php.

<h2><?php $playlist_id = '<span id="playlist_id"/>'; echo $playlist_id; ?></h2>

                                                                         
 <h3><a href="my_playlist.php?new_id=<?php echo $playlist_id; ?>">Hip-Hop</a></h3>
                                    </div>
                                </div>
                            </div>                      
                        </div>
                    </div>
                      </form>
                </div>
            </div>
        </div>
    </div>

Answer 1

To pass data through URL you have to use the "get" parameters :

• in your HTML have this kind of link : www.mysite.com/mypage.html?data_name=data_value
• in your PHP you can access this data with $_GET['data_name'] (here it has the value : 'data_value')

Answer 2

I saw this question earlier but it got closed.

Your title question can be solved using javascript. You can wrap your span tag and button in a form and access the id of the span tag on submission of the form. You can create as many forms as you wish.

<form onsubmit="playlistHandler(event)">
    <h2><span id="playlist_id"/><?php echo $playlist_id ?></span></h2>                                         
    <button type="submit">Hip-Hop</button>
</form>


<script>
    function playlistHandler(event)
    {
        event.preventDefault();
        let link_id = encodeURI(event.target.children[0].children[0].getAttribute('id'));
        window.location = "my_playlist.php?new_id=" + link_id;
    }
</script>