I am stuck in the same problem which has been raised here:
Stop a HTML5 form posting, refreshing or opening a new window onSubmit
I currently use
event.preventDefault();
// to avoid refreshing of form
Sample code what i am trying is below :
my html page contains below snippet of code:
<form id="sampForm">
First name: <input type="text" name="fname" required><br>
Age: <input type="number" required><br>
<input type="submit" onclick="OnSub(event)">
</form>
my js code below :
OnSub= function (_event) {
try {
_event.preventDefault();
//do my process logic below or run any code here
} catch (e) {
}
};
But this causes the form validations to stop working .
Thanks in advance for any help in here
the form has an "onsubmit" event. Bind your function to that.
<form id="sampForm" onsubmit="OnSub(event)">
First name: <input type="text" name="fname" required><br>
Age: <input type="number" required><br>
<input type="submit">
</form>
I feel you are using a method on form submit to validate elements
So In the end of your method just add
return false;
This will stop form submission.
Related
i have created form with basic verification in html like this.
<form class="" action="submit/save" method="POST" enctype="multipart/form-data" id="submit_form">
<input class="form-control" name="name" id="name" required>
</form>
<a onclick="submitProduct()">Submit</a>
function submitProduct() {
$('#choice_form').submit();
}
then after click the <a> tag i have submit form as the
$('#submit_form').submit();
but required validations not sporting when submitting
Your code won't submit anything at all, because it's using the wrong ID to identify the form. But assuming that was just a typo then...
Instead of using an anchor tag, just use a regular submit button, then you won't need any script:
<form class="" action="submit/save" method="POST" enctype="multipart/form-data" id="submit_form">
<input type="text" class="form-control" name="name" id="name" required>
</form>
<input type="submit" form="submit_form">Submit</input>
i have entered this jQuery code,
$(document).ready(function(){
$('#submit_form').submit(function(e){
if($(this).closest('form')[0].checkValidity()){
if(submitProduct() == 1 ){
return true;
}else {
return false;
}
}
});
});
submitProduct() is a my another custom function if that function done i have submitted form, if not done then form submission action killed.
$(document).ready(function(){ });
it's helped me to use form validations also like 'required'
This is a noob question. What I'd like to do is set up a birthday party reservation website that has people fill out a form: yes/ no will attend, name, email. After the form is filled out for 'will attend' I'd like to have a popup modal that has the option to 'add to your calendar: Google, iCal, etc.'
Is this possible in an html form (javascript/ ajax)? I know it can be done in WordPress.
Thank you for any help/ suggestions.
Here is a very basic idea of what you could do. I put the form in the console using the answer here: https://stackoverflow.com/a/47188324/12946266 you will need to use php to operate on this form most likely, but I can't use that here.
const form = document.querySelector('form');
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault();
var values = Object.values(form).reduce((obj, field) => {
if(field.type=='radio'){
obj[field.name] = field.checked;
}else{
obj[field.name] = field.value;
}
return obj
}, {})
console.log(values);
});
<form id="myForm" action="/action_page.php">
First name: <input type="text" name="fname" value=""><br> Last name: <input type="text" name="lname" value=""><br> email: <input type="text" name="email" value=""><br>
<input type="radio" id="attending" name="attendance" value="attending">
<label for="attending">attending</label>
<br>
<input type="submit" value="Submit"><br>
</form>
This question already has an answer here:
Onsubmit function called submit
(1 answer)
Closed 4 years ago.
Why can you still submit a form even though the function returns false?
function submit() {
return false;
}
<form action="#" onsubmit="return submit()">
account : <input name="name" type="text" id="name"> <br>
<input type="submit" value="login">
</form>
I believe your function name conflicts with the native submit action.
I've renamed it below.
function submitter() {
return false;
}
<form action="#" onsubmit="return submitter()">
account : <input name="name" type="text" id="name"> <br>
<input type="submit" value="login">
</form>
Also see Reserved words in JavaScript.
preventDefault() work great to prevent default action like clics or submits..
$('form').submit((ev) => {
ev.preventDefault();
})
I think you should use a unique identifier on the form and use it to add an event listener in your javascript as below.
Also use event.preventDefault() to stop the default form submission action which works as in the code below. Hope this solves your problem :-)
document.querySelector("#my-form").addEventListener("submit", function(e){
e.preventDefault(); //stop form from submitting
});
<form action="#" id="my-form" method="post">
account : <input name="name" type="text" id="name"> <br>
<input type="submit" value="login">
</form>
I'm working on a webpage where the user has to fill up the required fields.
I have this sample form:
<form action="mypage.php">
First name:<br>
<input type="text" name="firstname" required>
<br>
Last name:<br>
<input type="text" name="lastname" required>
<br><br>
<input type="submit" value="Submit">
</form>
The validation works for the required fields. If fields are not blank, the form can be submitted succesffully. While if blank, fields are highlighted and the user can't submit the form.
Now, I added a spinner on button's click event using javascript:
<script type="text/javascript">
$(function () {
$("#Update").click(function () {
$("#loading").fadeIn();
});
});
</script>
The spinner shows and works fine once the button is clicked. But the problem is it shows regardless if the form was submitted or not. It shows even if the fields are blank and since the form wasn't submitted and no function to run, the spinner just keeps spinning.
How can I show the spinner only after the fields validation?
Please help. Thank you in advance.
Try to use this instead of .click()
$(document).ready(function(){
$('form').on("submit",function(){
console.log("Loading...");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="mypage.php">
First name:<br>
<input type="text" name="firstname" required>
<br>
Last name:<br>
<input type="text" name="lastname" required>
<br><br>
<input type="submit" value="Submit">
</form>
If you want the loader spinner after the default form validations are done, then I suggest to do that in form submit event.
<form action="mypage.php" id="updateForm">
First name:<br>
<input type="text" name="firstname" required>
<br>
Last name:<br>
<input type="text" name="lastname" required>
<br><br>
<input type="submit" value="Submit" id="Update">
</form>
<script type="text/javascript">
$(function () {
$("#updateForm").submit(function () {
$("#loading").fadeIn();
});
});
</script>
Make sure your submission button has update as ID. Then, it will work.
In JavaScript you must have to give Id or function to submit button then call this id in javascript function.
Invoking JavaScript function on form submission:
In our example, we call ValidationEvent() function on form submission.
That will first validate the form fields and will return a boolean value either true or false. Depending upon the returned value the form will submit if it will be true.
JavaScript Function:
// Below Function Executes On Form Submit
function ValidationEvent() {
......
return true; // Returns Value
}
if your page only one form and use jquery, you can follow this code:
<form action="mypage.php" id="updateForm">
First name:<br>
<input type="text" name="firstname" required>
<br>
Last name:<br>
<input type="text" name="lastname" required>
<br><br>
<input type="submit1" value="Submit" id="Update">
</form>
<script type="text/javascript">
$(function () {
$(":submit1").click(function () {
// your page should have a spinner dom with id loading
// but I think you should not hide loading here because your page with auto reloads after submit, only your page cannot pass form.checkValidity, you need to hide loading element
var flag = $("input[name='firstname']").checkValidity() && $("input[name='firstname']").checkValidity()
if (flag) $("#loading").fadeIn();
this.submit();
});
});
</script>
why your code not works:
yours submit button without id, so you can not listen to the click event. your code will never work.
I'm trying to make a login page and have the following:
<div id="loginField">
<input id="username" type="text" name="user" required></input>
<input id="password" type="password" name="password" required></input>
<input id="submit" type="submit" name="submit" value="Login"></input>
</div>
I made sure that the username and password fields are required. When the login is successful (for this sake, let's just say that both fields are not empty) a login disappears and another view appears. Anyway, I checked to see if the login button is pressed with JQuery:
$(function(){
$('#submit').on('click', function(){
$('#loginField').hide();
$('#differentView').show();});
The problem is that when the login button is clicked, the required attributes gets ignore and the next view is shown. How do I make sure that the required attributes are not ignored when the login button is clicked?
A crude way of doing it...
<div id="loginField">
<input id="username" type="text" name="user" class="required">
<input id="password" type="password" name="password" class="required">
<input id="submit" type="submit" name="submit" value="Login">
</div>
$('#submit').on('click', function(e){
e.preventDefault();
var isReady = true;
$('.required').each(function(){
if (this.value === '') {
isReady = false;
return;
};
});
if (isReady) {
// submit form
};
});
You can use this library: Parsley. It is a javascript form validation library and it is very easy to use and you can customize it for your own means. Good luck!
Instead of handling onclick on button, you can put input fields into the form...
<form action="post" method="post" id="loginField">
<input id="username" type="text" name="user" required></input>
<input id="password" type="password" name="password" required></input>
<input id="submit" type="submit" name="submit" value="Login"></input>
</form>
... and in jQuery you can handle on submit action like this:
$(document).ready(function(){
$('#loginField').on('submit', function(event){
event.preventDefault();
var [username password] = $(this).serializeArray(),
username = username.value,
password = password.value;
/* some validations */
});
});
event.PreventDefault prevents browser from subbmiting so your page won't be refresh. serializeArray returns an array of objects (key-value) that's why you have to use .value
The required attributes are ignored because the input elements are not inside an html form element
To use the HTML5 input valuation attributes (required, minlength... etc)
The inputs should be grouped inside a form element, and you can listen for the form submit event, that is triggered by default when the user press enter (while focus is on a field inside the form) or clicks the submit button (input or button with type="submit") that is also wrapped inside the form
HTML
<form id="loginForm">
<input id="username" type="text" name="user" required />
<input id="password" type="password" name="password" required />
<input id="submit" type="submit" name="submit" value="Login" />
</form>
Javascript
$(function(){
$('#loginForm').on('submit', function (event) {
event.preventDefault(); // prevent default form submit page reload
console.log('I will enter this handler only on valid form')
$('#loginForm').hide();
$('#differentView').show();
})();
Here is a basic plunker with 2 examples https://plnkr.co/edit/I0vUMSeOlrjlYYu4VofU?p=preview
using the default html5 validation
using Parsley