CODEWITHSUNDEEP
javascriptphpjqueryhtmlmodal-dialog
Ashif Shereef
Ashif Shereef

Reputation: 494

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

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

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.

Upvotes: 0

Views: 8285

Answers (2)

Nikhil
Nikhil

Reputation: 1450

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.

Upvotes: 1

shiva chauhan
shiva chauhan

Reputation: 420

you can access the button id by 

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

Upvotes: 6

Related Questions