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


How to get a button ID to jquery and modal window?

我有一个HTML表单,点击按钮会生成一个Modal窗口。按钮如下所示。

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

启动的模态类型将是"基本"类型。Modal实际上是另一种形式,然后通过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。

您可以通过访问按钮id

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

尝试以下代码,

  1. 当你点击按钮时,它会获取相应的模态id
  2. 该id将作为隐藏字段添加到表单中
  3. 当您提交表单时,您可以访问服务器端的数据
<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>

我希望这能有所帮助。