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'
Related
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.
<form ... onsubmit="return false">
<input type="text" name="location" ...>
<input type="url" ... required>
...
</form>
Now, if I enter a location and hit ENTER, the browser tells me that an URL is required which is not an expected or desired outcome. The ENTER should just be ignored.
Question
How can I prevent the browser from checking the required field after hitting ENTER in the "location" input field and only let the browser check the "url" field when submitting the form with JavaScript using form.submit()?
You need to stop the default behavior of enter button for your form elements.
Lets have an example:
HTML5 form as
<form id="form">
<input type="text" name="test1" id="test1" required/>
<input type="text" name="test2" id="test2" required/>
<input type="submit" value="Test"/>
</form>
Then apply below code
$(document).ready(function() {
$(form).find('input').on('keydown', function(e){
if(e.which == 13) // KEY.ENTER = 13
e.preventDefault();
});
});
Based on above scenario, here is the fiddle.
This is what I did now and what worked (using jQuery, where $form represents the ):
$form.find('input').on('keydown', function(e){
if(e.which == KEY.ENTER) // KEY.ENTER = 13
e.preventDefault();
});
You can use the novalidate attribute in your form element:
<form method="post" action="..." novalidate>...</form>
There is a specific method for handle a "submit".
Here's here!
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.
I have a typical form:
<form action="" accept-charset="utf-8" method="post">
<textarea name="content"></textarea>
</form>
and an not-inside-a-form element:
<input type="password" name="password">
How do I add the value of password into the form when I submit the form?
$('form').submit(function(){
//hmmm
});
Create a hidden field in the form and copy the password field value to that field on submit.
Like this.
<form action="" accept-charset="utf-8" method="post">
<textarea name="content"></textarea>
<input type="hidden" name="password" id="ps">
</form>
<input type="password" name="password" id="ps1">
And in on submit function.
$('form').submit(function(){
$('input#ps').val($('input#ps1').val());
return true;
});
The not-yet-supported-but-HTML5-compliant way to do this "correctly" is to give your <input> element a [form] attribute:
<form id="foo">
...stuff...
</form>
<input type="password" id="bar" form="foo" />
Eventually you may be able to use this as a solution, but until more browsers support the [form] attribute, you'll have to polyfill it with JavaScript.
$('form').submit(function(){
var password = $('input[type="password"]');
password.appendTo($(this));
//or $(this).append(password);
});
include a hidden input element inside of the form,
on the outer input's change event, assign the inner input the outer inputs value.
<form action="" accept-charset="utf-8" method="post">
<textarea name="content"></textarea>
<input type="hidden" id="inner" />
</form>
<input type="password" name="password" >
<script type="text/javascript">
$(function(){
$('#outer').change(function(){
$('#inner').val($(this).val());
});
});
</script>
Use hidden input field inside form like this:
ex : <input type="hidden" name="pass">
When you submit the form like this :
$('form').submit(function(){
<!-- Save the value of password into the hidden field
Note : Password here should just be one field in that page -->
$('input[name="pass"]').val($('input[type="password"]').val());
return true;
});