Develop Reference

submit() method does not work when call in input file changed [duplicate]

I have a form like below:
<form action="/action_page.php" onsubmit="alert('The form was submitted');" >
Enter name: <input type="text" name="fname">
<input type="button" onclick="document.getElementsByTagName('form')[0].submit()" value="Submit">
</form>
Though I clicked the button and indeed it submitted the form, but the alert box wasn't shown. That is, the submit() method submitted the form but without triggering the onsubmit event. What happened? And how should I use submit() method to trigger the onsubmit event?

Well, the documentation for the submit method is pretty clear that it doesn't trigger onsubmit.
Since any of the following form elements cause a form submit:
<input type='submit'>
<input type='button'>
<button>
You likely don't need an onclick handler on that button at all

it seems that you can't, please check this post - https://stackoverflow.com/a/19847255/8449863
however, please try workaround with hidden submit button:
<form action="/action_page.php" onsubmit="alert('The form was submitted');" >
Enter name: <input type="text" name="fname">
<input type="button" value="Submit" onclick="document.getElementById('submit').click();" >
<input id="submit" type="submit" style="display: none;" />
</form>

React how to trigger form submit on input blur?

I'm trying to make use of the HTML5 <input type="email" /> validation check.
I can get it working fine doing this:
<form>
<input type="email" />
<input type="submit" />
</form>
This gets the validation to work on clicking the sumbit button. However I'd like to trigger the form to submit upon having my email field blur.
How do I trigger the form without a submit button onBlur?
Like this:
<form>
<input type="email" onBlur={/* trigger form submission */} />
</form>
Alternatively, is there a better approach to performaning the HTML5 email validation check upon input blur?

Put a ref attribute on your form and call the submit function:
<form ref="myForm">
<input type="email" onBlur={this.submitForm.bind(this)} />
</form>
Add a function:
submitForm(){
this.refs['myForm'].submit()
}

use the native checkValidity method
<form>
<input type="email" id="a" />
</form>
const a = document.querySelector('#a')
a.addEventListener('blur', e => {
const isValid = e.target.checkValidity()
console.log(isValid)
})

Form implementation

i have one form with some input text with the name = "user_name" , "mob" , "email" and inside this form i have a link for example Plans and end with submit button. Now if user click the link then i want to have all the values of the input text of the same form send to another page to pks.php and if the user click on the submit button then it will work on action confirm.php. For example Check this code
<form action="confirm.php" method ="post">
<input type ="text" name="user_name">
<input type="number" name="mob">
<input type="text" name="email">
PLANS
<input type="submit">
</form>
Can you help me out?? How can i achieve this. Thanks in advance

The simplest way is to change the link to a second submit button. You can then use the formaction attribute to change the URL the form submits to when you use this button.
<form action="confirm.php" method ="post">
<input type ="text" name="user_name">
<input type="number" name="mob">
<input type="text" name="email">
<input type="submit" formaction="pks.php" value="PLANS">
<input type="submit">
</form>
If you can't do that, you need to run Javascript when they click on the link. You can have this code change the action of the form, and then submit it.
document.getElementById('plans').addEventListener('click', function(e) {
e.preventDefault();
var form = document.getElementById('myform');
form.action = this.href;
form.submit();
});
<form id="myform" action="confirm.php" method="post">
<input type="text" name="user_name">
<input type="number" name="mob">
<input type="text" name="email">
<a id="plans" href="pks.php">PLANS</a>
<input type="submit">
</form>

You will probably want to use JavaScript to control the form if you want the action attribute to change. By default, submitting the form will cause it to post to confirm.php.
Using JQuery you can do this:
$('form').on('submit', function(e) {
// Stop the form from submitting
e.preventDefault();
// Do logic to determine what action you should do
var myAction = 'pks.php';
// assign the action to the form
$(this).attr('action', myAction);
// submit the form
$(this).submit();
});
I haven't run this script so it may not work out of the box but you should be able to adapt and fix it without too much difficulty.

Form Submit Button Do not work

I have a form with a submit button. Unfortunately my javascript function does not work. Where is my mistake? It works by pressing enter but not by clicking on the submit button
<div id="form" class="contact-us-form">
<form id="myform" target="_self" onsubmit="" action="javascript: postContactToGoogle()">
<div>
<input spellcheck="false" autocomplete="off" id="email" type="text" name="email" value="deine eMail" onfocus="this.value=''" onblur="this.value='deine eMail'">
</div>
<br>
<div>
<button onclick="submits()" id="send" type="submit">EINTRAGEN</button>
</div>
</form>
<script type="text/javascript">
function submits() {
document.getElementById("myform").submit();
}
</script>
</div>

What you're doing is strange. You are trying to do the submission very "manually". The submit button (i.e. the type="submit" part) is already going to submit this form, so there is no need for your function submits().
Afterwards, in javascript, simply refer to your form's submit event. You can get the form by id like your doing already.

Add 'name' attribute in your form
<form id="myform" name="myform">
<!-- Form content -->
</form>
change your script function
<script type="text/javascript">
function submits() {
document.myform.submit();
}
</script>

I found the mistake by myself:
onblur="this.value='deine eMail'"
Do not use onblur in your submit button. It will kill the submit function and it will not work

i want to check form validation by input type button, not by submit, could any one help in this?

i want to only validate the form and don't want to submit it, so that i can use the form values in modifying other part of the same html page by calling a function "myfunction()" after form validation. for this i want to use a button suggest me required code.my code is following :-
<form name="form1">
<input type="text" name="name1" required></input>
<button onclick="myfunction()" ></button> // i want to validation of form by this button
</form>

You can try this by setting onsubmit event of form to return false; as follows:
<form name="form1" onsubmit="return false;">
<input type="text" name="name1" required></input>
<button onclick="myfunction();" ></button>
</form>
This will not submit the form on clicking the button but will execute myfunction() instead.
If you know jQuery, then you can do this as follows:
$('form[name="form1"]').submit(function (event) {
// This will prevent form being submitted.
event.preventDefault();
// Call your function.
myfunction();
});

For maintainability consider adding an event listener to the button by selection instead of inline. When the button is clicked an event object is passed to the callback. Event objects have a number of properties and methods. In this case you're looking for the method "preventDefault" which prevents the default action of the event which in this case is a form submit. An example:
<form name="form1">
<input type="text" name="name1" required />
<button id="my-button"></button>
</form>
document.getElementById('my-button').addEventListener('click', function(e){
e.preventDefault();
var form = document.forms['form1']; //or this.parentNode
//do stuff
}, false);

i have achived this goal by modifying code as follow:-
<form name="form1" onsubmit="myfunction();return false;">
<input type="text" name="name1" required></input>
<button >check form and call function</button>
</form>
by this i am able to check form and call my function and form is also not submitted in this case.
now i want to reset the form without clicking any button. suggest javascript code for this.

HTML form validation by input type button, not by submit.
Try this
<form name="form1" onsubmit="myfunction(); return false;">
<input type="text" name="name1" required></input>
<button type="submit">Submit</button>
</form>