why doesn't listener activate? - javascript

I have the following html:
<form id="robokassa" action="//test.robokassa.ru/Index.aspx" method="post">
<input type="text" id="OutSum" name="OutSum" value="" placeholder="Сумма пополнения">
<input type="button" name="addMoney" value="Пополнить" class="btn">
</form>
and following js:
$(function () {
$('#OutSum').keypress(function (e) {
if (e.which == 13) {
alert(2);
return false;
}
});
$("input[name='add-money']").on("click",function(){alert(1);});
});
when I click on button - listener doesn't activate.
What do I wrong ?
JSFIDDLE

change add-money to addMoney in the line $("input.... So it should become:
$("input[name='addMoney']").on("click", function () {
alert(1);
});
Because you gave your input a name of addMoney in your HTML but in your JS, you are trying to access an input with a name of add-money.

Related

javascript autoclick with condition

I want to make a form where if someone type the word ok in the input field, the button will be auto clicked. How can this be done?
<input type="text" id="text"><br><br>
<input id="autoclick" type="button" value="type ok">
Try this:
HTML:
<input type="text" id="text"><br><br>
<input type="button" id="button" value="type ok">
jQuery:
$('#text').on('keyup', function(){
if($(this).val() == 'ok'){
$('#button').trigger('click');
}
})
// this block is for test
$('#button').on('click', function() {
alert('clicked');
});
Working example: https://jsfiddle.net/fnoL4j7m/1
You need to apply keyup event on the input box.
Every time something is entered, it will check if the input is "ok".
If so, a click event is triggered on the button.
$("#text").on('keyup', function(){
if ($(this).val() == 'ok') {
$('input[type="button"]').trigger('click');
}
});
Refer to this: https://jsfiddle.net/dts2aa5o/10/
Try this code:
<input type="text" id="text"><br><br>
<a href="#" id="autoclick">
<input type="button" id="button" value="type ok">
</a>
Jquery:
$('#text').keyup(function(){
if($(this).val()=='ok')
{
$( '#button' ).trigger( "click" );
}
});
you can do something like this :
$('#text').on('keyup', function(){
if($(this).val() == 'ok'){
$('#button').click()
}
})

Combine several events

I have a text field and a button. Either when the button is clicked or enter is hit, a function should be executed.
My approach works is intended. However, is it possible to combine those 2 functions (click and keypress), so that I only have 1?
$("button").click(function() {
getInput();
});
$("#name").keypress(function(e) {
if (e.which == 13) {
getInput();
}
});
function getInput() {
alert($("#name").val())
}
So I need to just append those events.
Here is a fiddle.
You can listen for multiple events using .on('listOfEvents')
Than you just need some additional rules to check when you need to run function.
$("button, #name").on('click keypress', function(e) {
if ($(e.currentTarget).attr('id') == 'submit' || e.which == 13) {
getInput();
}
});
function getInput() {
alert($("#name").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" />
<button id="submit">
OK
</button>
function getInput(){
return $(".result").text($("input").val());
}
$("form").on("submit", (ev)=>{
ev.preventDefault();
// handle submission
getInput();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<input type="text" />
<button>ok</button>
</form>
<div class="result"></div>
you can wrap your input and button in a form and listen for a submit event on that form. Forms can be submitted by pressing enter in an input inside of them or clicking a button that is enclosed
HTML
<form action="">
<input type="text" />
<button>ok</button>
</form>
Javascript
$("form").on("submit", (ev)=>{
ev.preventDefault();
// handle submission
getInput();
})
#eltonkamami answer is one idea and my idea is to provide same class for both input field and button like this :
(But, this will trigger whenever input field is changed)
$(".same").bind("click keypress", function() {
getInput();
});
function getInput() {
console.log($("#name").val())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="name" class="same" />
<button id="submit" class="same">
OK
</button>
Hope it helps :)
We can differentiate a click and keypress by e.key or e.type parameters
Try this,
var getInput = function(e) {
if((e.which & e.which==13) || !e.key)
//e.key is a parameter for keypress event and not for click
alert($("#name").val())
}
$("button").click(getInput);
$("#name").keypress(getInput);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<input type="text" id="name" class="same" />
<button id="submit" class="same">
Click
</button>
$("button,#name").on("click keypress",function(e) {
//alert($(e.currentTarget).html());
if (e.which == 13) {
getInput();
}else if(event.type == 'click'){
getInput();
}
});
function getInput() {
alert($("#name").val())
}

Run javascript function when enter is pressed - JavaScript only no Jquery

Hello I am trying to run a javascript function when I press enter.
Here is my code so far
MY HTML
<!DOCTYPE html>
<html>
<head>
<title>JS Bin</title>
</head>
<body>
<div>
<form id="inputForm">
<label for="userInput">Input : </label>
<span id="userInputSpan">
<input type="text" id="userInput" onkeydown="readInput(this)" />
</span>
</form>
</div>
</body>
</html>
MY JAVASCRIPT
function readInput(e) {
if (e.keyCode == 13) { // 13 is enter key
// Execute code here.
// var temp = e.value;
// console.log(temp);
alert(e.value);
}
}
Here is my JSBin
You're passing this to the event handler and using it as event object.
Pass the element instance and event object to the event handler.
<input type="text" id="userInput" onkeydown="readInput(this, event)" />
^^^^ ^^^^^
And get them in the handler
function readInput(el, e) {
^^ ^
// el: Element
// e: Event object
Updated JSBin
window.onload = function() {
document.getElementById("userInput").focus();
};
function readInput(el, e) {
if (e.keyCode == 13) {
console.log(el.value);
}
}
<div>
<form id="inputForm">
<label for="userInput">Input :</label>
<span id="userInputSpan">
<input type="text" id="userInput" onkeydown="readInput(this, event)"/>
</span>
</form>
</div>
Suggestions:
Use DOMContentLoaded event instead of using onload.
Use addEventListener to bind event
To set focus on page load, use autofocus attribute on input
To prevent form from submit, use return false; or event.preventDefault() from event handler.
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('userInput').addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
console.log(this.value);
e.preventDefault(); // Prevent default action i.e. submit form
// return false;
}
}, false);
});
<div>
<form id="inputForm">
<label for="userInput">Input :</label>
<span id="userInputSpan">
<input type="text" id="userInput" autofocus />
</span>
</form>
</div>
Here is the plain javascript I used. Hope it helps you.
document.onkeyup = function(e){
if(e){
var key = window.event ? e.keyCode : e.which;
}else{
var key = window.event ? event.keyCode : event.which;
}
if (key == '13') {
//Code you would like to execute
}
}
Rather, I'd suggest not to embed JavaScript in HTML.
document.addEventListener('keydown', function(e) {
if ( e.keyCode == 13 ) {
var ele = document.getElementById('userInput');
alert(ele.value);
}
});
<form id="inputForm" >
<label for="userInput">datt1939 : </label>
<span id="userInputSpan">
<input type="text" id="userInput">
</span>
</form>
Since StackOverflow sandbox prevents alert from firing, here's a JSFiddle.
There are couple of ways it can be done
Inline Event
<input type="text" value="" onKeyDown="if(event.keyCode==13) alert('Inline Event');" size="20" id="demo1" placeholder="Inline Event">
Unobtrusive Code using addEventListener
<input type="text" id="demo2" value="" size="20" placeholder="Using addEventListener">
Unobtrusive Code Calling a function
<input type="text" id="demo3" value="" onKeyUp="executeEvent(this,value)" size="20" placeholder="Seperate Handler">
JS
Attaching addEventListener to the DOM element
document.getElementById('demo2').addEventListener('keydown',function(event) {
if (event.keyCode == 13) {
alert('5');
}
})
executeEvent function
function executeEvent(elem,value){
console.log(elem)
if (event.keyCode == 13) {
alert('You entered ' +elem.value);
}
}
Here is JSFIDDLE

How to solve a call to click button without an alert on key down?

I have this code:
<input type="text" name="name" onkeydown="test(event)" />
function test(event){
if (event.keyCode == 13) {
$("#myButton").click();
return false;
}
}
It's not working as expected this way, but if I add an alert to the code like this:
function test(event){
alert("Why?!");
if (event.keyCode == 13) {
$("#myButton").click();
return false;
}
}
My button is this into gsp file:
<button type="submit" class="btn btn-primary" name="myButton" value="Submit">
Button
</button>
My form is this:
<g:form name="searchForm" controller="party" action="searchObject" class="form-horizontal margin-bottom-20">
</g:form>
Then everything works...
Someone can tell me what's going on and how can I solve this problem?
HTML:
<input type="text" name="name" onkeydown="test(event)" />
<button id="myButton">Button</button>
Javascript:
var test = function (event) {
if (event.keyCode == 13) {
$("#myButton").click();
return false;
}
}
$(function () {
$("#myButton").click(function () {
alert("This button was clicked using the enter key");
});
});
If i understood correctly, you are trying to invoke a click event with a key press (in this case, the enter key). Fiddle here: http://jsfiddle.net/jsu2jsx8

Javascript hide after click

I use this code to show a form after a link is clicked:
$(function () {
$('.msg').on('click', function (e) {
e.preventDefault();
$(this).next('.msgarea').show();
});
});
Reply
<form class="msgarea">
<input />
<input type="submit" />
</form>
.msgarea{ display:none; }
Now I need the link "msg" to disappear, what would the code look like? I'm totally new in js
UPDATE:
<script language="javascript" type="text/javascript">
$('.msg').on('click', function (e) {
e.preventDefault();
$(this).next('.msgarea').show();
$(this).hide();
});
</script>
Reply
<form class="msgarea">
<input />
<input type="submit" />
</form>
.msgarea{ display:none; }
What is the problem in saying hide like after show the form like bellow
$('.msg').on('click', function (e) {
e.preventDefault();
$(this).next('.msgarea').show();
$(this).hide();
});
DEMO

Categories

Resources