The following code does not drop down and up the div when clicked,It doesn't perform anything.But Im trying the exact code that works here http://jsfiddle.net/vNeXq/
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
</script>
</head>
<body>
<div id="loginWrapper">
<a id="login">Login</a>
<div id="loginForm">
<form name="login" method="post">
<input type="text" name="username" placeholder="Username" />
<input type="password" />
<input type="submit" value="Login" />
</form>
</div>
</div>
</body>
CSS File
#loginWrapper
{
width:400px;
background-color:#F0F0F0;
}
#login
{
cursor:pointer;
}
#loginForm
{
display:none;
}
Pretty sure you haven't included jQuery. The jQuery library is necessary for the script you want to run. You can download a copy of jQuery from here or you can use a copy hosted from Google. jQuery has to be included before the code you want to run.
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="loginWrapper">
<a id="login">Login</a>
<div id="loginForm">
<form name="login" method="post">
<input type="text" name="username" placeholder="Username" />
<input type="password" />
<input type="submit" value="Login" />
</form>
</div>
</div>
<!-- INCLUDE JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
}):
</script>
</body>
</html>
If you have included jQuery in your project you maybe want to wrap your code with a function that executes when the page is loaded, so you are sure everything is there:
$(document).ready(function(){
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
})
You can try like:
<script>
$(document).ready(function(){
$(document).on('click','#login',function(){
$('#loginForm').slideToggle('fast');
});
});
</script>
It seems that are your not including the jQuery library in the head of the html file.
Include the jquery library (it should be before your script):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
In order for jQuery to modify the html document it must wait until the page is ready. You can do this by putting your function into:
$(document).ready(function() {
// your code here
});
So your script will end up looking like:
$(document).ready(function() {
$('#login').click(function(){
$('#loginForm').slideToggle('fast');
});
});
Related
I was asked to develop a web page without a mouse.
The keyboard cursor must be in the input area(example: <input id="input-label" type="text">) immediately when the page is changed.
I tried,
document.querySelector("#input-area").focus();
and
document.querySelector("#input-area").select();
It works with buttons, but does not work in DOMContentLoaded.
document.addEventListener("DOMContentLoaded", function(){
document.querySelector("#input-area").select();
});
How can I solve it?
try this, call it when dom is ready
$(document).ready(function () {
$("#input-area").focus();
});
OR
<input id="input-area" autofocus="autofocus" />
OR
$(function() {
$("#input-area").focus();
});
Try this code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#myAnchor').click(function() {
$('#mustfocus').focus();
});
});
</script>
</head>
<body>
<input type="button" id="myAnchor" value="Get focus">
<input type="text" id="mustfocus"/>
</body>
</html>
How about this one which triggers only during DOM is ready:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
$('#mustfocus').focus();
});
</script>
</head>
<body>
<input type="button" id="myAnchor" value="Get focus">
<input type="text" id="mustfocus"/>
</body>
</html>
<html>
<head>
<script src="js/typeahead.js"></script>
<script>
$(document).ready(function() {
$('input.doctor').typeahead({
name: 'doctor',
remote: 'doctor.php?query=%QUERY'
});
})
</script>
</head>
<body>
<form>
<input type="text" name="doctor" size="30" class="doctor" placeholder="Please Enter City or ZIP code">
</form>
</body>
</html>
error TypeError: $(...).typeahead is not a function
i am also includeing typehead.js file
This is because you did not include the jQuery library, this step is required because the typeahead library requires jQuery to work.
Here, try this instead:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="//netsh.pp.ua/upwork-demo/1/js/typeahead.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("input.doctor").typeahead({
name: "doctor",
remote: "doctor.php?query=%QUERY"
});
});
</script>
</head>
<body>
<form>
<input type="text" name="doctor" size="30" class="doctor" placeholder="Please Enter City or ZIP code" />
</form>
</body>
</html>
keep in mind that you are trying to use my website as a source of script. I mean this line:
<script src="//netsh.pp.ua/upwork-demo/1/js/typeahead.js"></script>
Please use Google to find CDN for this script or use your hosting as script storage.
Please use this link as src for script
https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.js
I'm trying to get text from a text input, append it to a URL, and go to that URL, using Javascript. But when I submit, it appears to just reload the page.
http://jsfiddle.net/E3vv6/
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="main.css" />
<script type="text/javascript">
function loadSearchResult(searchToLoad) {
window.location = "https://encrypted.google.com/search?q=" + searchToLoad;
}
</script>
</head>
<body>
<form onsubmit="loadSearchResult(document.getElementById('googleBox').value)" method="post">
<fieldset>
<legend>Search</legend>
<input type="text" id="googleBox">
</fieldset>
</form>
</body>
</html>
You need to use event.preventDefault() in the submit function.
Live Demo (click).
Further, inline js (onsubmit in your html) is bad practice for a lot of reasons. Here are some: https://www.google.com/search?q=Why+is+inline+js+bad%3F
If would be better to get a reference to the form with javascript and attach the event listener.
<form id="myForm">
<input type="submit" value="Submit">
</form>
JavaScript:
var myForm = document.getElementById('myForm');
myForm.addEventListener('submit', function(e) {
myFunction();
e.preventDefault();
});
function myFunction() {
console.log('submitted!');
}
You need to prevent the default behaviour of the onsubmit.
You could use return false:
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="main.css" />
<script type="text/javascript">
function loadSearchResult(searchToLoad) {
window.location = "https://encrypted.google.com/search?q=" + searchToLoad;
return false;
}
</script>
</head>
<body>
<form onsubmit="return loadSearchResult(document.getElementById('googleBox').value)" method="post">
<fieldset>
<legend>Search</legend>
<input type="text" id="googleBox">
</fieldset>
</form>
</body>
</html>
Here is a simple code which takes input and print it on the same page. But it is not working when I click on button. Please help regarding this.
<html>
<head>
<script>
function changeHTML() {
$("#withjQuery").html($("#theInput").val());
}
</script>
<body>
<input type='text' id='theInput' value='Write here' />
<input type='button' onClick='changeHTML();' value='See what you wrote with jQuery.html'/>
<div id="withjQuery"></div>
</body>
</head>
You do not have jQuery library included in the page
Add
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
ex
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
function changeHTML() {
$("#withjQuery").html($("#theInput").val());
}
</script>
</head>
<body>
<input type='text' id='theInput' value='Write here' />
<input type='button' onClick='changeHTML();' value='See what you wrote with jQuery.html'/>
<div id="withjQuery"></div>
</body>
</html>
Demo: Fiddle
I have a simple login form like below, with an attached jQuery script. I'm trying to make some simple client-side form validation using jQuery. I can't seem to get the blur event to fire, however. I can't think of what I'm doing wrong, I've tried using '.on('blur', fn(){})' but that doesn't work either. Please help!
Here's my HTML file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DMIT 222 - Catalogue Project: Admin Login</title>
<link rel="stylesheet" type="text/css" href="../styles/divs.css" />
<link rel="stylesheet" type="text/css" href="../styles/fonts.css" />
<link rel="stylesheet" type="text/css" href="../styles/tags.css" />
<link rel="stylesheet" type="text/css" href="../styles/tables.css" />
<link rel="stylesheet" type="text/css" href="styles/forms.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../scripts/loginFormValidation.js"></script>
</head>
<body>
<div id="wrapper">
<header>
<h1>Ship Catalogue</h1>
</header>
<div id="mainContent">
<form id="LoginForm" name="LoginForm" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div class="FormRow"><label for="Username">Username:</label><input type="text" name="Username" id="Username" /><p id="userErrors"><?php echo $userErrors; ?></p></div>
<div class="FormRow"><label for="Password">Password:</label><input type="password" name="Password" id="Password" /><p id="passwordErrors"><?php echo $passwordErrors; ?></p></div>
<div class="FormRow"><input type="submit" name="Submit" value="Login!" /></div>
</form>
</div>
<footer>
Site Developed by Logic & Design
</footer>
</div>
</body>
</html>
And here's the loginFormValidation.js script:
$("#Username").blur(function(e){
alert();
if ($("#Username").val() == "") {
$("#userErrors").text("Username must be entered!");
}
});
$("#Password").blur(function(e){
if ($("#Password").val() == "") {
$("#passwordErrors").text("Password must be entered!");
}
});
You need to wrap your events inside jQuery's document.ready function:
$(document).ready(function() {
$("#Username").blur(function(e){
alert();
if ($("#Username").val() == "") {
$("#userErrors").text("Username must be entered!");
}
});
$("#Password").blur(function(e){
if ($("#Password").val() == "") {
$("#passwordErrors").text("Password must be entered!");
}
});
});
Either add your jquery blur code inside
$(document).ready(function() { ...// your blur code here }
OR
at bottom of your page above closing body tag like:
<script type="text/javascript">
//your blur code
</script>
</body>
It works if you add some content to alert. The JS engine threw an error because the alert function was being called with no parameters. I would also recommend binding the event with document.ready()
$(document).ready(function(){
$("#Username").blur(function(e){
alert("something");
if ($("#Username").val() == "") {
$("#userErrors").text("Username must be entered!");
}
});
});
Example: http://jsfiddle.net/PfnGv/