How to stop triggering an event after button click JS

Question

I've written a function for displaying 2 text-boxes when user clicks a button. But the issue is when click these 2 buttons an event for another button in the form is fired. So I wrote a mouse click event for that Hide and Show functions. But still it's not working. When the show button clicks 2 text-boxes are showing and when hide clicks they disappear. I'll put my coding down below.

     <div class="form-group">
            <div class="col-sm-9">
              <input type="text" id="height"/>
                <input type="text" id="width"/>

                <button id="hide">Hide</button>
                <button id="show">Show</button>


        </div>
    </div>

$("show").click(function(){ #Mouse Click event for show button


  $(document).ready(function(){
     $("#input1").hide();
             $("#input2").hide();
        $("#hide").click(function(){
            $("#input1").hide();
             $("#input2").hide();
        });
        $("#show").click(function(){
            $("#input1").show();
             $("#input2").show();
        });
    });

    });

The element IDs in your JS don't match your HTML. Also, it doesn't make sense to put a document ready handler inside a click handler. Also $("show") is looking for a <show> element, you need a # as in your other code. — nnnnnn
– nnnnnn, Commented Sep 27, 2017 at 3:02

Shadow Fiend · Accepted Answer · 2017-09-27 03:45:26Z

1

Try this

  $(document).ready(function() {
    $("#height, #width").hide();
    $("#hide").click(function() {
      $("#height, #width").hide();
    });
    $("#show").click(function() {
      $("#height, #width").show();
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="col-sm-9">
    <input type="text" id="height" />
    <input type="text" id="width" />

    <button type="button" id="hide">Hide</button>
    <button type="button" id="show">Show</button>


  </div>
</div>

edited Sep 27, 2017 at 3:45

answered Sep 27, 2017 at 3:05

Shadow Fiend

1,8291 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ryan Oscar Over a year ago

Thanks for your answer. But the event for the cart function still firing. When I click show or hide button it still navigate to the cart because there is a button below called "Add to cart". Do you have any idea how to stop that happening? @Shadow Fiend

Shadow Fiend Over a year ago

@RyanOscar add this.<button type="button">.. its because if the button is inside a form it still acts as submit.. you need to specify it type first.. I edited my answer..

Ryan Oscar Over a year ago

Now it's not redirecting to the cart page. But there's another catch now. Show and Hide buttons are not working now. It supposed to show the 2 text-boxes when click show and hide when click hide. @Shadow Fiend

Shadow Fiend Over a year ago

@RyanOscar can you post your complete html and js so i can find what is the problem.. or just the relevant code that are affecting the function..

Shadow Fiend Over a year ago

@RyanOscar the click function is not working because you've got wrong selector.. your id's are height and width not input1 and input 2.. change your jquery with the jquery I made in the answer and it should work..

|

brk · Accepted Answer · 2017-09-27 03:30:56Z

0

Just call click function inside document.ready. Also trigger events on proper element using appropriate selectors

$(document).ready(function() {

  $("#hide").click(function() {
    $("#height ,#width").hide();

  });
  $("#show").click(function() {
    $("#height ,#width").show();

  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <div class="col-sm-9">
    <input type="text" id="height" />
    <input type="text" id="width" />

    <button id="hide">Hide</button>
    <button id="show">Show</button>


  </div>
</div>

answered Sep 27, 2017 at 3:30

brk

50.3k10 gold badges59 silver badges85 bronze badges

Collectives™ on Stack Overflow

How to stop triggering an event after button click JS

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related