如何获取 jquery 和模态窗口的按钮 ID？答案

【问题标题】：How to get a button ID to jquery and modal window?如何获取 jquery 和模态窗口的按钮 ID？
【发布时间】：2015-12-31 05:36:24
【问题描述】：

我有一个 HTML 表单，点击按钮会生成一个模态窗口。按钮如下。

<button type="button" class="btn" id="gs_one" data-toggle="modal" data-target="#BASIC">Get Started</button>

启动的模式类型将是“基本”类型。模态实际上是另一种形式，然后将通过 POST 方法提交到另一个 PHP 页面。模态如下。

<div class="modal fade" id="BASIC" role="dialog">
   <div class="modal-dialog modal-lg">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Header</h4>
         </div>
         <div class="modal-body">
            <form class="contact-work-form2 mar" id="contact-form" action="" method="post">
               <div class="text-input">
                  <div class="float-input">
                     <input type="text" placeholder="Name" id="name2" name="name" required>
                  </div>
                  <div class="float-input2">
                     <input type="text" placeholder="Email" id="mail2" name="mail" required>
                  </div>
               </div>
               <div class="text-input">
                  <div class="float-input">
                     <input type="text" placeholder="Phone" id="phone" name="phone" required>
                  </div>
                  <div class="float-input2">
                     <input type="text" placeholder="Company" id="company" name="company" required>
                  </div>
               </div>
               <div class="text-input">
                  <div class="float-input1">
                     <input type="text" required name="country" id="country" placeholder="Country">
                  </div>
               </div>
               <input type="submit" value="Submit" class="submit_contact main-form" name="mailing-submit">
            </form>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>

我可以 POST 到 PHP 页面。但是，在发布时，我还需要传递一个变量，该变量具有启动模式的按钮的值或 ID。

【问题讨论】：

以模态形式添加隐藏输入字段。单击按钮时调用 jquery/javascript 函数并将按钮的 ID 或值设置为隐藏的输入字段
您可以获取按钮 id 并将其保存在表单的输入字段中作为隐藏，以便它可以通过邮寄方式出现在 php 页面上......
其实页面中有3个按钮，分别对应“BASIC”、“STANDARD”和“PREMIUM”。这三个的模态形式都是相同的。我需要知道点击了哪个按钮。
如果所有按钮都具有相同的类.btn，则使用@user2738863 发布的代码，它将为您提供各自的按钮ID。在同一个函数中，您可以将这些 id 分配给模态表单中的隐藏输入字段。

标签： javascript php jquery html modal-dialog

【解决方案1】：

您可以通过

访问按钮 ID

$(document).ready(function(){
  $('.btn').click(function(){
    var a=$(this).attr('id');
    alert(a);
  });
});

【讨论】：

【解决方案2】：

试试下面的代码，

当你点击按钮时，它会获取相应的模态ID。
该 ID 将作为隐藏字段添加到表单中。
当您提交表单时，您可以访问服务器端的数据。

<script type="text/javascript">
function appendHiddenDiv(){
    var modalNameWithHash = $(this).attr('data-target');
    var modalName = modalNameWithHash.substring(1)
    $('<input>').attr({
        type: 'hidden',
        name: 'plan',
        value: modalName
    }).appendTo(modalNameWithHash+' '+'form');
}
$(document).on("click",'button[data-toggle="modal"]', appendHiddenDiv);
</script>

我希望这会有所帮助。

【讨论】：