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
Related
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>
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>
I have a form on page. I want to submit a form when user click on submit button which is outside of form tag. When I am using $('#theform').submit() then submit method work perfectly but when I am doing this document.getElementById('theform').submit() then it is only refreshing my page.
Fiddle
JavaScript
$(function() {
$('input[type="submit"]').click(function() {
//$('#theform').submit()
document.getElementById('theform').submit()
})
$('#theform').submit(function(e) {
alert(0)
e.preventDefault()
})
})
html
<form id="theform">
<input type="text" id="fname" />
<input type="text" id="lname" />
<input type="text" id="country" />
</form>
<input type="submit" />
The DOM submit() method does not trigger submit events where as jQuery's does.that is the reason your form in javascript document.getElementById('theform').submit() will submit the FORM.
you can see a post here :Jquery submit vs. javascript submit
use document.forms["theform"].submit();
and define action in your form
<form id="theform" action="submit-form.php">
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>
I have a website where we use Javascript to submit the login form. On Firefox it prompts the user to remember their password, when they login, but on IE7 it doesn't.
After doing some research it looks like the user is only prompted in IE7 when the form is submitted via a Submit control. I've created some sample html to prove this is the case.
<html>
<head>
<title>test autocomplete</title>
<script type="text/javascript">
function submitForm()
{
return document.forms[0].submit();
}
</script>
</head>
<body>
<form method="GET" action="test_autocomplete.html">
<input type="text" id="username" name="username">
<br>
<input type="password" id="password" name="password"/>
<br>
Submit
<br>
<input type="submit"/>
</form>
</body>
</html>
The href link doesn't get the prompt but the submit button will in IE7. Both work in Firefox.
I can't get the style of my site to look the same with a submit button, Does anyone know how to get the remember password prompt to show up when submitting via Javascript?
Why not try hooking the form submission this way?
<html>
<head>
<title>test autocomplete</title>
<script type="text/javascript">
function submitForm()
{
return true;
}
</script>
</head>
<body>
<form method="GET" action="test_autocomplete.html" onsubmit="return submitForm();">
<input type="text" id="username" name="username">
<br>
<input type="password" id="password" name="password"/>
<br>
Submit
<br>
<input id="FORMBUTTON" type="submit"/>
</form>
</body>
</html>
That way your function will be called whether the link is clicked or the submit button is pushed (or the enter key is pressed) and you can cancel the submission by returning false. This may affect the way IE7 interprets the form's submission.
Edit: I would recommend always hooking form submission this way rather than calling submit() on the form object. If you call submit() then it will not trigger the form object's onsubmit.
Did you try putting in url in the href and attaching a click event handler to submit the form and returning false from the click handler so that the url does not get navigates to.
Alternatively hidden submit button triggered via javascript?
You could try using the HTML <button> tag instead of a link or a submit button.
For example,
<button type="submit">Submit</button>
The <button> tag is much easier to style than the standard <input type="submit">. There are some cross-browser quirks but they are not insurmountable.
A really great article about the use of <button> can be found at particletree: Rediscovering the button element