CODEWITHSUNDEEP
jquery
Osman
Osman

Reputation: 1771

preventDefault() submitting form

I am fairly new to jQuery and JavaScript in general.

I have a form, and what I want to do it have the form run a function to make sure everything is there, and all the variables are correct then submit.

I have used onclick value to the submit button and have it run a function that uses preventDefault(). I am not sure if im using it correctly but it doesn't seem to be working.

This is what I have and when you click submit, it just submits even if the if statement is false.

function checkSubmitStatus() {
    $("#myform").submit(function(event){
        if( whatever==true) {
            event.preventDefault(); 
        }
    });
}

<input type="submit" name="submit" value="Submit"  onClick="checkSubmitStatus()">

Thanks!

Upvotes: 9

Views: 54729

Answers (6)

Taner
Taner

Reputation: 1

let button = document.getElementById('submit');
button.addEventListener('click', function(event) {
    event.preventDefault();
    this.innerHTML = "Button clicked!";

});

Upvotes: -1

Blazemonger
Blazemonger

Reputation: 92893

By putting $("#myform").submit(...) inside the checkSubmitStatus() function, you're attaching the submit handler after the button is clicked and the form is already submitted. Try this:

<script type="text/javascript">
$(document).ready(function() {
  $("#myform").submit(function(event){
    if(whatever) { 
       event.preventDefault();  
    }  
  });
});
</script>

<form id="myform">
  <input type="submit" name="submit" value="Submit">
</form>

Upvotes: 18

PeeHaa
PeeHaa

Reputation: 72652

You can just drop the checkSubmitStatus() function.

$("#myform").submit(function(event){
  if(whatever == true) {
    event.preventDefault(); 
  }
});

Also drop this:

onClick="checkSubmitStatus()"

Upvotes: 3

genesis
genesis

Reputation: 50966

Change 

<input type="submit" name="submit" value="Submit"  onClick="checkSubmitStatus()">

to

<input type="submit" name="submit" value="Submit" >

and change your javascript to 

$("#myform").submit(function(event){
    if( whatever==true)
    {
        event.preventDefault(); 
    }
});

Upvotes: 9

JamesHalsall
JamesHalsall

Reputation: 13475

I would refactor this slightly...

function checkSubmitStatus() {
    if( whatever==true) {
          return false;
    }
    return true;
}

<input type="submit" name="submit" value="Submit"  onClick="return checkSubmitStatus()">

Upvotes: 1

Kiley Naro
Kiley Naro

Reputation: 1769

In the onclick event handler, if you return false the form will not submit. Try doing this:

function checkSubmitStatus() {
   if(validationSuccess==true)
   {
      return true;
   }
   else
   {
      return false;
   }
}

<input type="submit" name="submit" value="Submit"  onClick="return checkSubmitStatus()">

Upvotes: 3

Related Questions