So can someone please tell why neither of these options will actually submit the form? I am trying to do something more complicated but I have boiled it down to this to try and figure out why I can't seem to get this form to submit using a click event and submit()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#submitButton').click(function(e) {
e.preventDefault();
$("#testForm").submit();
});
$('#submitLink').click(function(e) {
e.preventDefault();
$("#testForm").submit();
});
});
</script>
</head>
<body>
<form action="javascript:alert('submitted');" method="post" id="testForm">
<label>Name</label>
<input type="text" name="name" value="" />
<input type="submit" name="submit" value="Submit" id="submitButton" />
<p>Submit Form</p>
</form>
</body>
</html>
Thank you!
it's because the name of the submit button is named "submit", change it to anything but "submit", try "submitme" and retry it. It should then work.
Why not simply use the submit button to run the code you want. If your function returns false, it will cancel the submission.
$("#testForm").submit(function() {
/* Do Something */
return false;
});
If you have a form action and an input type="submit" inside form tags, it's going to submit the old fashioned way and basically refresh the page. When doing AJAX type transactions this isn't the desired effect you are after.
Remove the action. Or remove the form altogether, though in cases it does come in handy to serialize to cut your workload. If the form tags remain, move the button outside the form tags, or alternatively make it a link with an onclick or click handler as opposed to an input button. Jquery UI Buttons works great in this case because you can mimic an input button with an a tag element.
Using jQuery button click
$('#button_id').on('click',function(){
$('#form_id').submit();
});
Do you need to post the the form to an URL or do you only need to detect the submit-event? Because you can detect the submit-event by adding onsubmit="javascript:alert('I do also submit');"
<form action="javascript:alert('submitted');" method="post" id="testForm" onsubmit="javascript:alert('I do also submit');">...</form>
Not sure that this is what you are looking for though.
Related
This question already has answers here:
How is the default submit button on an HTML form determined?
(15 answers)
Closed 1 year ago.
I'm currently trying to make a program in which you enter a link into an HTML form and when you click a button it sends you to that link. However, when I click the button the page just clears the form. I'm a Python native and a newbie to HTML/JS so the way I'm structuring my code may be why:
<form>
<input type="url" id="link" placeholder="Enter link of website:" required>
<br>
<button class="outline" id="open">Create gate</button>
</form>
<script type="text/javascript">
document.getElementById("open").onclick = () =>
location.assign(String(document.getElementById("link").value));
</script> </form>
Since, you are using a form. Your Button
<button class="outline" id="open">Create gate</button>
is acting as the form submit button and hence it refreshes the page before executing the location.assign() method. There are many ways to fix this.
One simple way is to exclusively tell the browser that this button is not the submit button, we can do that by using type="button" attribute in our button.
Create gate
You can use e.preventDefault() on your form submit to stop refreshing of the page.
Try the below code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Location Object</title>
</head>
<body>
<form>
<input type="url" id="link" placeholder="Enter link of website:" required>
<br>
<button class="outline" id="open">Create gate</button>
</form>
<script type="text/javascript">
document.getElementById("open").addEventListener('click', (e) => {
e.preventDefault();
location.assign(String(document.getElementById("link").value));
});
</script>
</form>
</body>
</html>
Your code, exactly as provided, pasted into a minimal HTML5 boilerplate template, works in the Textastic code editor and in Safari running on localhost.
Perhaps some other JavaScript in the vicinity of your event listener is breaking the arrow function. Maybe bracketing the one function statement could help?
Firefox stops displaying the default constraint-violation message of the form if the user clicks multiple time (seems 3) on the input elements or on the submit button.
For example the following input field is marked as required: if I leave it empty and click the submit button once, firefox correctly displays the error message. If I click the button or the input field two more times, firefox stops showing the message and starts just focusing on the field that makes the validity check fail. As an additional problem, the browser will no longer show the error message until the page is reloaded. I tried Firefox 91.0.2 and 92.0 (just downloaded, latest version).
The behaviour I want is the one of Chrome, IE and Safari: if i click the button and the validity check fails, then the error message is shown no matters how many time i click. Is there any way to force this behaviour in FF?
Ps: the submit button is actually of type button, not submit. I need it to be a button but I tried also with type=submit and the behaviour did not change.
function mySubmit(formId){
let form = document.getElementById(formId);
if(form.reportValidity()) {
window.alert("submit");
form.reset();
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="myForm">
<input type="text" required name="name" autocomplete="off">
<button onclick="mySubmit('myForm')" type="button" class="submitButton" lang="en">Submit</button>
</form>
</body>
</html>
You code seams kind of complicated. If you have to perform some JS code on submit of the form I will suggest an event listener like this:
document.forms.myForm.addEventListener('submit', e => {
alert('submit');
e.target.reset();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="myForm">
<input type="text" required name="name" autocomplete="off">
<button class="submitButton" lang="en">Submit</button>
</form>
</body>
</html>
If you need to stop the submit action and/or listen for the invalid event on the input element (and display your own message to the user).
document.forms.myForm.addEventListener('submit', e => {
e.preventDefault();
alert('submit');
e.target.reset();
});
document.forms.myForm.name.addEventListener('invalid', e => {
e.preventDefault();
alert('invalid');
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="myForm">
<input type="text" required name="name" autocomplete="off">
<button class="submitButton" lang="en">Submit</button>
</form>
</body>
</html>
Hello I came across a weird behavior with an onclick attribute regarding form submission.
Page on Server:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en-us" >
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Return Form Example</title>
<script type="text/javascript">
function doSomething(){
alert("hey");
return false;
}
</script>
</head>
<body>
<form action="submit.php" method="post">
<input type="submit" onclick="return doSomething()" value="click me!">
</form>
</body>
</html>
In this example, running on my server, when I click the submit button I get an alert saying hey and I stay on the current page. However, I tried to set this same example up on jsfiddle and I get an 404 error meaning the form was submitted. I cannot figure out why this occurs.
Here is the jsfiddle where I am trying to replicate the behavior on my server.
jsfiddle:
http://jsfiddle.net/46XSv/
You want to check the option "no wrap - in <head>" which is "Do not wrap the Javascript code, place it in section".
Select "no wrap - in <head>" under "Framework and extensions"
In this page you'll find the description of each of the options around the bottom: http://doc.jsfiddle.net/basic/introduction.html.
Also its a good practice to include semicolon at the end of your return statement, like the following:
<input type="submit" onclick="return doSomething();" value="click me!">
You should use onsubmit on the <form> element instead of onclick on the <input> element. It will work correctly.
I'm having multiple iframes in one page each one contains a form , and i put the submit button outside the iframes , and when user press on submit all forms should be submited and then the page should be closed , any one can help me in this?
this function called onclick on submit button
function Save_Close()
{
if (window.frames.intake_pat_info_iframe && window.frames.intake_pat_info_iframe._Submit('Update')) {
window.frames.intake_pat_info_iframe._Submit('Update');
}
if (window.frames.intake_job_info_iframe && window.frames.intake_job_info_iframe._Submit('Update')) {
window.frames.intake_job_info_iframe._Submit('Update');
}
if (window.frames.intake_spine_his_iframe && window.frames.intake_spine_his_iframe._Submit('Update')) {
window.frames.intake_spine_his_iframe._Submit('Update');
}
if (window.frames.intake_past_med_history_iframe && window.frames.intake_past_med_history_iframe._Submit('Update')) {
window.frames.intake_past_med_history_iframe._Submit('Update');
}
....
<input type="button" id="" name="" value="Save & Close" onclick="Save_Close()"/>
thnx
As long as you can use Javascript and your iframes are all being served from the same server, it's not that hard. A completely pure inline JS approach looks like (this is using ASP.NET for the server-side stuff but the important bit is the onclick() handler in the button)
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>IFRAME form submit demo</title>
</head>
<body>
<iframe name="iframe1" src="my_form.aspx"></iframe>
<iframe name="iframe2" src="my_form.aspx"></iframe>
<iframe name="iframe3" src="my_form.aspx"></iframe>
<iframe name="iframe4" src="my_form.aspx"></iframe>
<input type="submit" value="Submit All IFrames"
onclick="for(var i = 0; i < frames.length; i++) { frames[i].document.forms[0].submitButton.click(); }" />
</body>
</html>
EDIT: now explicitly calls form.submitButton.click() instead of form.submit() to invoke functions bound to submit button's Click handler.
This is not easy to achieve.
Each IFrame is a different document, and a submit button will only work on a single form, the one that is belongs to.
The get this to work, you will need to collect you data from all IFrames using javascript to populate one or more hidden fields on the form that the submit button is on.
If the different IFrames are on different domains however, this will not be possible due to the same origin security policy.
I create this tiny JS so i can control the form submit with jQuery
$('#submit').click(function() {
$('#addForm').submit();
});
Can I use a simple href link for it?
Something like
link
I tried
link
but it didn't work (it by pass the other jQuery in the page)
If you want the JS that you created to control the submit, don't have a href value in your link:
<a id="submit">link</a>
You cannot submit your form that way with a link and some javaScript, even jQuery. You have to use an XHR call to submit your query AND not refresh the page. (you can submit your form with a link as presented by Dan, but I understand that you want to do more than just that from your questions)
The reason being that the "return false" statement will impact the link action, and not the form submission itself.
In any case, I would advise you to not use a link to submit your form at all.
You can easily submit a form with the normal submit button and a bit of jQuery. That way, you provide a nice fallback to your users that have not enabled javaScript.
You can even submit the form with some client side validation, using the following HTML / javaScript:
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#addForm').submit(function(){
validate();
ajax_submit_function_taking_form_data_as_argument($(this).serialize());
return false;
});
});
function validate(){
//Do some client side validation if required
}
function ajax_submit_function_taking_form_data_as_argument(theData){
$.ajax({
type: 'GET',
url: "http://search.google.com/",
data: theData,
error: function(e){
alert('error...');
},
success: function(data){
alert('success!');
}
});
}
</script>
<style type="text/css"></style>
</head>
<body>
<form id="addForm">
<input type="text" name="field1" value="" />
<input type="submit" value="submit" />
</form>
</body>
</html>
A last solution, albeit maybe too heavy weight for your use, would be to use the excellent jQuery form plugin from http://jquery.malsup.com/form/
I hope that helps!
You can attach to the click event with jquery. It's also cleaner not to put any javascript in your html.
<!DOCTYPE html>
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#aSubmit').click(function(){
$('#form1').submit();
return false;
});
});
</script>
<style type="text/css"></style>
</head>
<body>
<form id="form1" action="http://www.google.com/search" name=f>
<input name="q" />
</form>
submit
</body>
</html>
Never ever put JavaScript in the href attribute. If you must put in the HTML, use the onclick attribute, and remember to add return false. Also, never ever prefix script with javascript:.
Your first script block should do the job just as fine as well, though.
(And what does "it by pass the other jQuery in the page" mean?)