Getting the value of the button from the 1st page and echoing it to the Modal and to the 2nd page

Question

I know some of you this problem is pretty simple to do, but I am working in a week to find it out what are the right codes to function it well.

in the 1stpage.php there is a multiple buttons with different values in it

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#myModal" data-toggle="modal" value="#01" name="btn" class="button2 btn btn-primary model_open" data-btnval = "#01" aria-hidden="true" data-dismiss="modal" >form</a>

<a href="#myModal" data-toggle="modal" value="#02" name="btn" class="button2 btn btn-success model_open" data-btnval = "#02" aria-hidden="true" data-dismiss="modal" >form</a>

<a href="#myModal" data-toggle="modal" value="#03" name="btn" class="button2 btn btn-warning model_open" data-btnval = "#03" aria-hidden="true" data-dismiss="modal" >form</a>

that can open the Modal Form inside the page

  $(document).on("click", ".model_open", function () {
    var btnval = $(this).data('btnval'); 
   $(".modal-body #btnval").text( btnval );
$('#hiddenid').val(btnval ); 
});e here

on the Modal Form you'll see the current value button echoed on the form, because of the script and this code

<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" 
tabindex="-1" id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header1" style="padding:10px 15px;">
         <button type="button" class="close" data-dismiss="modal" >&times;
         </button>
    <h4><span class="glyphicon glyphicon-pencil"></span> FORM</h4>
</div>
<div class="modal-body" style="padding:10px 10px;">

<h6 class="sub-heading-2 tiny text-medium text-center-xs">

<?php
    $divName="btnval";
    echo "<div id=$divName></div>"; <!-- echoing the button value -->
?>
 <div class="modal-body">

<form action="2ndpage.php" method="get" enctype="multipart/form-data">

<div class="col-sm-6">
  <div class="form-group">
    <label for="lname">Name</label>
      <input type="text" class="form-control" name="lname" id="lname" 
      required="required" placeholder="Name">
  </div>
</div>

<input type="submit" id="btn-next" class="btn btn-success pull-right" 
 value="NEXT"> 
</form>

on the Modal form there is NEXT button which will you proceed to the 2ndpage.php to see and double check the information you provided on the form, together with the Value Button you've clicked from the first page.

 <div class="label-field-pair">
<label>Name</label>
<input class="form-control" id='name' name='name' value='<?php echo 
$_GET["name"]; ?>'  />
</div>

<div class="label-field-pair">
<label>ID</label>
<input class="form-control" id='id' name='id' value='<?php echo 
$_GET["btnval"]; ?>'  />
</div>

It seems pretty simple but I can't find a good way to do it. I was tried a much code with the codes from the others to get the name value of the current button to be echo on the 2ndpage.php, but I always got an error.

SOLVED: 1stpage.php

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Buttons start

<a href="#myModal" data-toggle="modal" value="#01" name="btn" class="button2 btn btn-primary model_open" data-btnval = "#01" aria-hidden="true" data-dismiss="modal" >form</a>
<a href="#myModal" data-toggle="modal" value="#02" name="btn" class="button2 btn btn-success model_open" data-btnval = "#02" aria-hidden="true" data-dismiss="modal" >form</a>
<a href="#myModal" data-toggle="modal" value="#03" name="btn" class="button2 btn btn-warning model_open" data-btnval = "#03" aria-hidden="true" data-dismiss="modal" >form</a>

Getting the current button id by using this script

$(document).on("click", ".model_open", function () {
            var btnval = $(this).data('btnval'); 
           $(".modal-body #btnval").text( btnval );
        $('#hiddenid').val(btnval); 
        });

Modal Form

<div class="modal-body">
<form action="2ndpage.php" method="get" enctype="multipart/form-data">
<h6>
    <?php
            $divName = "btnval";
                echo '<div id="'.$divName.'"></div>';
    ?>
</h6>
<input type="hidden" name="id" value="<?php echo $divName; ?>">
<input type="hidden" id="hiddenid" name="btnval">
<div class="form-group">
    <input type="text" class="form-control" name="name" id="name"         
    required="required" placeholder="Name">
</div>
<input type="submit" class="btn btn-success" value="NEXT"></form></div>

2ndpage.php

<label>ID</label>
  <input class="form-control" id='id' name='id' value='<?php echo 
     $_GET["btnval"]; ?>'/>
</div>
 <div class="label-field-pair">
<label>NAME</label>
  <input class="form-control" id='name' name='name' value='<?php echo 
     $_GET["name"]; ?>' />
</div>

Answer 1

Try to save the value in a cookie and call the cookie on the second page.

Answer 2

How about you send a hidden value??

Trigger:

  <a data-toggle="modal" data-id="#03" title="Add this item" class="button2 btn btn-warning model_open" href="#myModal">test</a>

Modal:

<form action="2ndpage.php" method="get" enctype="multipart/form-data">

 <div class="col-sm-6">
  <div class="form-group">
   <label for="lname">Name</label>
    <input type="text" class="form-control" name="lname" id="lname" 
    required="required" placeholder="Name">
  </div>
  <input type="hidden" name="whatyouwant" id="whatyouwant" value=""/>
 </div>

 <input type="submit" id="btn-next" class="btn btn-success pull-right" value="NEXT"> 
</form>

jquery:

 $(document).on("click", ".model_open", function () {
    var btnval = $(this).data('id');
    $(".modal-body #whatyouwant").val(btnval);
 });

On 2ndpage.php:

1. Echo Value

   <?php
     echo "<pre>";
     print_r($_REQUEST);
     echo "</pre>";
   ?>
   

2. Output.

   Array
   (
      [lname] => sdsa
      [whatyouwant] => #03
   )