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.
Related
I am currently learning JavaScript for my uni course and my function is not being called for some reason. I want to understand why this is not working.
Brief Description
There are two forms, one has a submit button, with the onSubmit field calling document.write() (This works), then calling my own function submit(). If I change submit() to document.write() then I receive two outputs, so there should be no reads why submit is not called?
The second form has a single textbox in it, I ideally want to make this disappear when the button is pressed, however I mainly want to understand why submit is not called.
<html charset="utf-8">
<head>
<title>Game</title>
</head>
<body>
<form method="get" name="form1" action="game.php" onSubmit="document.write('Hello');submit();">
<input type="submit" value="submit" name="button" />
</form>
<form id="form2" name="form2">
<input name="letter" type="text" />
</form>
<script>
function submit() {
alert("HELLO");
document.getElementById('form2').visibility='hidden';
document.write("Hello");
}
</script>
</body>
I have tried inserting the script in the header, above the function, below the function, but nothing seems to work.
Hope someone can help, thanks
submit is a reserved keyword. Change to any other name and it should work. Please find the JSFiddle of the same
https://jsfiddle.net/pc9rL2ey/
function submita() {
alert("HELLO");
document.getElementById('form2').visibility='hidden';
document.write("Hello");
}
<form method="get" name="form1" action="game.php" onSubmit="submita();document.write('Hello');">
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'm learning javascript and tried my hand at calling functions. Based on the example here, I tried to use the logic in my test html:
<html>
<head>
<script>
function ShowForm()
{
var field_value = document.forms["test_form"]["my_name"].value;
document.write(field_value);
}
</script>
</head>
<body>
<form action="" name="test_form" onsubmit="return ShowForm();" method="post">
<input type="text" name="my_name" placeholder="Type your name"/>
<button type="submit">My button</button>
</form>
</body>
</html>
I found that the html renders correctly, however upon clicking the "My button" button, the page simply reloads without displaying the additional html I expected.
The main different is that I'm trying to use <button> for the click/submit action. Is it possible to use a <button> and activate the javascript? Or should I just style the <input> as a button?
What am I doing wrong here?
Use
onsubmit="ShowForm();return false"
Instead of
onsubmit="return ShowForm();"
Adding return false will prevent page from reloading, removing return from return ShowForm(); will allow javascript to run return false after ShowForm().
Example
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 am sure I am missing some basic part here, but have a look at my very simple code:
<html>
<head>
<script>
function showscore(){
var score = document.createTextNode("test");
var placeholder = document.getElementById("field");
placeholder.value = score.nodeValue;
}
</script>
</head>
<body>
<form>
<input type="text" id="field"/>
<input type="submit" value="Show score" onclick="javascript:showscore()" />
</form>
</body>
</html>
When I run it, the result (for the moment, the word "test") appears inside the input field for a very brief moment and then goes away.
What extremely simple and easy thing I am missing? :-)
Thanks very much.
That's because the page is submitting the form. Just change type="submit" to type="button" or prevent the form from submitting.
It's because your button is an <input type="submit /> so after your Javascript is executed, the browser submits the form.
If you don't want the form to submit, you could use an <input type="button" /> instead.
Alternatively you could leave it as a submit and return false; after the showscore() call. That will prevent the form from submitting.