How to prevent executing the function when button click in jquery?

Question

I have a form containing some values like firstname, lastname, etc. When i am not filling all the details, i have displayed the text please fill all the details and it goes to the next step in jquery . I dont want it to go to the next step.

$("button.info").click(function(event){

         var fnamee = $('input.firstname').val();
         var lnamee = $('input.lastname').val();


         if(fnamee==''||lnamee=='')
        {

             alert("Please Fill All Fields");
             event.preventDefault();

        }
         else{


         }

  });

my form is :

<form>
         <input type="text" class="fname"/>
         <input type="text" class="lname"/>
         <input type="submit" class="info" name="submit"/>
</form>

I have given the preventDefault but it is not working.

Can anyone tell a solution for this ?

What do you mean with next step? Do you mean the form is submitted, even when not all fields are filled in, or is there some other code on your page that you consider the next step? — trincot
– trincot, Commented Jan 21, 2017 at 7:37
$("button.info") this is wrong. It should be $(".info") as input is of type submit — Bharatsing Parmar
– Bharatsing Parmar, Commented Jan 21, 2017 at 7:39

mudin · Accepted Answer · 2017-01-21 07:52:43Z

1

Please check your class names. should be .info, .fname and .lname:

$(".info").on('click',function(event){

         var fnamee = $('.fname').val();
         var lnamee = $('.lname').val();


         if(fnamee==''||lnamee=='')
        {

             alert("Please Fill All Fields");
             event.preventDefault();

        }

  });

It is working here: https://jsfiddle.net/Lbx8xh1a/

answered Jan 21, 2017 at 7:52

mudin

2,8922 gold badges24 silver badges47 bronze badges

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

Comments

Bharatsing Parmar · Accepted Answer · 2017-01-21 07:56:21Z

1

In your code jquery selector is wrong. So preventDefault not working

$("button.info")

This should be

$("input.info").click(function(event){
     var fnamee = $('input.fname').val();
     var lnamee = $('input.lname').val();

    if(fnamee==''||lnamee=='')
    {
         alert("Please Fill All Fields");
         event.preventDefault();
    }
    else{

    }  
});

edited Jan 21, 2017 at 7:56

answered Jan 21, 2017 at 7:44

Bharatsing Parmar

2,4551 gold badge11 silver badges18 bronze badges

1 Comment

mudin Over a year ago

you changed to fname after my answer :)

Nikhilesh Shivarathri · Accepted Answer · 2017-01-21 08:00:16Z

1

You have two mistakes in the implementation

Selector: use selector $('input.info') instead of $('button.info')
In the if conditional expression do not check the equality to '' as it can also be undefined. So use if(!fnamee || !lnamee)

And also You can achieve it through multiple ways.

Add required attribute to the input field which by default will prevent the form submission if it is empty.

When the button type is submit, you'll have to return false instead of doing a preventDefault. So i prefer you to write code not on button click but on form submit event. Give form a name such as 'myForm' then

$('form[name="myForm"]').submit(function() {
     var fnamee = $('input.firstname').val();
     var lnamee = $('input.lastname').val();
         if (fnamee==''||lnamee=='') {
            alert("Please Fill All Fields");
            return false; //it can aslso be preventDefault
         }
});

Hope this helps you!

edited Jan 21, 2017 at 8:00

answered Jan 21, 2017 at 7:38

Nikhilesh Shivarathri

1,68011 silver badges16 bronze badges

6 Comments

trincot Over a year ago

Why would preventDefault not work? Can you explain?

Nikhilesh Shivarathri Over a year ago

return false from within a jQuery event handler is same as executing both event.preventDefault and event.stopPropagation on the passed jQuery.Event object. Instead of calling both functions, just use return false;

trincot Over a year ago

So why is preventDefault alone not sufficient?

Nikhilesh Shivarathri Over a year ago

Because if there are any other event delegations attached to form on submit , they will be stopped from bubbling as they're not expected to happen. It is just a good exercise or can be called as safe practice when dealing with form with excessive functionality.

trincot Over a year ago

It might be good practice, but it does not explain at all why the OP's code would still have the form submitted.

|

Jaber · Accepted Answer · 2017-01-21 07:43:04Z

-1

Add an extra class (i.e required) for each required field. Then check each required field by that class using jquery .each() and check whether it is null or not.

For example: HTML

<form>
     <input type="text" class="fname required"/>
     <input type="text" class="lname required"/>
     <input type="submit" class="info" name="submit"/>
</form>

jQuery:

$("button.info").click(function(event){
    var x= true;
    $('.required').each(function(i, obj) {
        if(obj.length == 0)
        {
            x=false;
        }
    });

    if(x){
        //code
    }
    else{
        alert("Please Fill All Fields");
    }
});

edited Jan 21, 2017 at 7:43

answered Jan 21, 2017 at 7:34

Jaber

2672 gold badges10 silver badges30 bronze badges

2 Comments

Jaber Over a year ago

Here required not html attr, but a class.

trincot Over a year ago

Ah, yes, you're right. So how does this solve the OP's problem. Will it not go to the next step now, and why not?

Collectives™ on Stack Overflow

How to prevent executing the function when button click in jquery?

4 Answers 4

Comments

1 Comment

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related