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');
});
});
Related
This code is trying to change a paragraph element in the html, but nothing in the script element seems to even be recognized
We have tried many different variations of this code to try to understand what isn't working, but nothing in the script element is even recognized
<!DOCTYPE html>
<html>
<head>
<h3>Final Schedule</h3>
</head>
<body>
<p id ="fs">hi2</p>
<input id="request" type="button" value="Get Final Schedule">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
</body>
</html>
I want the code to change the paragraph element to something else, but nothing is working, and the console.log()'s aren't working at all
You can't put your code inside the script element for jQuery. Instead add another script tag below it with your code.
<!DOCTYPE html>
<html>
<head>
<h3>Final Schedule</h3>
</head>
<body>
<p id ="fs">hi2</p>
<input id="request" type="button" value="Get Final Schedule">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
</body>
</html>
A script tag can't have both src and internal text code. You need two tags
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
you need 2 script tags, 1 to list the jquery library you're using and 1 to write the actual code
Try making one <script> tag for jQuery (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>) and another one for your code:
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
You are using a rather old version of jQuery and might want to update to a more recent one
A script tag can either have an src attribute, requiring a script file, OR script content directly, not both. So just make a second script block with the code you'd like to execute:
<p id ="fs">hi2</p>
<input id="request" type="button" value="Get Final Schedule">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function(){
console.log("hi");
$("#request").click(requestClicked);
console.log("done2");
});
console.log("h")
function requestClicked(){
$("#fs").html("ohafhiohfos");
console.log("done");
};
</script>
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 });
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');
});
...
Kindly notify me I am explaining it well or not. I'm using .append() to repeat a div inside a page.
HTML
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append("<div class='Box'>I'm new box by prepend</div>");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<button id="num">Click Me</button>
/body>
</html>
This works good when I add a div repeatedly. But I like to call it externally like the below code.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append($('#Box'));
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
/body>
</html>
Why is this not working?
Try using clone():
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$(".Box:first").clone().appendTo("#form");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
</body>
</html>
You have to create a new element before adding it.
Demo
try this
$(document).ready(function(){
$("#num").click(function () {
$(".Box").first().clone().appendTo("#form");
});
});
Try something like this:-
$("#parent_div").append('<div id="created_div"></div>');
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')"></span>
</body>
</html>
Here, I can't understand why it say always
[ReferenceError: view_more is not defined]
I got the same problem today.
My situation was like this:
.html file:
<head>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/functions.js"></script>
</head>
<body>
<div class="lc-form-holder">
<form action="#" method="post">
[...]
<span onclick="myFunction();">NEXT</span>
</form>
</div>
</body>
and .js file:
$(document).ready(function() {
function myFunction() {
console.log('click click');
}
});
When I clicked on <span> I got an error Uncaught ReferenceError: myFuncion is not defined.
But when I do this in .js file (no document.ready):
function myFunction() {
console.log('click click');
}
Everything work just fine.
I don't know is this helpful but I wanna share it if someone check this question in future.
Try this first
<body>
<span onClick="alert('1');"></span>
if the above code works then there must exists others javascript which are actually got error prior to execute your code.
<span onClick="view_more('1')">Test</span>
Add text and then click on text
Working at my end
This is my code --
<html>
<head>
<script>
function view_more(pg_no){
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="view_more('1')">gfgf</span>
</body>
</html>
EDIT
try using this code --
<html>
<head>
<script type="text/javascript">
function view_more(pg_no)
{
alert(pg_no);
}
</script>
</head>
<body>
<span onClick="javascript:view_more('1');">gfgf</span>
</body>
</html>