We Keep Coding

jquery prevent box to close after submit a form

After setting up a simple box dialog form I would like to keep the box open after submitting the form, but the box keeps closing.
After a little search into the jquery docs I came with preventDefault method on the event. I added that to the code, but the box keeping closing.
Here is the code:
$(document).ready(function(e) {
$('#toggle').click(function(e) {
$('#box').toggleClass('max');
e.preventDefault();
});
$('#close').click(function(e) {
/* $('#box').remove();*/
});
});
It did not work, I've tried the stopPropagation() and that did not worked either.
someone can spare a hint, please?
the html:
<div id="box" class="min">
<span id ="toggle" class="fa fa-window-restore">
<b>Open Dialog</b>
</span>
<form action="/conversations/3/reply" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="✓" />
<input type="hidden" name="authenticity_token" value="VgKXI1p4MumSlvZF51pbXYKMMRLFKs0Us4NUB2+O7VZalzk++QDNQ5SsQMzvt4HlgUnlMa3ux54IDc3R/tGZhA==" />
<textarea name="body" id="body" cols="3" class="form-control" placeholder="Type something..." required="required"></textarea>
<button name="button" type="submit" class="btn_green">Send Message</button>
</form>
</div>

You need to call preventDefault() on the form's submit event in order to prevent the page from being replaced by the form submission.
document.querySelector('form').addEventListener('submit', e => e.preventDefault());

Change form's onsubmit function

I want to perform validation before any other onsubmit actions. Unfortunately, I have no control over the value of the onsubmit attribute on the form. So for example:
<form id="myForm" onsubmit="return stuffICantChange()"></form>
I've tried the following code, and several other methods, with no luck:
$("#myForm").onsubmit = function() {
console.log("hi");
}
Any help is appreciated, thanks.
If this is a duplicate, please let me know before marking it as such so that I can refute the claim if necessary.
EDIT:
My code as requested:
<form id="form_ContactUs1" name="form" method="post" action="index.php" onsubmit="return Validator1(this) && ajaxFormSubmit(this); return false">
<div class="form">
<div class="form-staticText">
<p>We look forward to hearing from you! Please fill out the form below and we will get back with you as soon as possible.</p>
</div>
<div class="form-group">
<input class="form-control" placeholder="Name" id="IDFormField1_Name_0" name="formField_Name" value="" size="25" required="" type="text">
<span class="form-control-feedback"></span>
</div>
<div class="form-group">
<input class="form-control" placeholder="Email" id="IDFormField1_Email_0" name="formField_Email" value="" size="25" required="" type="email">
<span class="form-control-feedback"></span>
</div>
<div class="form-group">
<input class="form-control bfh-phone" data-format="ddd ddd-dddd" placeholder="Phone" id="IDFormField1_Phone_0" name="formField_Phone" value="" size="25" type="tel">
<span class="form-control-feedback"></span>
</div>
<div class="form-group">
<textarea class="form-control" placeholder="Comments" name="formField_Comments" id="IDFormField1_Comments_0" cols="60" rows="5" required=""></textarea>
<span class="form-control-feedback"></span>
</div>
<div class="row submit-section">
<input name="submit" class="btn btn-success submit-button" value="Submit" type="submit">
</div>
</div>
$( "form" ).each(function() {
console.log( $(this)[0] );
sCurrentOnSubmit = $(this)[0].onsubmit;
$(this)[0].onsubmit = null;
console.log( $(this)[0] );
$( this )[0].onsubmit( function() {
console.log( 'test' );
});
});

You should be able to add unobtrusively another onsubmit function to #myForm, in addition to the function which already executes:
function myFunction() {
...
}
var myForm = document.getElementById('myForm');
myForm.addEventListener('submit',myFunction,false);

Try
$("#myForm").submit(function(){
.. Your stuff..
console.log("submit");
return false;
});
This will trigger everytime the form is submitted then the end return false stops the forms default actions from continuing.

Try this, it is plain Javascript:
function overrideFunction(){
console.log('Overrided!');
}
var form;
form = document.querySelector('#myForm');
form.setAttribute('onsubmit','overrideFunction()');
Regards.

You should trigger a change event on every field in the form to check on validation.
$('input').on('change', function(e) {
if($(this).val() == '') {
console.log('empty');
}
});
This wil help the user mutch faster then waiting for the submit.
You could also try a click event before the submit.
$('#formsubmitbutton').on('click', function(e) {
//your before submit logic
$('#form').trigger('customSubmit');
});
$('#form').on('customSubmit', function(e) {
//your normal submit
});

Try this code:
$("#myForm").on('submit',function() {
console.log("hi");
});

Stumbling across this post and putting together other javascript ways to modify html, I thought I would add this to the pile as what I consider a simpler solution that's more straight forward.
document.getElementById("yourFormID").setAttribute("onsubmit", "yourFunction('text','" + Variable + "');");
<form id="yourFormID" onsubmit="">
....
</form>

why this jquery functions not getting called

I have written very simple code, here is the html code:
<form name="signInForm">
<section id="signInSection">
<input class="large" type="text" placeholder="username" />
<br>
<input class="large" type="password" placeholder="password">
<br>
<button id="signinbtn" class="small">Sign In</button>
<br>
<label><input type="checkbox" />Remember me.</label>
Reset Password
<img src="../images/cancel.jpg" alt="Cancel Sign In">
</section>
</form>
And here is the jQuery:
$('#signinbtn').on('click', function () {
$('#signInSection').fadeOut(200);
$('#signedInSection').fadeIn(200);
$('.signUp').fadeOut(1);
$('.signIn').closest('header').find('input').fadeIn(200);
$('#memberToolBarSection').fadeIn(1500);
$('#contents').fadeIn(1500);
});
Whatever I write inside the above mentioned click handler, it is not working. Although I tested by putting an alert that the handler is getting invoked.
Can anyone please tell me why it is not invoking all the fadeIn and fadeOut function calls?

Try this...
$('#signinbtn').on('click', function (e) {
e.preventDefault();
$('#signInSection').fadeOut(200);
$('#signedInSection').fadeIn(200);
$('.signUp').fadeOut(1);
$('.signIn').closest('header').find('input').fadeIn(200);
$('#memberToolBarSection').fadeIn(1500);
$('#contents').fadeIn(1500);
});
It looks like the form is being submitted, which in this case just reloads the page.
Adding the e parameter to the event handler and adding e.preventDefault() will stop the form submitting.
Here's a working example

Is it not because the form is being submitted so you're being redirected? If that is the case, change your handler to the following:
$('#signinbtn').on('click', function (e) {
e.preventDefault();
$('#signInSection').fadeOut(200);
$('#signedInSection').fadeIn(200);
$('.signUp').fadeOut(1);
$('.signIn').closest('header').find('input').fadeIn(200);
$('#memberToolBarSection').fadeIn(1500);
$('#contents').fadeIn(1500);
});
The crucial line being
e.preventDefault();

Working DEMO
Try this
e.preventDefault(); prevent it from submitting the form after animations $("#signInForm").submit(); will submit the form where signInForm is the form id
html
<form name="signInForm" id="signInForm">
<section id="signInSection">
<input class="large" type="text" placeholder="username"/><br>
<input class="large" type="password" placeholder="password"><br>
<button id="signinbtn" class="small">Sign In</button><br>
<label><input type="checkbox"/>Remember me.</label>
Reset Password
<img src="../images/cancel.jpg" alt="Cancel Sign In">
</section>
</form>
code
$('#signinbtn').on('click', function (e) {
e.preventDefault();
$('#signInSection').fadeOut(200);
$('#signedInSection').fadeIn(200);
$('.signUp').fadeOut(1);
$('.signIn').closest('header').find('input').fadeIn(200);
$('#memberToolBarSection').fadeIn(1500);
$('#contents').fadeIn(1500);
$("#signInForm").submit();
});

Try This one
$('form').on('click', '#signinbtn', function () {
$('#signInSection').fadeOut(200);
$('#signedInSection').fadeIn(200);
$('.signUp').fadeOut(1);
$('.signIn').closest('header').find('input').fadeIn(200);
$('#memberToolBarSection').fadeIn(1500);
$('#contents').fadeIn(1500);
});

jQuery.validationEngine v2.6.1 Only Validates Sometimes?

The code appears to be hooked up (like this)
jQuery("#contactForm").validationEngine();
because it will validate and raise an error bubble if:
you tab out of required field without any input
you type at least one character into a field that requires more and then click the submit button
But it will not validate and raise an error bubble if you do nothing at all except click the submit button. In that case, it just submits. Once you click in the field or enter anything at all, it seems to work.
What can I be looking for that I've mis-configured?
The HTML:
<form class = "contactform" id = "contactForm">
<fieldset>
<div class="contactform-name contactform-field">
<label class="contactform-label" for="contactform-name">Name:
<br>
</label>
<input class="validate[required,minSize[8]] contactform-input" type="text" id="contactform-name" name="name" />
</div>
<div class="contactform-email contactform-field">
<label class="contactform-label" for="contactform-email">Email Address:<br></label>
<input value class="validate[required,custom[email]] contactform-input" type="email" id="contactform-email" name="contactform-email" />
</div>
<div class="contactform-text contactform-field">
<label class="contactform-label" for="contactform-text">Message:
<br>
</label>
<textarea class="validate[required,minSize[12]]contactform-input" name="text" id="contactform-text" > </textarea>
</div>
<input class="contactform-button" type="submit" name="submit" value="Send" />
</fieldset>
</form>
The JavaScript (it's running in Meteor):
Template.Contact.rendered = function () {
jQuery("#contactForm").validationEngine();
}

I've never used this engine, but from the docs I found that 'attach' will attach the validator to form.submit. Can it be as simple as that?
https://github.com/posabsolute/jQuery-Validation-Engine#attach
EDIT:
You can also do stuff to the submit-event (if the tip above won't help).
Something like this (not tested, but should put you in the correct path):
Template.templateName.events({
'submit': function(event) {
// Prevent the submit with preventDefault()
event.preventDefault();
// Do something to check the submit etc.
}
});

Stopping form submission with jQuery

I want to interrupt and prevent a form from submitting using jQuery. Here's my form markup:
<div id="register-box">
<div id="register-box-inner">
<h2>Register</h2>
<form action="/register" method="post" id="register-form">
<p><label for="username">Username:</label><input type="text" name="username"></p>
<p><label for="password">Password:</label><input type="password" name="password"></p>
<p><label for="email">E-mail:</label><input type="text" name="email"></p>
<p><input type="submit" value="Register" class="register"></p>
</form>
</div>
</div>
and my Javascript code thus far:
$('#register-form').submit(function(e){
e.preventDefault();
alert("hi");
});
Problem is, the form still goes through. I wanted to submit the form using AJAX but with a fallback for users who don't have Javascript enabled. No errors pop up in the Javascript console, either.

Try
$("form").live("submit", function() {
alert("hi");
return false;
});

Try returning false from the handler.
$('#register-form').submit(function(e){
e.preventDefault();
alert("hi");
return false;
});

Try:
<p><input type="submit" value="Register" class="register" onclick="submit(); return false;"></p>