I got a textbox on my form. I want the users to not have the ability to press space in the keyboard. I'm using the code below to disable spacing. I don't understand why it isn't working.
<!DOCTYPE html>
<html>
<head>
<title>Counter File</title>
<script>
function noSpaces()
{
$("input").on("keydown", function (e)
{
return e.which !== 32;
});
}
</script>
</head>
<body>
ID Number: <input type="text" name="IDNumb" id="IDNumb" onkeydown="noSpaces()">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Counter File</title>
</head>
<body>
ID Number: <input type="text" name="IDNumb" id="IDNumb">
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
$("input").on("keydown", function (e)
{
return e.which !== 32;
});
</script>
</html>
The onkeydown event subscribes to the noSpaces function which then re-subcribes using jquery for input for keydown. Pick one or the other but do not subscribe multiple times because now you add a new subscription with every event call.
Added CDN reference to jquery
$(document).ready(function(){
$("input").on("keydown", function (e)
{
return e.which !== 32;
});
})
I guess this code is enough for you you don't need to define onkeydown="noSpaces()" and noSpaces function
I prefer would use keyup and would solve it like this:
<!DOCTYPE html>
<html>
<head>
<title>Counter File</title>
</head>
<body>
ID Number: <input type="text" name="IDNumb" id="IDNumb">
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
$("input").on("keyup", function (e)
{
$(this).val($.trim($(this).val()));
});
</script>
You have not included jquery library. You first have to include that and then this will work.
$("input").on("keydown", function (e) {
return e.which !== 32;
});
Related
I have a form with a button written in a .asp page and when it's clicked, it calls for a js function. I need to figure a way to debug this using developer tools.
<html>
<head>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$("#butReport").bind("click", butReport_onClick);
});
function butReport_onClick() {
var cReportOptions = null;
//some code
};
</script>
</head>
<body>
some code.
</body>
</html>
I don't think this has anything to do with classic ASP.
You are missing the jQuery definition in this code, see here https://www.w3schools.com/jquery/jquery_get_started.asp
I added this
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function() {
$("#butReport").bind("click", butReport_onClick);
});
function butReport_onClick() {
var cReportOptions = null;
//some code
console.log("Hello");
};
</script>
</head>
<body>
<div id="butReport">some code.</div>
</body>
</html>
When I click it I get this:
I hope this helps
button written in asp with id="butReport". Using javascript:
<button id="butReport"></button>
<script type="text/javascript">
var elem=document.getElementById('butReport').onclick = function(){
// some code
// test not using console.log();
document.getElementById('hasilnya').innerHTML = 'test';
}
</script>
<div id="hasilnya" style="margin-top:1em;"></div>
I have tried the tutorial are there, but still could not work, what's wrong with my code?
Parent Page Script:
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.slim.js"></script>
<script>
$(function() {
var money = 20000;
$("#iframe1").contents().find("#nominal").on("change keyup", function() {
var input = $(this);
// remove possible existing message
if( input.next().is("form") )
input.next().remove();
// show message
if( input.val() > money )
alert('Hello');
});
});
</script>
</head>
<body>
<iframe id="iframe1" src="iframe.html">
</iframe>
</body>
</html>
Iframe script:
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
</head>
<body>
<input type="text" id="nominal" value="" />
</body>
</html>
please tell me what was wrong, thanks advance.
In your HTML page
<!DOCTYPE html>
<html>
<head>
<title>Parent</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.1.0.slim.js"></script>
<script>
var money = 20000;
function my_custom_function(input)
{
// remove possible existing message
if( input.next().is("form") ) input.next().remove();
// show message
if( input.val() > money ) alert('Hello');
}
</script>
</head>
<body>
<iframe id="iframe1" src="iframe.html">
</iframe>
</body>
</html>
In your iframe code
<!DOCTYPE html>
<html>
<head>
<title>Iframe</title>
<script>
$(function() {
$("#nominal").change("change", function() {
parent.my_custom_function($(this));
});
$("#nominal").change("keyup", function() {
parent.my_custom_function($(this));
});
});
</script>
</head>
<body>
<input type="text" id="nominal" value="" />
</body>
</html>
Hope this trick will be helpful to you.
You have two possible scenarios:
if you can modify iframe page;
if you can't.
Your problem is that when your javascript run, the content of iframe could be not available, so JQuery cannot "attach" to child controls.
If you can change your iframe code, you can add this script to your iframe page
window.onload = function() {
parent.iframeLoaded();
}
and obviously on the parent page you must change your code to
$(function() {
var money = 20000;
window.iframeLoaded = function() {
$("#iframe1").contents().find('#nominal').on('keyup', null, function(event) {
var input = $(this);
// show message
if( input.val() > money )
alert('Hello');
});
}
});
});
If you instead cannot change iframe html, you cannot bind to keyup event of controls but you can bind to iframe one, so in this case you need to bind keyup of iframe and then filter for #nominal originated event, and your code should be like this
$(function() {
var money = 20000;
$("#iframe1").contents().on('keyup', null, function(event) {
if(event.target.id === 'nominal'){
var input = $("#iframe1").contents().find('#nominal');
// show message
if( input.val() > money )
alert('Hello');
}
});
});
I'm having trouble getting the following to work:
$('#elem').trigger('click');
When I run it, it doesn't trigger a click but it doesn't show any error logs in the console either.
I've also tried the following with no luck:
$('#elem')[0].click();
Any ideas as to what could be going wrong or a solution for this?
Update: Jquery is working and when I inspect the element, #elem does appear (it's an id for a button)
HTML:
<a:button id="elem">My Button</Button>
JQuery:
P.when('A', 'jQuery').execute(function (A, $) {
//when this function is called, it should trigger a button click
triggerButtonClick = function() {
$('#elem').trigger('click');
};
});
Try it in document.ready function, then all dom loads when the document is ready.You can do something like this based on your requirement.
$( document ).ready(function() {
$('#radio').click(function(){
$('#elem')[0].click();
})
});
i have tried this code and it works
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("chk1").click(function(){
$('#usr').trigger('click');
});
});
</script>
</head>
<body>
<form action="sample.php">
<button id="chk1">click</button>
<input class="form-control" type="submit" id="usr">
</form>
</body>
</html>
this code works for me:
$(window).load(function() {
$('#menu_toggle').trigger('click');
});
$(document).ready(function () {
$('#elem').click(function () {
alert('clicked');
$(this).css('color', 'red');
});
$('#elem').trigger('click');
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<body>
<div id="elem" >test</div>
</body>
</html>
How I can call "click" event on input type="file" by calling "context" event on other element?
I am trying this code:
HTML Markup:
<html>
<head>
<title>Title</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<input type="file" id="file"/>
<button id="trigger">Click</button>
</body>
JavaScript file:
window.onload = function() {
window.oncontextmenu = function(){
return false;
};
$("#trigger").on("contextmenu", function(){
$("#file").trigger("click");
});
}
But I haven't got window to choose file, when I click the right mouse button on button with id="trigger".
Resolved!
window.onload = function() {
$("#trigger").mousedown(function(e){
if(e.button == 2){
$("#file").trigger("click");
}
});
}
try like this:
Script:
$('#trigger').click(function() {
$('#file').trigger('click');
});
I am trying to get script src="jsmovermap1.js" to change to script src="jsmovermap2.js" when the user clicks UP on their keyboard. I seem to have this working when you look at page elements, but the page is not updating to the js source. Do you have any advice on how to overcome this?
Many thanks!!!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ireland Map</title>
</head>
<body>
<div id="map">
</div>
<script src="jquery-2.1.1.min.js"></script>
<script src="raphael-min.js"></script>
<script src="jsmovermap1.js" id="s1"></script>
<script>
x=1;
alert(x);
document.addEventListener('keydown', function (evt) {
if (evt.keyCode === 38) {
alert('The "UP" key is being held down...?');
x=x+1;
alert(x);
s1.src="jsmovermap"+(x)+".js"
//s1.src = s1.src.replace("jsmovermap1.js","jsmovermap"+(x)+".js");
}
if (evt.keyCode === 40) {
alert('The "DOWN" key is being held down...?');
x=x-1;
if(x<0){
x=0}
alert(x);
}
});
</script>
</body>
</html>