CODEWITHSUNDEEP
javascriptphphtml
Marvin Acosta
Marvin Acosta

Reputation: 166

echo the value of the specific buttons on the modal form

I am using a modal form which will show up a button if the buttons on the webpage will click. but my button is in href form, see my code below.

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

there are a lots of "Form Buttons" choices on my webpage, QUESTION: how could I echo the value of the current "Form Button" which were clicked and show it up on the Modal Form? check my Echo code where I used inside my Modal Form:

<?php 
     if (isset($_POST["btn"]))
 {
    echo $_POST["btn"];
 }
?>

here is the modal code;

<!-- Modal header starts -->                                                
                        <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> 求人応募</h4>
                                </div>
                                    <div class="modal-body" style="padding:10px 10px;">
    <!-- Modal header ends -->
    <!-- Modal Application form starts -->  
                     <div class="modal-body">
                            <form action="confirmation.php" method="get" enctype="multipart/form-data">

                            <?php 
                                   if (isset($_POST["btn"]))
                                   {
                                       echo $_POST["btn"];
                                   }
                            ?>

here is the different page after the modal form, click next and proceed to this page. to echo all the input details plus the botton id "#01"

<form id="main-contact-form1"  style="background-color: #f0f8ff; padding: 20px;" class="contact-form1" name="contact-form1" method="post" action="sendappli.php" role="form">   

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

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

here is the button code inside the modal to proceed to next page

    <div class="modal-body">
                            <form action="confirmation.php" method="get" enctype="multipart/form-data">

here is the code for my Modal together with the "NEXT" button to proceed to the 2nd page

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

                                        </h6>   
                                         <div class="modal-body">
                            <form action="confirmation.php" method="get" enctype="multipart/form-data">

                        <!-- First Name Filed Starts -->
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="name">NAME</label>
                                    <input type="text" class="form-control" name="name" id="name" required="required" placeholder="Name">
                                </div>
                            </div>
                        <!-- First Name Filed Ends -->


<input type="submit" class="btn btn-success pull-right" value="NEXT">

and here is the 2nd page to echoing the information and button value "#01"

<form id="main-contact-form1"  style="background-color: #f0f8ff; padding: 20px;" class="contact-form1" name="contact-form1" method="post" action="sendappli.php" role="form">   

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

enter image description here

Upvotes: 1

Views: 689

Answers (2)

Nandhi Kumar
Nandhi Kumar

Reputation: 353

    $(document).on("click", ".model_open", function () {
        var btnval = $(this).data('btnval'); 
       $(".modal-body #btnval").text( btnval );
    $('#hiddenid').val(btnval ); //Change this
    });
    <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-success model_open" data-btnval = "#01" aria-hidden="true" data-dismiss="modal" >form</a>
   
    <!-- Modal header starts -->                                                
                            <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> 求人応募</h4>
                                    </div>
                                        <div class="modal-body" style="padding:10px 10px;">
<h6 class="sub-heading-2 tiny text-medium text-center-xs">
                                        <?php
                                                echo "<div id="btnval"></div>";
                                        ?>
                                        </h6>
        <!-- Modal header ends -->
        <!-- Modal Application form starts -->  
                         <div class="modal-body">

                                <form action="confirmation.php" method="get" enctype="multipart/form-data">
    <input type="text" id="hiddenid" name="btnval">
 <!-- First Name Filed Starts -->
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="name">NAME</label>
                                    <input type="text" class="form-control" name="name" id="name" required="required" placeholder="Name">
                                </div>
                            </div>
    <input type="submit" class="btn btn-success pull-right" value="NEXT">

Upvotes: 1

Mina
Mina

Reputation: 1516

Try this code

$('#myModal').on('shown.bs.modal', function (e) {
    console.log(e.relatedTarget)
})

That method triggers when the modal is shown on screen, the e.relatedTarget contains the opener element, which can be accessed by jQuery as $(e.relatedTarget)

See Bootstrap modal events here https://getbootstrap.com/docs/3.3/javascript/#modals-events

Working example https://codepen.io/D-Heap/pen/VrLeXR

Upvotes: 1

Related Questions