I am having trouble outputing text to a div in Javascript. When I call the function on button click it displays the text for a fraction of second and then disappears. Why is it so? The code is given below;
Code:
function val(){
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
HTML:
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="submit" onclick="val()">Sign Up</button>
</form>
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" id="asd">Sign Up</button>
</form>
$('#asd').click(function () {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
});
FIDDLE
I made a few changes. I changed the button type from submit to button also i added an id for the button. check it
You have a submit button in a form, its default action is to submit the form that is why the result is disappearing(the page is getting refreshed).
Since you really don't want to submit the form(here you are just doing some dynamic changes to the page), one easy solution is to change the type of the button to button
function val() {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" onclick="val()">Sign Up</button>
</form>
Another solution is to prevent the default action of the submit button click by returning false
Try this:
Your code works as expected but as you have taken button type as submit, i submits the form.
function val() {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" onclick="val()">Sign Up</button>
</form>
Related
I have started javascript DOM manipulation, I come across an error maybe.
Whenever I input in name field like jaykumar and press click me button .In demo, jaykumar comes and with in few microseconds go.
function myfunction() {
var x = document.getElementById("myform").elements["fname"].value;
document.getElementById("demo").innerHTML = x;
}
<form id="myform">
name<input type="textbox" name="fname"> email
<input type="textbox" name="email">
<button onclick="myfunction()"> Click me</button>
</form>
<div id="demo"></div>
A button inside a form's default behaviour is to submit the form. To change this make the button of type="button"
function myfunction() {
var x = document.getElementById("myform").elements["fname"].value;
document.getElementById("demo").innerHTML = x;
}
<form id="myform">
name<input type="textbox" name="fname"> email
<input type="textbox" name="email">
<button type="button" onclick="myfunction()"> Click me</button>
</form>
<div id="demo"></div>
Here the code that I made and not working looking to see how I would get my sum into the result field, Also looking how to make a reset button to clear all the text from the fields.
JSBin.
<html>
<head>
<script>
function addition() {
var x = +document.getElementById('num1').value;
var y = +document.getElementById('num2').value;
document.getElementById('result').value = x + y;
document.result.submit()
}
function reset() {}
</script>
</head>
<body>
<header>
<h1>Calculator Using Forms & JavaScript</h1>
</header>
<form>
Number 1:
<input type="number" id="num1" value="0" autofocus>
<br> Number 2:
<input type="number" id="num2" value="0">
<br> Result:
<input type="text" id="result" value="0" readonly>
<br>
</form>
<input type="button" onclick="addition()" value="addition">
</body>
</html>
Why do you want to submit the form?
You can use document.forms. to access the form.
Try this:
<html>
<head>
<script>
function addition() {
var x = +document.getElementById('num1').value;
var y = +document.getElementById('num2').value;
document.getElementById('result').value = x + y;
document.forms.calculator.submit()
}
function reset() {
document.forms.calculator.reset();
}
</script>
</head>
<body>
<header>
<h1>Calculator Using Forms & JavaScript</h1>
</header>
<form name="calculator">
Number 1:
<input type="number" id="num1" value="0" autofocus>
<br> Number 2:
<input type="number" id="num2" value="0">
<br> Result:
<input type="text" id="result" value="0" readonly>
<br>
</form>
<input type="button" onclick="addition()" value="addition">
<input type="button" onclick="reset()" value="reset">
</body>
</html>
Do you want this one?
jsbin
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
<script>
function addition() {
var x = +document.getElementById('num1').value;
var y = +document.getElementById('num2').value;
document.getElementById('result').value = x + y;
//document.result.submit()
//if you want use submit, use this code. if only see the result, don't use this
//Submit is receive data, so you can't see a result.
//document.getElementById('formId').submit();
//jquery submit
//$("form")[0].submit();
}
function reset() {
//no jquery
document.getElementById('formId').reset();
//jquery
//$("form")[0].reset();
}
</script>
</head>
<body>
<header>
<h1>Calculator Using Forms & JavaScript</h1>
</header>
<form id="formId">
Number 1:
<input type="number" id="num1" value="0" autofocus>
<br> Number 2:
<input type="number" id="num2" value="0">
<br> Result:
<input type="text" id="result" value="0" readonly>
<br>
</form>
<input type="button" onclick="addition()" value="addition">
<input type="button" onclick="reset()" value="reset">
</body>
</html>
Note that forms can be submitted without clicking the submit button, so if you want something to happen on submit, attach a listener to the form's submit handler. To reset a form only requires a reset button, no code.
Form controls must have a name to be successful and submit their value with the form, and you can pass a reference to the form using this from the listener so you don't need to use getElementById.
Implementing the above significantly reduces the amount of code required.
In the following, the submit listener returns false so prevents the form from submitting. If you want the form to submit, just remove the return statement from the in–line listener:
function addition(form) {
form.result.value = +form.num1.value + +form.num2.value;
}
<form name="calculator" onsubmit="addition(this); return false;">
Number 1:
<input type="number" name="num1" value="0" autofocus>
<br> Number 2:
<input type="number" name="num2" value="0">
<br> Result:
<input type="text" name="result" value="0" readonly>
<br>
<input type="submit" value="Submit form">
<input type="reset">
</form>
You may not want to submit the form at all, in that case you can make the submit button a plain button and call the function from there, but remember to stop the form submitting otherwise.
just give an id to the form and in your reset function, just do
document.getElementById("myForm").reset();
updates:
according to ROBG's comments, you don't need to bind a function to the button.
you can simply add a
<input type="reset">
to reset all fields of the form, and if the button is out the form, you can do
<input form="formID" type="reset">
to associate to specific form.
What I want the program to do is make a form and have 2 radio buttons and 1 text.
Then I want it to collapse the text and radio value together into one and take me to that page:
If I input text with like "facebook" and the radiobutton value is .com I want it to take facebook + .com and send me to that page.
<!doctype html>
<html>
<head>
<title>A Basic Form</title>
<style type="text/css">
</style>
</head>
<body onunload="Bye()">
<form>
<fieldset>
<legend>Redirection: </legend>
<div>
<label>Where do you want to go?</label>
<input type="text" id="input" name="input" size="7">
<input type="submit" id="submit" name="submit" value="Submit" onclick="go()">
</div>
<div>
<input type="radio" id="no" name="end" value=".no">
<label for=".no">.no</label>
<br />
<input type="radio" id="com" name="end" value=".com">
<label for=".com">.com</label>
</div>
</fieldset>
</form>
<script type="text/javascript">
function go() {
var end = "";
if (document.getElementById("no").checked) {
end = document.getElementById("no").value;
} else {
end = document.getElementById("com").value;
}
var input = document.getElementById("input").value;
var together = input + end;
window.location.replace("http://www." + together);
}
</script>
</body>
</html>
Change type="submit" to type="button".
Change this line:
<input type="submit" id="submit" name="submit" value="Submit" onclick="go()">
to:
<input type="button" id="submit" name="submit" value="Submit" onclick="go()">
In this case you don't need to submit a form. You are just trying to redirect the url. You didn't specify where to submit the form so it is submitting to itself that is your problem.
Alternatively, return false from the onclick handler to prevent the form submit.
Try this code:
<html>
<head>
</head>
<body>
<form>
<fieldset>
<legend>Redirection: </legend>
<div>
<label>Where do you want to go?</label>
<input type="text" id="input" name="input" size="7">
<input type="submit" id="submit" name="submit" value="Submit" onclick="return go()">
</div>
<div>
<input type="radio" id="no" name="end" value=".no">
<label for=".no">.no</label>
<br />
<input type="radio" id="com" name="end" value=".com">
<label for=".com">.com</label>
</div>
</fieldset>
</form>
<script type="text/javascript">
function go() {
var end = "";
if (document.getElementById("no").checked) {
end = document.getElementById("no").value;
} else {
end = document.getElementById("com").value;
}
var input = document.getElementById("input").value;
var together = input + end;
window.location.replace("http://www." + together);
return false;
}
</script>
</body>
</html>
brso05's analysis seems to be spot on... But I can't really explain it. It seems that Chrome is delaying the side effects of the location.href.replace (which should be navigating away from the page) until after the form submit... I have a feeling you have hit a browser bug here. I can't imagine this is spec-compliant.
Here is my problem, when i click the submit button, the textbox doesn't show any value
Is there any mistakes, i am just a newbie
Thank you very much
<form id="form1" name="form1" method="post" >
<p>
<input type="submit" name="setValue" id="setValue" value="submit" onclick="setValue()"/>
</p>
<p>
<label>
<input type="text" name="bbb" id="bbb" />
</label>
</p>
</form>
<script type="text/javascript">
function setValue()
{
document.getElementById('bbb').value="new value here";
}
</script>
The first issue is that you're using the same name for the element as the function, so window.setValue is not the function, but the submit button, and that's an error.
The second issue is that when you hit the submit button, the form is submitted and the page reloads, that's why you wont see a value, you have to prevent the form from submitting.
You could do it with javascript, but the easiest would be to just use a regular button instead of the submit button.
<form id="form1" name="form1" method="post">
<p>
<input type="button" name="set_Value" id="set_Value" value="submit" onclick="setValue()" />
</p>
<p>
<label>
<input type="text" name="bbb" id="bbb" />
</label>
</p>
</form>
<script type="text/javascript">
function setValue() {
document.getElementById('bbb').value = "new value here";
}
</script>
FIDDLE
I was typing the same answer what Adeneo just given, thank you Adeneo.
And user3635102, your <form> was good, you can keep it as it was. Only you need to change <input type="submit"> to <input type="button"> . if you need to submit the form in future you can update your Javascript as follows which will submit form1:
<script>
function setValue() {
document.getElementById('bbb').value = "new value here";
document.getElementById("form1").submit();
}
</script>
When I add text to a div in a chrome extension popup, the text appears for a fraction of a second and then immediately dissappears again.
This is a small example:
<html>
<head>
<script>
function show() {
var newName = document.showMe.textToShow.value;
var txt = document.createTextNode(newName);
document.getElementById("feedback").appendChild(txt);
}
</script>
</head>
<body>
<form name="showMe">
Name: <input type="text" name="textToShow" /><br />
<input type="submit" value="Show" OnClick="show()" />
</form>
<div id="feedback"></div>
</body>
</html>
What am I doing wrong?
Thanks,
Miel.
It works, but then the form gets submitted. You have to suppress sending the form like this
<input type="submit" value="Show" OnClick="show(); return false" />
or use a button:
<button type="button" onclick="show()">Show</button>