javascript - 回显模式窗体上特定按钮的值

标签 javascript php html

我正在使用模态表单,如果网页上的按钮被点击,它会显示一个按钮。但我的按钮是 href 形式,请参阅下面的代码。

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

我的网页上有很多“表单按钮”选项, 问题:我如何回显单击的当前“表单按钮”的值并将其显示在模态表单上?检查我在模态表单中使用的 Echo 代码:

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

这是模态代码;

<!-- 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"];
                                   }
                            ?>

这是模态表单之后的不同页面,单击“下一步”进入该页面。回显所有输入细节加上按钮 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>

这是模式中的按钮代码,用于继续下一页

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

这是我的模态框的代码以及“下一步”按钮以进入第二页

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

这里是第二页回显信息和按钮值“#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

最佳答案

    $(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">

关于javascript - 回显模式窗体上特定按钮的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47030716/

相关文章:

php - MySQL:连接两个表/如果表A中的特定字段不为空,则从表B中的特定行读取所有数据

html - ApplicationCache 和离线时的错误

javascript - 如何在用户使用 jQuery 单击时在特定 li 上添加事件类

javascript - 使用额外项目修改顺序键控对象

php - json 字符串化为 php

javascript - jQuery - 在外部单击时关闭对话框

html - 元素展开后窗口宽度

javascript - Json过滤数据并按顺序排序

javascript - Google 日历事件创建发送通知

php - 使用POST方法将表单中的数据插入mysql