jQuery event on input submit field

Question

I want to fade in an element with JQuery code when a inputfield is clicked. However, I cannot seem to get it to work, when the selector is placed inside the form. If I remove the selector outside the form it works fine. Is there any work-aroud for this? Or, maybe JQuery code does not execute inside a form? Here is my code:

<form action="newBet.jsp" method="get">

    <fieldset>          
        <input id="test" type="submit" name="update" value="&#9998;"/>
        <input class="form-control" id="div1" style="display:none;" type="number"/>
    </fieldset>

</form>


    $(document).ready(function(){
      $("#test").click(function(){
        $("#div1").fadeIn();
      });
    });

If I place the selector #test outside the form it works fine, but I want to execute the JQuery inside the form.

e.g. if I change the jquery selector #test to a button outside the <form></form> it works fine. — egx
– egx, Commented May 17, 2020 at 20:07

Robo Robok · Accepted Answer · 2020-05-17 20:10:15Z

1

Your form gets submitted, which refreshes the page and doesn't let you see the result.

Instead of applying your event to the submit button, apply it to the form itself and return false to prevent default behavior (submitting):

<form id="test-form" action="newBet.jsp" method="get">

$(document).ready(function(){
    $("#test-form").submit(function(){
        $("#div1").fadeIn();
        return false;
    });
});

answered May 17, 2020 at 20:10

Robo Robok

23.1k22 gold badges84 silver badges146 bronze badges

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

2 Comments

egx Over a year ago

Thank @Robo Robok. Is there a reason for choosing "return false" over prevent default from the other suggestions? I've tried both, and both works fine in this case.

Robo Robok Over a year ago

Yes, they will do the same thing in modern browsers. Under the hood, jQuery calls event.preventDefault() and event.stopPropagation() when you return false in the callback. You should avoid using event directly in jQuery when not needed. jQuery is about abstraction. If you wanted to use event.preventDefault() yourself, I'd skip using jQuery entirely.

kompaniietst · Accepted Answer · 2020-05-17 20:13:30Z

1

<input id="test" type="button" name="update" value="&#9998;" />

type="submit" refreshes the page. You neet to change type="button"

answered May 17, 2020 at 20:13

kompaniietst

2503 silver badges10 bronze badges

Comments

matthias_h · Accepted Answer · 2020-05-17 20:13:53Z

1

You can get the fadein effect with the input inside the form if you add preventDefault() like this:

 $(document).ready(function(){
      $("#test").click(function(e){
        e.preventDefault();
        $("#div1").fadeIn();
      });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="newBet.jsp" method="get">

  <fieldset>
    <input id="test" type="submit" name="update" value="&#9998;" />
    <input class="form-control" id="div1" style="display:none;" type="number" />
  </fieldset>

</form>

The default behaviour of the input of type "submit" inside the form is to submit the form which you can prevent using preventDefault() and call at a later time after the fadein effect.

edited May 17, 2020 at 20:13

answered May 17, 2020 at 20:08

matthias_h

11.4k9 gold badges24 silver badges40 bronze badges

3 Comments

Robo Robok Over a year ago

Keep in mind that in jQuery it's cleaner to return false instead of doing e.preventDefault. jQuery was created with abstracting potential incompatibilities in mind and it does have an abstraction for preventDefault() and stopPropagation() in form of return false in the listener handler.

egx Over a year ago

Thank you. That part about submit/refresh confused me. I've precented the default and called the submit upon the fadein.

matthias_h Over a year ago

@RoboRobok Thanks for your feedback, will keep it in mind in the future.

Collectives™ on Stack Overflow

jQuery event on input submit field

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related