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?
Related
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>
When I click the submit button on my form validation script it sends me to this strange "Index of C:\" page. I am a newb following a tutorial, I get this error but my code is the same as in the tutorial.
I think the error has to do with my file path linking my HTML to my javascript
The Submit button is supposed to do nothing when pressed, it shows me this strange page when pressed.
I've tried several different types of syntax for linking the javascript to the HTML, none have worked. At one point I could put the files in the same folder and t
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Form</title>
<script type="text/javascript" src="/JS/JS.js"></script>
</head>
<body>
<div id="error"></div>
<form action="/" method="POST">
<div>
<label for="name">Name</label>
<input id="name" name="name" type = "text">
</div>
<div>
<label for="password">Password</label>
<input id="password" name="password" type = "password">
</div>
<button type="submit">Submit</button>
</form>
</body>
</html>
Here is the Javascript:
const name = document.getElementById('name')
const password = document.getElementById('password')
const form = document.getElementById('form')
form.addEventListener('submit', (e) => {
e.preventDefault()
})
I am trying to learn form validation and got stuck on this problem today.
When you're loading your document from file:///, <form action="/"> will always redirect you to C:\. The tutorial expects you to have deployed your site somewhere.
Remove the action attribute, add it only when you deploy.
Your listener does not catch the event. You can also play with action.
Try to change both:
<form action="/" method="POST">
into
<form id="form" action="" method="POST">
I deleted the action stuff from the form, will add that back if I put it on the internet. This code is just for practice.
Been trying to find some solution but I wasn't able to. I need to get a button to fire two events on one click. This code worked for firefox but it doesn't on Chrome:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>EXAMPLE</title>
<script type="text/javascript">
function changeLocation (){
window.location = "https://www.bing.com";
}
</script>
</head>
<body>
<form action="https://www.google.com" target="_blank">
<input type="text">
<button onclick="changeLocation()">Submit</button>
</form>
</body>
</html>
I'm trying to redirect users to a new page in new tab and redirect the main page (old one) after the button has been clicked.
Is there any solution which would also work on Chrome?
Would really appreciate any kind of help!
function changeLocation() {
document.getElementById("form").submit();
window.open("https://www.bing.com","_blank");
}
<form id="form" action="https://www.google.com">
<input type="text">
<button onclick="changeLocation()">Submit</button>
</form>
This will help you. By the way you need to use the name attribute in the input tag to submit the data.
I'm trying to show forms based on the button clicked. That is, on clicking the first button, two other buttons are displayed. However, the new buttons generated behave like dummy buttons (onClick event not working).
How can I resolve this error? Is there any alternative for this to implement the same functionality?
I have the following code:
<html>
<head>
<title>Frequently Asked Questions</title>
<link rel="stylesheet" type="text/css" href="CSSfiles/faqCSS.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script >
function addContent(divName, content) {
document.getElementById(divName).innerHTML = content;
}
</script>
</head>
<body>
<p>Put banner and logo on top; Put footer later </p>
<div class="intro">
Looking for help? We provide you information about what can be done when in trouble. Hope you find it helpful!
</div>
<form name="myForm" class="select">
<input type="button" value="ND" class="select-button" onClick="addContent('myDiv', document.myForm1.ND.value);"><br>
<input type="button" value="E" class="select-button" onClick="addContent('myDiv', document.myForm1.E.value);">
</form>
<form name="myForm1" class="select">
<textarea name="ND">
<input type="button" value="Earthquakes" class="trial" onclick="addContent('yourDiv', document.myForm2.HW.value);"/><br>
</textarea>
<textarea name="E"><u>E</u></textarea>
</form>
<form name="myForm2" class="select">
<textarea name="HW">
<u>Hello world!</u>
</textarea>
</form>
<br><br>
<div id="myDiv"></div>
<div id="yourDiv"></div>
</body>
</html>
It is not clear to me how you add the buttons to your DOM (could you post that code?).
However, say that your button has an id of 'MyButton1',
<button id="MyButton1">Hello</button>
then if you do this with jQuery, your code needs to have it delegate the click, by hooking an object that is already existing and will contain your button; for example the body element:
// This is registered before MyButton1 is created.
$('body').on('click', '#MyButton1', function(event) {
alert("Hello, I'm button 1");
}
Using plain javascript, after you have created the new content (so that getElementById can find the button), you need to bind the onclick event:
document.getElementById('MyButton1').onclick = function() {
alert("Hello again");
}
or (not supported on older IEs)
document.getElementById('MyButton1').addEventListener("click",
function() {
alert("Still me");
});
Here you can find a Javascript fiddle with code re: the javascript method.
Initially keep all forms hidden. Put them in the desired division. Onclick of each button only show/hide intended form..
This can help you out.
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.