Target button class in jquery

user_10367137 0
Viewed 88

i have here a jquery which hides and collapse div when a button is pressed.

     jQuery('button').click( function(e) {
    jQuery('.collapse').collapse('hide');
});

my problem is the button that is targeted by the jquery stands in all of the button of my page. how can i have tried targeting the button class but i've guest it doesnt work. Here is my html code.

 <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#claim-padala" aria-expanded="false" aria-controls="claim-padala">
     Claim Smart Padala
  </button>
<! ––claim-padala ––>
<div class="collapse" id="claim-padala">
  <div class="card card-body">
   <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSe1V_P0INhaTJo2sfq8qrJTvo1UmWW8mpPIKWsZ93JUDj5h3A/formResponse" onsubmit="return confirm('Do you really want to submit the form?');">

      <div class="form-element">
        <span>A. NOTE: Ang Digits Smart Padala Account Number ay 5577-5194-8194-0105 or Paymaya No. 0929-187-9421 kung nai-send na maki-Input ang Reference Number na nareceived na text from Paymaya or PYMYNegosyo</span>
        <input type="tel" name="entry.622619968" placeholder="Reference/Paymaya No." pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}|[0-9]{4}-[0-9]{3}-[0-9]{4}|[0-9]{16}|[0-9]{11}" required="">
      </div>
      <br>

      <div class="form-element">
        <span>B. Input ang amount na nareceived </span>
        <input type="number" name="entry.1812134286" placeholder="Received Amount" min="0" max="500000" step="any" required="">
      </div>
      <br>

      <div class="form-element">
        <span>C. Input your name </span>
        <input type="text" name="entry.1473350596" placeholder="Input Your Name" onkeypress='return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))' required="">
      </div>
      <br>

      <div class="form-element">
        <span>D. Input your cellphone number. </span>
        <input type="tel" name="entry.741783283" placeholder="Input CP Number" pattern="[0-9]{4}-[0-9]{3}-[0-9]{4}|[0-9]{11}" required="">
      </div>
      <br>

     <div class="form-element">
        <span>E. Input your address. </span>
        <input type="text" name="entry.1153333277" placeholder="Address" required="">
     </div>
     <br>

    <button type="submit">Submit</button>
   </form>
  </div>
</div>

Thanks a lot in advance for helping.

html jquery javascript
2 Answers

It's simple:

jQuery('#my_btn').click( function(e) {
        jQuery('.collapse').collapse('hide');
    });

add a unique id to the button :

<button class="btn btn-primary" id="my_btn" type="button" data-toggle="collapse" data-target="#claim-padala" aria-expanded="false" aria-controls="claim-padala">
     Claim Smart Padala
  </button>
<! ––claim-padala ––>
<div class="collapse" id="claim-padala">
  <div class="card card-body">
   <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSe1V_P0INhaTJo2sfq8qrJTvo1UmWW8mpPIKWsZ93JUDj5h3A/formResponse" onsubmit="return confirm('Do you really want to submit the form?');">

      <div class="form-element">
        <span>A. NOTE: Ang Digits Smart Padala Account Number ay 5577-5194-8194-0105 or Paymaya No. 0929-187-9421 kung nai-send na maki-Input ang Reference Number na nareceived na text from Paymaya or PYMYNegosyo</span>
        <input type="tel" name="entry.622619968" placeholder="Reference/Paymaya No." pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}|[0-9]{4}-[0-9]{3}-[0-9]{4}|[0-9]{16}|[0-9]{11}" required="">
      </div>
      <br>

      <div class="form-element">
        <span>B. Input ang amount na nareceived </span>
        <input type="number" name="entry.1812134286" placeholder="Received Amount" min="0" max="500000" step="any" required="">
      </div>
      <br>

      <div class="form-element">
        <span>C. Input your name </span>
        <input type="text" name="entry.1473350596" placeholder="Input Your Name" onkeypress='return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))' required="">
      </div>
      <br>

      <div class="form-element">
        <span>D. Input your cellphone number. </span>
        <input type="tel" name="entry.741783283" placeholder="Input CP Number" pattern="[0-9]{4}-[0-9]{3}-[0-9]{4}|[0-9]{11}" required="">
      </div>
      <br>

     <div class="form-element">
        <span>E. Input your address. </span>
        <input type="text" name="entry.1153333277" placeholder="Address" required="">
     </div>
     <br>

    <button type="submit">Submit</button>
   </form>
  </div>
</div>

You can replace my_btn (id of the button) with your own custom id. Replace it in your both Jquery code and button too.

EDIT: You can apply this to three buttons (as mentioned in your comment) by using class instead of id. This is how you can do this:

jQuery('.my_btn').click( function(e) {
        jQuery('.collapse').collapse('hide');
    });

And this is your html code to do so.

<button class="btn btn-primary my_btn" type="button" data-toggle="collapse" data-target="#claim-padala" aria-expanded="false" aria-controls="claim-padala">
     Claim Smart Padala
  </button>
<!-- Added 2 buttons by me for demo purpose -->
 <button class="btn btn-primary my_btn" type="button" data-toggle="collapse" data-target="#claim-padala" aria-expanded="false" aria-controls="claim-padala">
   Claim Smart Padala
 Button 2  </button>
 <button class="btn btn-primary my_btn" type="button" data-toggle="collapse" data-target="#claim-padala" aria-expanded="false" aria-controls="claim-padala">
     Claim Smart Padala Button 3
  </button>
<!-- End added 2 buttons -->
<! ––claim-padala ––>
<div class="collapse" id="claim-padala">
  <div class="card card-body">
   <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSe1V_P0INhaTJo2sfq8qrJTvo1UmWW8mpPIKWsZ93JUDj5h3A/formResponse" onsubmit="return confirm('Do you really want to submit the form?');">

      <div class="form-element">
        <span>A. NOTE: Ang Digits Smart Padala Account Number ay 5577-5194-8194-0105 or Paymaya No. 0929-187-9421 kung nai-send na maki-Input ang Reference Number na nareceived na text from Paymaya or PYMYNegosyo</span>
        <input type="tel" name="entry.622619968" placeholder="Reference/Paymaya No." pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}|[0-9]{4}-[0-9]{3}-[0-9]{4}|[0-9]{16}|[0-9]{11}" required="">
      </div>
      <br>

      <div class="form-element">
        <span>B. Input ang amount na nareceived </span>
        <input type="number" name="entry.1812134286" placeholder="Received Amount" min="0" max="500000" step="any" required="">
      </div>
      <br>

      <div class="form-element">
        <span>C. Input your name </span>
        <input type="text" name="entry.1473350596" placeholder="Input Your Name" onkeypress='return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))' required="">
      </div>
      <br>

      <div class="form-element">
        <span>D. Input your cellphone number. </span>
        <input type="tel" name="entry.741783283" placeholder="Input CP Number" pattern="[0-9]{4}-[0-9]{3}-[0-9]{4}|[0-9]{11}" required="">
      </div>
      <br>

     <div class="form-element">
        <span>E. Input your address. </span>
        <input type="text" name="entry.1153333277" placeholder="Address" required="">
     </div>
     <br>

    <button type="submit">Submit</button>
   </form>
  </div>
</div>

I have added 2 buttons more for demo purposes. You can remove it if you want. You can replace my_btn (class of the button) with your own custom class. Make sure you change it in your Jquery also. Hope it helps.

user_151207900

Your code looks like Bootstrap, which has the functionality for collapse baked in. As long as you're importing the bootstrap css and js you don't need that button click function.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#claim-padala" aria-expanded="false" aria-controls="claim-padala">
     Claim Smart Padala
  </button>
<! ––claim-padala ––>
<div class="collapse" id="claim-padala">
  <div class="card card-body">
    <form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSe1V_P0INhaTJo2sfq8qrJTvo1UmWW8mpPIKWsZ93JUDj5h3A/formResponse" onsubmit="return confirm('Do you really want to submit the form?');">

      <div class="form-element">
        <span>A. NOTE: Ang Digits Smart Padala Account Number ay 5577-5194-8194-0105 or Paymaya No. 0929-187-9421 kung nai-send na maki-Input ang Reference Number na nareceived na text from Paymaya or PYMYNegosyo</span>
        <input type="tel" name="entry.622619968" placeholder="Reference/Paymaya No." pattern="[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}|[0-9]{4}-[0-9]{3}-[0-9]{4}|[0-9]{16}|[0-9]{11}" required="">
      </div>
      <br>

      <div class="form-element">
        <span>B. Input ang amount na nareceived </span>
        <input type="number" name="entry.1812134286" placeholder="Received Amount" min="0" max="500000" step="any" required="">
      </div>
      <br>

      <div class="form-element">
        <span>C. Input your name </span>
        <input type="text" name="entry.1473350596" placeholder="Input Your Name" onkeypress='return ((event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122) || (event.charCode == 32))' required="">
      </div>
      <br>

      <div class="form-element">
        <span>D. Input your cellphone number. </span>
        <input type="tel" name="entry.741783283" placeholder="Input CP Number" pattern="[0-9]{4}-[0-9]{3}-[0-9]{4}|[0-9]{11}" required="">
      </div>
      <br>

      <div class="form-element">
        <span>E. Input your address. </span>
        <input type="text" name="entry.1153333277" placeholder="Address" required="">
      </div>
      <br>

      <button type="submit">Submit</button>
    </form>
  </div>
</div>

user_17729330
Related