HTML onKeyDown-Event calling function and button-click - javascript

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>

Related

Why is my button that calls a function on click making my page reload

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>

How do i alert the textbox input to a user

If i had a button and an input field. How would i alert whatever is in the input field to the user, when the button is clicked.
Explain your code please.
Make it as simple as possible.
<input type="text" id="input" />
<button onclick="displayEnteredText()">Display</button>
<script>
function displayEnteredText() {
var inputText = document.getElementById("input"); // get the element with id "input" which is the textField
alert(inputText.value); // show the value of the input in alert message
}
</script>
One possible approach:
<!DOCTYPE html>
<html>
<head></head>
<body>
<input id="name" value="">
<input type="button" value="show me the name" onclick="alert(document.getElementById('name').value)">
</body>
</html>
Another possible approach:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var buttonElement = document.getElementById('button');
buttonElement.addEventListener('click', function() {
alert(document.getElementById('name').value);
});
}
</script>
</head>
<body>
<input id="name" value="">
<input id="button" type="button" value="show me the name">
</body>
</html>
With the second approach you can separate responsabilities, one person can create de html, and another person can focus in create javascript code.
Exists several ways to do this, but with two examples i think is enough in the current context
<body>
<input type="text" name="basicText" id="alertInput">
<button class="alertButton">Click me!</button>
</body>
<script type="text/javascript">
$(".alertButton").click(function(){
var value = $("#alertInput").val();
alert(value + " was entered");
});
</script>
In order to show what you typed in your alert, you need to reference the value inside the textbox. Since jquery is tagged in the post, I used it to get what's in the text box.
You can also try this one
HTML
<input type="button" id="btnclick" style="width:100px" value="Click Me" />
<input type="text" id="txtbox">
JS
$("#btnclick").click(function(){
var txtvalue = $("#txtbox").val();
alert("User enter " + txtvalue);
})
FIDDLE

html event focus not working

<body onload="getfocus()">
<input id='txt1' />
<input type="button" onblur="getfocus()" value="Test"/>
<script>
function getfocus(){
document.getElementById("txt1").focus();
}
</script>
</body>
In the above code, getfocus() works as expected on body onload but onBlur of button it doesn't work as expected i.e. txt1 doesn't get focus.
kindly, let me know why txt1 is not getting focused on 'onblur' event.
You need to add a tab-index attribute to #txt1, otherwise your browser will tab out of the document (which for me using Chrome went to the address bar).
<body onload="getfocus()">
<input id='txt1' tab-index="1" />
<input type="button" onblur="getfocus()" value="Test"/>
<script>
function getfocus(){
document.getElementById("txt1").focus();
}
</script>
</body>
As an aside, you'll notice that if you add another arbitrary third input after the second one, it will start working too.
Edit
Try adding onblur='getfocus() on #txt and onclick="getfocus()" on the button.
SNIPPET
It seems that tab-index='1' works great.`
<body onload="getfocus()">
<input id='txt1' tab-index='1' onblur='getfocus()' />
<input type="button" onclick="getfocus()" value="Test" />
<script>
function getfocus() {
document.getElementById("txt1").focus();
}
</script>
</body>

How to move a text from an input field to another by pressing a button in javascript

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>

textbox content resets immediately after changing

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>

Categories

Resources