Jump to content

JS onsubmit next call a submit() NOT jQuery ONLY JavaScript


exceedinglife

Recommended Posts

Hello all,

I have a quick question that should actually be really simple but I haven’t been able to find it online through MANY searches. I have an HTML form and a submit button. In the form I have an ‘onsubmit()’ event which does validation. How do I call a submit function after I return my onsubmit value if true do ‘thissubmit()’

I currently have a onsubmit function()

If my function returns true then I call -  document.forms["formsignin"].submit();      return true;

That goes to my jQuery ‘$(myForm).on("submit", function () {}’

I want to do this in JavaScript ONLY and NOT with the $( myform).on() jQuery way.

<form id="fsignin" onsubmit="return validateit();">
...
<button type=”submit”>Sign in</button>
</form>
Function validateit() { do validation stuff if(….){document.forms["formsignin"].submit();      return true;
}
}
$(myForm).on("submit", function () {

    if (validateit()) {}
}

 

Link to comment
Share on other sites

Why do you want to call .submit() on the form?

The way a submit handler is supposed to work is you do your validation and if it fails you cancel the submit event.  Otherwise you allow the submit event to proceed and the browser will submit the form.

$(myForm).on("submit", function(e){
    if (!validateit()){
        e.preventDefault();
    }
});

function validateit(){
  //Do your validations
  //Return true or false
}

 

Link to comment
Share on other sites

 

$(myForm).on("submit", function(e){
    if (validateit()){
      //created message and displayed in a div
    } else {
         e.preventDefault();

    }
});

function validateit(){
  //Do your validations
  //Return true or false
  if true
  document.forms["formsignin"].submit();
}

not valid I display a message saying unsuccessful and I display why its not valid. I wanted to do this in only JavaScript and not using the jQuery selectors.

 

Is there a way I can call this in purely JavaScript and not jQuery $(myForm).on("submit", function(e){

Link to comment
Share on other sites

If you don't want to submit, return false from your validate function.

EG

<html>
<head>
<title>test</title>
<script type='text/javascript'>
 
   function checkData() {
       return document.getElementById('chck').value != ''
   }
    
</script>
</head>
<body>
<form onsubmit='return checkData()'>
    <input type='text' name='chck' id='chck' value=''>
    <input type='submit' name='btnSub' id='Submit'>
</form></body>
</html>

 

Link to comment
Share on other sites

The plain javascript way to attach event listeners is to use the addEventListener method.  Other than that it's the same.

document.forms["formsignin"].addEventListener('submit', function(e){
  if (!validateIt()){
    e.preventDefault();
  }
});

function validateIt(){
  //Do your validations
  return true; //or false
}

Do your validations and if your validation fails call e.preventDefault().

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.