I have built a basic script to do an elementary math add 1 on click and subtract 1 on click
the problem is every time you click on the button you can watch the textbox content increase by 1 or decrease by 1 but then within a quarter of a second the form appears to reset and show the initial value of 0 again
<html>
<head>
<script>
function inc()
{
document.content.quant.value++;
}
function dec()
{
document.content.quant.value--;
}
</script>
</head>
<body>
<form name="content">
<input type="text" id="quant" value="0">
<button onclick="inc()">increase</button>
<button onclick="dec()">decrease</button>
</form>
</body>
</html>
I am sure I am making some stupid mistake - any ideas?
Add type="button" to your buttons
<button type="button" onclick="inc()">increase</button>
The default behaviour of a button without a type attribute is to submit the form it is part of. If you change the type to button it won't do anything :)
Form is getting submitted when you click on the buttons. use preventDefault to prevent this.
<html>
<head>
<script>
function inc()
{
document.content.quant.value++;
event.preventDefault();
}
function dec()
{
document.content.quant.value--;
event.preventDefault();
}
</script>
</head>
<body>
<form name="content">
<input type="text" id="quant" value="0">
<button onclick="inc()">increase</button>
<button onclick="dec()">decrease</button>
</form>
</body>
</html>
Related
I am working on a form that uses javascript to create a paragraph. For some reason, when I click my button, it forces my page to reload. Could you anyone let me know what I'm doing wrong here?
console.log('everything is linked')
function createParagraph() {
console.log('function called');
var wordOne=document.getElementById('textOne').value
var wordTwo=document.getElementById('testTwo').value
var paragraph = '<p>My first word is' + wordOne+'. My Second word is '+ wordTwo+'.</p>';
document.getElementById('answer').innerHTML= paragraph
}
<body>
<form action="">
<input id='textOne' type="text">
<input id='textTwo' type="text">
<button onclick="createParagraph()">Click Me</button>
</form>
<div id="answer"></div>
<script src="app.js"></script>
</body>
The default behavior of a <button> inside a <form> is to submit that form. Set the button's type to explicitly not be a "submit":
<button type="button" onclick="createParagraph()">Click Me</button>
Additionally, if you have no use for the actual <form> (don't want to submit it) then it's probably best to just remove it:
<body>
<input id='textOne' type="text">
<input id='textTwo' type="text">
<button type="button" onclick="createParagraph()">Click Me</button>
<div id="answer"></div>
<script src="app.js"></script>
</body>
That way there's nothing to accidentally be submitted in the first place.
Your button acts as a submit button, so your form is being submitted. To prevent this, you can use attribute onSubmit on your form and prevent sending form.
<form onSubmit="return false">
Because the button is in a form and the form is probably submitted.
add the type="button" to not submit the form.
console.log('everything is linked')
function createParagraph() {
console.log('function called');
var wordOne=document.getElementById('textOne').value
var wordTwo=document.getElementById('testTwo').value
var paragraph = '<p>My first word is' + wordOne+'. My Second word is '+ wordTwo+'.</p>';
document.getElementById('answer').innerHTML= paragraph
}
<body>
<form action="">
<input id='textOne' type="text">
<input id='textTwo' type="text">
<button type="button" onclick="createParagraph()">Click Me</button>
</form>
<div id="answer"></div>
<script src="app.js"></script>
</body>
Hi I'm new in javascript so I'm sorry if I my question is silly
I am suppodsed to make a dive where there would be two input fields and a button. When you press the button the text that is written in first field must move to the second one. This is what I have done:
<script>
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].innerHTML=fp.element[0].value;
fp.elements[0].value="";
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Project 2 </title>
</head>
<body>
<div>
<form id=fora>
First phrase:<br>
<input type="text" name="first phrase" >
<br>
Second phase:<br>
<input type="text" name="second phrase">
</form>
<button type="button" onclick="myfunction()">push me
</button>
<buttom>
</button>
</div>
<p id="intro"></p>
</body>
</html>
Has anyone any idea what i am doing wrong??
You need to change innerHTML to value. And there is a typo fp.element (missing s , should be fp.elements)
var fp= document.forms["fora"];
fp.elements[1].value=fp.elements[0].value;
fp.elements[0].value="";
Change your javascript to read and set the values of the inputs based on the names:
function myfunction(){
document.getElementsByName("second phrase")[0].value = document.getElementsByName("first phrase")[0].value;
document.getElementsByName("first phrase")[0].value = "";
}
Change
fp.elements[1].innerHTML=fp.element[0].value;
to
fp.elements[1].value = fp.elements[0].value;
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].value = fp.elements[0].value;
fp.elements[0].value = "";
}
<form name="fora">
First phrase:<br>
<input type="text" name="firstPhrase" ><br>
Second phase:<br>
<input type="text" name="secondPhrase">
</form>
<button type="button" onclick="myfunction()">push me</button>
I'm trying to create a search option.
If someone is using my search field, they can press the "Search-Button" or just press the enter key to start the function.
My problem is that if they press the enter key within the text box it starts my function and after the function it calls the button click.
I've used Google but couldn't solve it, even tried to disable the button while myFunc() is called.
<!DOCTYPE html>
<html>
<body>
<form>Search
<br>
<input type="text" id="searchField" onKeyDown="if(event.keyCode==13) myFunc()">
<br>
<button type="button" id="myButton" onClick="myFunc()">Search</button>
</form>
</body>
</html>
Looks like you want to stop the event propagation in this case.
I've changed your code to the following:
<!DOCTYPE html>
<html>
<body>
<form>
Search<br>
<input type="text" id="searchField" onKeyDown="if(event.keyCode==13){console.log('Hello World from Input'); return false;}">
<br>
<button type="button" id="myButton" onClick="console.log('Hello World from Button')">Search</button>
</form>
</body>
</html>
Pressing enter while the input element has the focus gives me only Hello World from Input at the console.
I think this is what you are asking for: https://jsfiddle.net/7vf9pz8u/1/
HTML
<form>Search
<br>
<input type="text" id="searchField" onKeyDown="pressEnter()">
<br>
<button type="button" id="myButton" onClick="myFunc()">Search</button>
</form>
JavaScript
function pressEnter() {
if (event.keyCode == 13) {
alert("working");
}
}
Handle the onKeyDown separately in a function (onEnter) and use event.preventDefault(); block the default action.
See the below code.
window.onEnter = function () {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
}
<form>
Search<br>
<input type="text" id="searchField" onKeyDown="onEnter()">
<br>
<button type="button" id="myButton" onClick="myFunc()">Search</button>
</form>
http://jsfiddle.net/kishoresahas/cvyzLdy8/
I think you should prevent form submitting by event.preventDefault() in onkeydown function.
I have tested your code in chrome and firefox browser and it is working perfectly as you wish, I make some update in your code to show that it is actually working fine. Follows:
<!DOCTYPE html>
<html>
<body>
<script>
function myFunc(){
alert("Typed text.: "+document.getElementById("searchField").value)
}
</script>
<form>
Search<br>
<input type="text" id="searchField" onKeyDown="if(event.keyCode==13) myFunc()">
<br>
<button type="button" id="myButton" onClick="myFunc()">Search</button>
</form>
</body>
</html>
<html>
<body>
<form class="totalpayment">
<input class="paid" type="text" name="numberOne" />
<input class="due" type="text" name="numberTwo" />
<button>Add</button>
</form>
<p class="total"></p>
<script src="jquery.min.js"></script>
<script>
// Sum the value when submitting the form
$(".totalpayment").submit(function(e){
e.preventDefault();
var paid = parseInt($('.paid').val());
var due = parseInt($('.due').val());
$(".total").html(paid + due);
});
</script>
</body>
</html>
I have a form that adds two numbers together. My issue is, it only has one button, the add button. Let's say I wanted to add the handler for a cancel button which will clear the two boxes, how would I implement this?
Just add one more button to reset the form. Read more about Reset button
There is no need to add any handler for resetting the form.
<button type="reset" value="Cancel">Cancel</button>
Sample code:
<html>
<body>
<form class="totalpayment">
<input class="paid" type="text" name="numberOne" />
<input class="due" type="text" name="numberTwo" />
<button>Add</button>
<button type="reset" value="Cancel">Cancel</button>
</form>
<p class="total"></p>
<script src="jquery.min.js"></script>
<script>
// Sum the value when submitting the form
$(".totalpayment").submit(function(e){
e.preventDefault();
var paid = parseInt($('.paid').val());
var due = parseInt($('.due').val());
$(".total").html(paid + due);
});
</script>
</body>
</html>
Whenever I click on the button I get the output for a second in the text-field "Result" and then it's gone.. why does it disappear? (I have tried to place the function in the body.. it doesn't help..)
<html>
<head>
<script>
function someFunction()
{
with (document.formy)
{
resultsBox.value= "In " + yearsBox.value + "you will be" + ageBox.value + yearsBox.value +" years old.";
}
}
</script>
</head>
<body>
<form name="formy">
Enter your current age: <input id="ageBox" type="text" value="18" />
<br/>
Enter number of years: <input id="yearsBox" type="text" value="5" />
<br/>
Click this button: <button onclick="someFunction()">Click me! </button>
<br/>
Results: <input id="resultsBox" type="text" />
</form>
</body>
</html>
The default type for buttons is submit. When you click the button the form is submitting and reloading the page. You can avoid this by setting the type attribute on the button:
<button type="button" onclick="someFunction()">Click me!</button>
Add an attribute to your form button called type. Specifically, something like:
type="button"
The reason is the default behavior of a button within a form is to act as a submit button. Submitting, results in the page being reloaded and thus the text field is cleared.
That submits the form & reloads, to prevent it:
onclick="someFunction(); return false;">
Also you should avoid with().