stop form submitting in a function - jquery / javascript

Question

The codes posted might be not consistent because I am continuing someone's work and trying not to make too much changes if possible. Anyways, there's this form which has inputs for others to input values. upon submitting, if the input field is empty an alert will pop up and should stop the form from submitting.

I have tried using both return false; and event.preventDefault(); inside the if input field is empty but the form still submits.

trying to cut this short because the script is hell lots

just a simple form

<form action="cart.php" method="post" name="ordering" id="ordering" onsubmit="addDesc();">
    <button type="submit" class="add-to-cart" alt='Add this product to your shopping cart now.'>Add to Cart <span class="fa fa-cart-plus"></span></button>
  </form>

the function

function addDesc(desc){
// some variables to be passed when form submits
// an $.each function to loop through something
    //inside the loop it'll push input values into an array called checkEmpty
  if(jQuery.inArray("", checkEmpty) !== -1){
    alert('Please Do not leave any input fields empty.');
    return false;
  }else{
   //some outputs        
  }
}

return false is the first I tried but form still submitted. I even tried something like

$('.add-to-cart').on('click', addDesc(event));

and inside addDesc() instead of return false I used event.preventDefault()

Thanks in advance.

Reuven Karasik · Accepted Answer · 2015-08-25 21:52:05Z

1

Very simple. Just add a return before calling the function onsubmit:

<form action="cart.php" method="post" name="ordering" id="ordering" onsubmit="return addDesc();">

Should do the trick (returning true or false will send the form or prevent the submission).

answered Aug 25, 2015 at 21:52

Reuven Karasik

4845 silver badges14 bronze badges

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

Comments

Zakaria Acharki · Accepted Answer · 2015-08-25 22:05:14Z

1

Take a look at Working example.

HTML :

<form action="cart.php" method="post" name="ordering" id="ordering">
     <button type="submit" class="add-to-cart" alt='Add this product to your shopping cart now.'>Add to Cart <span class="fa fa-cart-plus"></span></button>
</form>

JS :

$( "#ordering" ).submit(function( event ) {
    if(jQuery.inArray('', checkEmpty) !== -1){
         alert('Please Do not leave any input fields empty.');
         event.preventDefault();
    }else{
         alert('submiting');
    }
});

You're using JQuery so you don't have to use inline onsubmit.

Hope this helps.

edited Aug 25, 2015 at 22:05

answered Aug 25, 2015 at 21:59

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Comments

Daniel A. White · Accepted Answer · 2015-08-25 21:44:03Z

0

You are executing addDesc at the time of binding it, so the return value of that function is used.

Try this

$('.add-to-cart').on('click', addDesc);

or

onsubmit="addDesc"

answered Aug 25, 2015 at 21:44

Daniel A. White

192k49 gold badges389 silver badges474 bronze badges

2 Comments

Andrew Over a year ago

I think just adding "return" before the call would work too.

Dora Over a year ago

form still submits and the alert didn't even alert too O.o

Sarayu Ravindran · Accepted Answer · 2018-11-07 07:14:09Z

0

change the button type as 'button" instead of 'submit'.And then you can call the function in the event of the button click.

answered Nov 7, 2018 at 7:14

Sarayu Ravindran

1

Collectives™ on Stack Overflow

stop form submitting in a function - jquery / javascript

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related