My HTML file:
<html>
<head>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>
Login
</title>
</head>
<body>
<div class=loginForm>
<p>Worker-ID:<input type=text id=workerID name=workerID /></p>
<p>Password:<input type=password id=workerPassword name=workerPassword /></p>
<input type=submit id=submitLogin name=submitLogin value="Log in"/>
</div>
</body>
</html>
My scripts.js:
$('#workerID').keyup(function() {
alert('key up');
);
It doesn't work at all. I tried everything space,one letter, numbers. The alert doesn't show up. Where is the mistake?
Apart from a typo around your missing }, when your script.js file runs (in the <head> section), the rest of your document does not exist. The easiest way to work around this is to wrap your script in a document ready handler, eg
jQuery(function($) {
$('#workerID').on('keyup', function() {
alert('key up');
});
});
Alternatively, you could move your script to the bottom of the document, eg
<script src="js/scripts.js"></script>
</body>
</html>
or use event delegation which allows you to bind events to a parent element (or the document), eg
$(document).on('keyup', '#workerID', function() {
alert('key up');
});
You're missing the curly bracket to close the function:
$('#workerID').keyup(function() {
alert('key up');
});
Errors like these are usually seen in the browser's JavaScript console.
in HTML
inser id, name,vale in " "
<div class="loginForm">
<p>Worker-ID:<input type="text" id="workerID" name="workerID" /></p>
<p>Password:<input type="password" id="workerPassword" name="workerPassword" /></p>
<input type="submit" id="submitLogin" name="submitLogin" value="Log in"/>
</div>
in js
$('#workerID').keyup(function() {
alert('key up');} // here you forget "}"
);
demo
Syntax is wrong see here
$( document ).ready(function() {
$( "#workerID" ).keyup(function() {
.....................
});
});
change ); to });
Related
Yes, i know this is a duplicate, but all the answers i've read didn't help me, i have a side by side working example, from w3school, it works, and mine doesn't, what i am trying to do is show a tooltip warning the user to use numbers only, but instead, it just refreshes the page.
This is my full html page code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" media="screen" href="Css/style.css"> /*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var previous;
$(document).ready(function(){
$('.btn').tooltip();
});
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
}
});
});
</script>
</head>
<body>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
</body>
</html>
I didn't put the data-toggle:"tooltip" neither a title:"sometitlehere" in the element's options, because i don't really need it.
There are few mistakes in your code,
//it should be title: and not title=
$('#search-form').tooltip({title:"You did good :)"});
The above line initializes the tooltip once your code excutes.
After that if the tooltip title is updated, the tooltip is needed to be destroyed and re-initialized with new title.
var previous;
//Buy Button JS code
$(function () {
$("#searchform").bind('submit', function () {
var newTooltip="";
var str = $('#search-form').val();
if (str.match(/^[0-9]*$/)) {
newTooltip = "You did good :)";
}
else
{
newTooltip = 'Please enter numbers ONLY !';
}
$('#search-form').attr('title', newTooltip).tooltip('fixTitle').tooltip('setContent').tooltip('show');
setTimeout(function(){
$('#search-form').tooltip('hide').tooltip('destroy');
}, 1500);
});
});
<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.11.1/jquery.min.js"></script>
/*---not using the bootstrap css because it messes up the form layout, so i copied every tooltip referenced block to my style.css instead.---*/
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="box">
<form class="search-form" method="post" id="searchform">
<input type="text" id="search-form" name="textbox" placeholder="Please enter your code" required/>
<button type="submit" name="submit" class="btntxt">Validate</button>
<div id="search_results"></div>
</form>
</div>
You are using form so you need to return true or false on validate action so your code should be like
if (str.match(/^[0-9]*$/)) {
$('#search-form').tooltip({title="You did good :)"});
return true;
}
else
{
$('#search-form').tooltip({title="Please enter numbers ONLY !"});
return false;
}
are you initialising the tooltip in the js? - tooltips won't show unless you have this in the code:
$(function(){
$("[data-toggle=tooltip]").tooltip();
})
ok - I just looked at your code - you have :
$('.btn').tooltip();
listed in theree, but your button has the class "btntxt" and you are also trying to get a tooltip on the search form - but that has the id of "search-form" - neither of which will be affected by your tooltip declaration. Best to use the one I gave in the is post so that all elements with tooltips can display them. Setting them to individual classes or ids is too restrictive if you forget that your class or id is not the same as the one listed in the js.
you have this order to your scripts:
<script type="text/javascript" src="js/tooltip.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
Does the tooltip.js require jquery? - if so you may need to invert that order
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
hello I try to grab the submit event, and then I try to pop an alert that says "werks" so I know it works. Note that I have double-checked that the jquery.js file is present in the same folder, and it is the newest jquery.min.js from the jquery website.
When I submit the form, it automatically goes into "get" mode and displays this URL in the URL bar in my browser: "http://localhost/test.html?input=" instead of showing me the alert.
I think jquery is trolling me. Full code below:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('#form').submit(function(event){
event.preventDefault();
alert('werks');
});</script>
</head>
<body>
<form id="form">
<input type="text" name="input">
<input type="submit" value="Send">
</form>
</body>
</html>
Try the following code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<form id="form">
<input type="text" name="input">
<input type="submit" value="Send">
</form>
</body>
<script type="text/javascript">
$( document ).ready(function() {
$('#form').submit(function(event){
event.preventDefault();
alert('werks');
});
});
</script>
</html>
$('#form') selector returns nothing, since the markup form isn't loaded yet. Move script block after form, or wrap it in $(document).ready(function () { ... }).
You need to put it in a document ready statement:
$( document ).ready(function(){
//Code Here
});
<script type="text/javascript">
$(function(){
$('#form').submit(function(event){
event.preventDefault();
alert('werks');
});
</script>
fire your js code on document ready like this:
$(function() {
$('#form').submit(function(event){
event.preventDefault();
alert('werks');
});
});
I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.
It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="Chat.js"></script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea">
</textarea>
<form ID="in">
<input ID="textField" type="text">
<button ID="send" type="button" name="Send" value="send">Send</button>
</form>
</div>
</body>
</html>
Chat.js
function sendText(){
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
}
Don't wrap document ready handler inside sendText() function, use that instead:
$(document).ready(function () {
$('#send').click(sendText);
});
function sendText(){
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
}
Well, it work if you change your button to submit type and bind the event to form submit:
$('#in').submit(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
return false;
});
http://jsfiddle.net/AztSB/
This seems to work for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').html($('#textArea').html() + text);
$('#textField').val('');
});
});
</script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea"></textarea>
<form ID="in">
<input ID="textField" type="text">
<input ID="send" type="button" name="Send" value="send"/>
</form>
</div>
</body>
</html>
Just don't wrap it in your function sendText:
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
You dont need to put it in a function. You can just leave it to Jquery :)
Your stuff in a FIDDLE to see
Jquery:
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').append(text);
$('#textField').val('');
});
UPDATE
Use append() to update the textarea with new text!
On clicking the radio button nothing happens, why?
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="jquery.js">
$("input[name='check1']",$('#Search_By')).change(function()
{
alert('yo');
});
</script>
</head>
<body class="well">
<form action="/abc/readservlet" method="post">
<div class="well" id="Search_By">
<h3><b/>Search BY</h3>
<input type="Radio" name="check1" value="Search BY Key"> Key<br/><br/>
<input type="Radio" name="check1" value="Search By Tablename"> Tab_name
<br/>
</div>
On clicking radio button nothing happens...
If your <script> tag has a src attribute, its contents will be ignored, so your code isn't going to actually run at all.
You need to put your code into a separate script tag and run the code when the document is ready:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#Search_By input[name='check1']")).change(function() {
alert('yo');
});
});
</script>
Or put both of those script tags at the very bottom of the <body> tag.
The javascript code to create the onchange handler should be as follows. Try it out.
...
$("#Search_By input[name='check1']").change(
function()
{
alert('yo');
});
...
i have a form and when i append another field to it i cant use this in my other function.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".registerNums").click(function(){
$("#hello").append('<input type="button" value="register" class="inputMems">');
});
$(".inputMems").click(function(){
alert("hi")
});
});
</script>
</head>
<body>
<div>
<form>
<div id="hello"></div>
<input type="button" value="register mems" class="registerNums">
</form>
</div>
</body>
</html>
look my inputMems button doesnt work : http://jsfiddle.net/Yelesee/3uecqLxn/
To bind events in dynamic content you need to use
$(parent_selector).on(event, selector, callback);
So, essentially it adds the event to the parent element and checks the e.target and fires the event if it matches your selector.
So, in your case you can use,
$('#hello').on('click', '.inputMems', function(){
///do here
});
One more thing you can do is attaching the event listener AFTER the new dom has been created.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".registerNums").click(function(){
$("#hello").append('<input type="button" value="register" class="inputMems">');
});
$("#hello").on('click','.inputMems',function(){console.log("hi");});
});
</script>
</head>
<body>
<div>
<form>
<div id="hello"></div>
<input type="button" value="register mems" class="registerNums">
</form>
</div>
</body>
</html>
Since you are dynamically adding the DOM element with reference to id = hello,
The click() wont work. It will work for the elements that already exist. It won't get bound to elements created dynamically. To do that, you'll have to create a "delegated" binding by using on().
Replace your click event
$(".inputMems").click(function(){
alert("hi")
});
to this!
$("#hello").on("click", "input.inputMems", function(){
alert("Here u go!");
});
JSFIDDLE
As an alternative to the other answers you can define the click handler when you create the element. Although i do recommend to use .on('click', function(){});
$(document).ready(function() {
$(".registerNums").click(function() {
var newInput = $('<input type="button" value="register" class="inputMems">');
newInput.click(function() {
alert("hi")
});
$("#hello").append(newInput);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form>
<div id="hello"></div>
<input type="button" value="register mems" class="registerNums">
</form>
</div>
You have insert
$(".inputMems").click(function(){
alert("hi")
});
inside $(".registerNums").click(function(){
$("#hello").append('<input type="button" value="register" class="inputMems">');
});
.
It should be like this
$(document).ready(function(){
$(".registerNums").click(function(){
$("#hello").html('<input type="button" value="register" class="inputMems">');
$(".inputMems").click(function(){
alert("hi");
});
});
});