We Keep Coding

How to prevent function call on submit form if required fields are not filled out?

I have form with required inputs, it actually sees empty field and shows message, but it calls function from submit button
<form action="">
<input required id="1" type="text">
<button type="submit" onclick="calculate()">Calculate</button>
</form>

An onclick listener will run whenever the button is clicked, no matter what.
You want the function to run only when the form starts to be submitted, so attach a submit listener to the form instead:
<form action="" onsubmit="calculate()">
<input required id="1" type="text">
<button type="submit">Calculate</button>
</form>
const calculate = (e) => {
console.log('calculating');
}
<form action="" onsubmit="calculate()">
<input required id="1" type="text">
<button type="submit">Calculate</button>
</form>
If at all possible, it would be much better to attach the event listener properly using Javascript instead of an inline HTML attribute:
document.querySelector('form').addEventListener('submit', calculate);
const calculate = (e) => {
e.preventDefault();
console.log('calculating');
};
document.querySelector('form').addEventListener('submit', calculate);
<form action="">
<input required id="1" type="text">
<button type="submit">Calculate</button>
</form>

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>

preventDefault() not working after editing html

I have the following HTML:
<div class="artikelen">
<div>
<div>
<img src="http://mijnmanege.nl/img/artikelen/1.png" alt="Article" />
</div>
<strong>Article</strong>
<span>{artikel_groep} (<span data-artikel-groep-id="1">1</span>)</span>
<img src="/img/v3/main/icons/geld.png" alt="Price" /> 999
<form method="post">
<input type="number" value="1" name="aantal" max="99" min="1" required="required" data-artikel-id="1" data-artikel-groep-id="1" />
<input type="submit" value="Buy" name="submit" />
</form>
</div>
</div>
And the following jQuery:
$(document).ready(function() {
$('.artikelen form').submit(function(e) {
alert('We are in!');
e.preventDefault();
});
});
When I press the submit I get the "We are in" alert and the form gets prevented from being submitted. However when I use $('.artikelen').html(code...); to add exactly the same html code to the class artikelen (without the first and the last ofcourse), it still gets submitted and doesn't even trigger the error.
The console doens't give any errors whatsoever.
Thanks in advance.
And sorry for any bad English, I'm not a native.

you are repacing the form so the event binding is gone, you could use delegate to solve that:
$(document).ready(function() {
$(document).on('submit', '.artikelen form', function(e) {
alert('We are in!');
e.preventDefault();
});
});

How to stop form from resetting on submit

I have a simple form that triggers an ajax call but as soon as the submit button is clicked the form resets and clears all entries. Do you know how to prevent this? I'd like to have control over when the form gets cleared.The code is below. I suspect I need to abandon the submit function and detect the "click" event on a button.
JQuery
$("#Formid").submit(function(){loadAjax();});
HTML
<form id="Formid" method="put">
Name<BR/>
<input type="text" name="name"/><BR/><BR/>
Node Id<BR/>
<input type="text" name="node_id"/><BR/><BR/>
Type<BR/>
<input type="text" name="type"/><BR/><BR/>
Parent<BR/>
<input type="text" name="parent_id"/><BR/><BR/>
Longitude<BR/>
<input type="text" name="longitude"/><BR/><BR/>
Latitude<BR/>
<input type="text" name="latitude"/><BR/><BR/>
Description<BR/>
<textarea name="description" rows="5" cols="40">Insert description here</textarea><BR/><BR/>
<input type="submit" value="Add Node"/>
</form>

You can use preventDefault method of the event object.
$("#Formid").submit(function(event){
loadAjax();
event.preventDefault()
})

Alternatively, you could use event.returnValue = false;
$("#Formid").submit( function(e) {
loadAjax();
e.returnValue = false;
});
This works similarly to "return false;", except it will not exit the function.

You can use e.preventDefault() or return false; within a jQuery event handler:
$("#Formid").submit(function (e) {
loadAjax();
e.preventDefault(); // or return false;
});
e.preventDefault() will prevent the default event from occuring,
e.stopPropagation() will prevent the event from bubbling up and return
false will do both.

I have prevented form clearing for search form for my website mrnams.com
View
#using (#Html.BeginForm("Search", "Home", FormMethod.Post, new { #class = "navbar-form navbar-right pull-right" }))
{
<div class="input-group">
<input id="input-searchQuery" type="text" class="form-control" placeholder="Search this site" name="q">
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
}
jQuery functions in View
#section scripts{
<script type="text/javascript">
$(function () {
var queryReturned = '#ViewBag.SearchQuery';
$("#input-searchQuery").val(queryReturned);
});
</script>
}
And here is the controller.
public class Home : Controller
{
public ActionResult Search(string q)
{
ViewBag.SearchQuery = q;
}
}
For demo visit https://mrnams.com/

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>