This question already has answers here:
JavaScript code to stop form submission
(14 answers)
Closed 2 years ago.
I have a button with a JavaScript event handler, trying to make a change in the document object model on click. It makes that change, but immediately reverts it; clicking the button causes the text to change, but only for an instant before changes back. Why is it changing back? How can I stop that happening?
var button_variable_name = document.getElementById("changeText");
button_variable_name.addEventListener("click", function() {
document.querySelector('#test').textContent="Replace the text";
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>blank</title>
</head>
<body>
<form>
<input type="text" id="a" />
<input type="text" id="b" />
<input type="text" id="c" />
<button id="changeText" > button </button>
</form>
<p id="test"> test text </p>
</body>
</html>
A button inside a form is defaulted used as submit button and so when you click it, the form is submitted and so the page reload; you just need to specify that that button isn't a submit button:
<button id="changeText" type="button"> button </button>
Note the type="button", default is type="submit"
Related
I am rather new to Javascript and am currently trying some stuff out with it.
I stumbled upon a tutorial in w3schools on how to change the color of a button after pressing it.
I wanted to do something similar, but instead load another page with some search query results when the button is pressed.
My html code for this is the following:
<html>
<head>
<meta charset = "utf-8">
<title>Test</title>
<script type="text/javascript" src="search.js" defer></script>
</head>
<body>
<header>
<h1>Test</h1>
</header>
<main>
<form>
<input type="search" id="query" placeholder="Search...">
<button id="submit">Search</button>
</form>
</main>
</body>
</html>
And here is the corresponding javascript code:
const searchbutton = document.getElementById("submit");
searchbutton.addEventListener("click", testmethod);
function testmethod() {
window.location.href="search.html";
}
The code itself seems to be working, but whenever the button is pressed, the search.html page loads for a split second before reverting back. I even copied the code from the w3schools tutorial directly but it's still not working.
Any idea what causes the page to get changed back after the button is pressed?
Thanks in advance!
Change location or submitting a form will (re)load the (target) page - you are doing BOTH.
You can start by passing in the event and using event.preventDefault() in the testmethod and then do something else than changing location
I strongly suggest to NOT assign events to a submit button, instead use the submit event
You also need to wrap in a page load event listener or move the script to after the form
ALSO never call anything submit in a form
function testmethod(e) {
e.preventDefault(); // stop submission
console.log(this.query.value);
this.subbut.style.color = "red";
}
window.addEventListener("load", function() {
document.getElementById("myForm").addEventListener("submit", testmethod);
});
<main>
<form id="myForm">
<input type="search" name="query" id="query" placeholder="Search...">
<button name="subbut">Search</button>
</form>
</main>
If you do not need to submit the form, use a type="button" and no form
function testmethod(e) {
console.log(document.getElementById("query").value)
this.style.color = "red";
}
window.addEventListener("load", function() {
document.getElementById("subbut").addEventListener("click", testmethod);
});
<main>
<input type="search" id="query" placeholder="Search...">
<button type="button" id="subbut">Search</button>
</main>
This question already has answers here:
How to prevent buttons from submitting forms
(20 answers)
Closed 2 years ago.
<form>
<p>Enter Title Text:</p>
<input type="text">
<button onclick="hello()">Submit</button>
</form>
</body>
<script>
function hello() {
document.querySelector("title").textContent =
document.querySelector("input").value;
}
My intent is for the tab title to change to the text the user entered upon clicking the button. I think it is working but only for a split second then changing back. Any help is greatly appreciated. Thanks!
Change the button's type to "button" so clicking it does not submit the form. The default type for a button inside a form is "submit", which will cause it to submit the form and hence reload the page when it is clicked. Explicitly setting the type prevents this behavior.
See also: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
<button type="button" onclick="hello()">Submit</button>
function hello() {
document.querySelector("#result").textContent = "Title text is: " + document.querySelector("input").value;
}
<form>
<p>Enter Title Text:</p>
<input type="text">
<button type="button" onclick="hello()">Submit</button>
</form>
<p id="result">
</p>
Here is the solution:-
<form onsubmit="event.preventDefault()">
<p>Enter Title Text:</p>
<div class="title"></div>
<input type="text">
<button onclick="hello()">Submit</button>
</form>
function hello() {
document.querySelector(".title").innerHTML =
document.querySelector("input").value;
}
First, you need to prevent the default behaviour of form by using preventDefault or just omit form tag it works the same in both cases, in order to use "onclick" event of your button
Then, for getting the desired result you can use innerHTML like I have used here.
I am new to working with iframes, and HTML/JavaScript in general. I am trying to change the iframe src when the user clicks on the submit button. However, for some reason the src value keeps reverting to the original value after I change it. Please ignore the unusual id names. :)
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Card Getter</title>
<script>
function get(){
var name = document.getElementById("card").value;
document.getElementById("toast").src="http://gatherer.wizards.com/Pages/Search/Default.aspx?action=advanced&name=+["+name+"]";
alert(name);
};
function check(){
alert(document.getElementById("toast").src);
};
</script>
</head>
<body>
<iframe src="" id="toast"></iframe>
<form>
<p>Card Name:</p>
<br>
<input type="text" id="card">
<br>
<input type="submit" onclick="get()" value="Submit">
</form>
<form>
<input type="button" onclick="check()" value="check">
</form>
</body>
</html>
Thanks for the help.
This happens because your form is submitted when the button is pressed. Since you didn’t specific a form action, the current page is assumed—so this results in a reload which resets the iframe’s src.
As a quick fix, you can add return false; to your onclick handler:
<input type="submit" onclick="get(); return false;" value="Submit">
This will prevent the form from being submitted.
I have the following code in the HTML:
<button onclick="showDescription();">Find book</button>
While in the JavaScript file attached:
function showDescription(){
document.getElementById("description").value="book";
}
However, whenever I click the button, it only shows the string "book" for 1 second, and disappears. Any idea what went wrong?
Your button is (presumably) inside a <form>.
The default type for a button is submit.
The JavaScript runs
The value is updated
The form is submitted
The page is reloaded
The initial value is displayed again
Don't use a submit button:
<button type="button" onclick="showDescription();">Find book</button>
Alternatively, return false from your event handler:
onclick="showDescription(); return false;"
I'm guessing that button is inside a form, change it from :
<button onclick="showDescription();">Find book</button>
to:
<input type="button" onclick="showDescription();" value="Find book" />
A button has a default type of submit, so it will submit the form and reload the page if it's inside a form element.
Try this code:
<!DOCTYPE html>
<html>
<head>
<script>
function showDescription()
{
document.getElementById("description").innerHTML="book";
}
</script>
</head>
<body>
<button onclick="showDescription();">Find book</button>
<textarea id="description" rows="4" cols="50">
</textarea>
</body>
I need to use form fields in an English/Amino Acid Code translater. The code below is simplified to show the problem I'm having. I want to change some text with a javascript function.
If I use an input of type: button with onclick it works.
A submit button with onsubmit in a form changes the text for a split second, then it changes back. I need to use a form for my translation program so how can I make it work?
Extra Credit: Why does it change for a split second with onsubmit?
<html>
<head>
<script type="text/javascript">
function changeTo(text){
document.getElementById("p1").innerHTML=text;
}
</script>
</head>
<body>
<h1 style="text-align:center;">Change text in an element</h1>
<!--
<form onsubmit="changeTo('Hello World');">
<input type="submit" />
</form>
-->
<input type="button" onclick="changeTo('Hello World');" />
<p id="p1">text</p>
</body>
</html>
It's changing it back because the form is submitting. It posts to the same page, and if you are on a local machine it might be so quick you don't notice. Try:
<form onsubmit="changeTo('Hello World');return false;">
<input type="submit" />
</form>
Return false at the end there will stop the submission process.