javascript - How to get a button ID to jquery and modal window? - Stack Overflow

admin管理员组

文章数量:1355559

I have an HTML form and on Clicking the button would generate a Modal window.The Button is as follows.

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

The modal type that launched would be the "basic" type. Modal is actually another form, which would then be submitted to another PHP page via a POST method. The Modal is as below.

<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="pany" name="pany" 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>

I can POST to the PHP page. However, while posting, I also need to pass a variable which has the value or the ID of button that launched the modal.

I have an HTML form and on Clicking the button would generate a Modal window.The Button is as follows.

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

The modal type that launched would be the "basic" type. Modal is actually another form, which would then be submitted to another PHP page via a POST method. The Modal is as below.

<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="pany" name="pany" 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>

I can POST to the PHP page. However, while posting, I also need to pass a variable which has the value or the ID of button that launched the modal.

• javascript
• php
• jquery
• html
• modal-dialog

Share Improve this question Follow edited Dec 31, 2015 at 6:18 Sam 51322 gold badges1313 silver badges2929 bronze badges asked Dec 31, 2015 at 5:36 Ashif ShereefAshif Shereef 49411 gold badge99 silver badges2424 bronze badges 4

• 1 Add a hidden input field in modal form . Call jquery/javascript function when button is clicked and set ID or value of button to the hidden input field – Sameer K Commented Dec 31, 2015 at 5:42
• 1 you can take the button id and save it in input field of form as hidden so that it will be there on php page by post.... – Abbas Commented Dec 31, 2015 at 5:43
• 1 Actually there are 3 buttons in the page that corresponds to "BASIC", "STANDARD" and "PREMIUM". The modal form is same for all three. I need to get which button has been clicked. – Ashif Shereef Commented Dec 31, 2015 at 5:47
• If all the buttons have same class .btn then use code the posted by @user2738863 which will give you the respective button ids. In the same function you can assign these ids in to hidden input field in the modal form. – Sameer K Commented Dec 31, 2015 at 5:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

you can access the button id by

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

Try following code,

1. When you click on the button it will fetch corresponding id of the modal.
2. That id will be added as hidden field into the form.
3. When you submit the form, you can access the data in server-side.

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

I hope this helps.

本文标签： javascriptHow to get a button ID to jquery and modal windowStack Overflow