I am working on jquery and javascript. i am using an external library to make a function to work. but the code works fine with firefox. but the issue is with chrome. its not working like mozilla. since i am very new to this field i have googled and didnt find a solution. do i need to install any chrome extension file for this. any help would be appreciated. here is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>login testing</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.3.1/jquery.cookie.min.js"></script>
</head>
<body>
<script>
$(window).load(function(){
$(function()
{
$('#submit').click(function()
{
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
});
</script>
<div id="login">
<form id="loginform">
Uname:
<input type="text" id="uame" name="uname">
Pwd:
<input type="password" id="pwd" name="pwd">
<div class="Button1">
<button type="button" id="submit" value="Login" class="btn" >
Submit
</button>
<button type="reset" id="reset" value="Reset" class="btn">
Clear All
</button>
</div>
</form>
</div>
<div class="container" style="display:none">
Welcome to the naughtyprogrammer website
</div>
</body>
</html>
Related
I am trying to create a webpage for a number game but I cannot get my jQuery to work. I am pretty sure all my placements are in the right spots but nothing happens when I click on the Submit button. Please help!
EDIT: I have also added my JavaScript code to make it easier to understand what I am trying to do.
My HTML CODE:
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/scripts.js"></script>
<title>Ping-Pong</title>
</head>
<body>
<div class="container">
<h1>The Ping Pong Game!</h1>
<div>
<form id="digit">
<div class="form-group">
<label for="input">Type in a number:</label>
<input id="number" class="form-control" type="text">
</div>
<button type="submit" class="btn" id="submit">Submit</button>
</form>
<div id="output"><p>Thanks for playing!</p>
<ul id="list">
</ul>
</div>
</div>
</div>
</body>
</html>
MY JQUERY CODE:
$(document).ready(function() {
$("#digit").submit(function(event) {
event.preventDefault();
var userInput = $("#number").val();
$("#submit").click(function () {
$("#output").append(input(userInput));
toggle();
});
});
});
You don't need to had a listener on the submit button. Your submit listener is doing the job.
input() function is not needed to. Here is what I think you are trying to get :
$(document).ready(function() {
$("#digitreplacer").submit(function(event) {
event.preventDefault();
var userInput = $("#number").val();
$("#output #list").append("<li>"+userInput+"</li>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>Beep-Boop</title>
</head>
<body>
<div class="container">
<h1>The Number Game!</h1>
<div>
<form id="digitreplacer">
<div class="form-group">
<label for="input">Type in a number:</label>
<input id="number" class="form-control" type="text">
</div>
<button type="submit" class="btn" id="submit">Submit</button>
</form>
<div id="output"><p>Thanks for playing!</p>
<ul id="list">
</ul>
</div>
</div>
</div>
</body>
</html>
Also what is toggle() doing ?
Here is a Codepen demo : https://codepen.io/andreds/pen/GyzOKo
Is this what you are trying to get.
$(document).ready(function() {
var userInput;
$("#submit").click(function () {
userInput = $("#number").val();
$("#list").append("<li>" + userInput + "</li>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="js/jquery-3.2.1.js"></script>
<script src="js/scripts.js"></script>
<title>Beep-Boop</title>
</head>
<body>
<div class="container">
<h1>The Number Game!</h1>
<div>
<div class="form-group">
<label for="input">Type in a number:</label>
<input id="number" class="form-control" type="text">
</div>
<button class="btn" id="submit">Submit</button>
<div id="output"><p>Thanks for playing!</p>
<ul id="list">
</ul>
</div>
</div>
</div>
</body>
</html>
Trying to make an animation when clicking on a button, using semantic ui, a framework.
Tried the first code listed in this link => https://semantic-ui.com/modules/transition.html
But it doesn't work
Thanks in advance !
<!DOCTYPE html>
<html>
<head>
<title>Formulaire</title>
<link rel="stylesheet" type="text/css" href="css/form.css">
<link rel="stylesheet" type="text/css" href="css/transition.css">
</head>
<body>
<div id="pContainer">
<div id="C1">
<header id="title">
<label id="titleDescription">Sign in</label>
</header>
<div id="C2">
<form id="formulaire">
<input class="textForm" name="username" type="text" placeholder="Username"></input>
<input class="textForm" name="password" type="password" placeholder="Password"></input>
Forgot password or username ?
<div class="normalDiv">
<input class="button" type="submit" value="Confirm"></input>
<input class="button" type="button" value="Cancel"></input>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" src="js/transition.js"></script>
<script type="text/javascript" src="js/form.js"></script>
</body>
(function(){
var bouttonConfirmer = document.querySelector(".button");
bouttonConfirmer.addEventListener("click",function(event){
var objet = document.querySelector(".textForm");
objet.transition('scale');
alert("oki");
});
})();
The first problem is that semantic-ui requires jquery (see docs) so I included jquery js and semantic-ui css/js.
The second problem is that button[type=submit] will submit the form and cause a page load. So you won't be able to see the transition. I changed the type=button to prevent this.
Lastly I made your <input /> elements self closing.
$("#confirm").on("click", function() {
$('.textForm').transition('scale');
});
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
</head>
<body>
<div id="pContainer">
<div id="C1">
<header id="title">
<label id="titleDescription">Sign in</label>
</header>
<div id="C2">
<form id="formulaire">
<input class="textForm" name="username" type="text" placeholder="Username" />
<input class="textForm" name="password" type="password" placeholder="Password" />
Forgot password or username ?
<div class="normalDiv">
<input class="button" type="button" value="Confirm" id="confirm" />
<input class="button" type="button" value="Cancel" />
</div>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
</body>
</html>
I'm stuck with a strange problem where a javascript function isn't getting invoked when I click on submit button(LOG IN) from inside a form.
<html>
<head>
<title></title>
<script>
$('#loginBtn').click(function () {
$(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
});
</script>
</head>
</html>
Is there anything different I should do here? I'm unable to figure this out. Please could I ask for help?
Remove the extra ) at the end of function hideBtn().
It should look like this
function hideBtn(){
alert('hello');
};
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="app/js/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/js/bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="app/css/bootsnipLogin.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="app/js/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="app/js/login.js"></script>
<link rel="shortcut icon" href="app/image/favicon.ico" />
</head>
<body >
<div class="container">
<div class="card card-container">
<br/>
<center><img src="app/image/wd-logo.gif"></center>
<br/><br/>
<img id="profile-img" class="profile-img-card" src="app/image/avatar_2x.png" />
<br/>
<p id="profile-name" class="profile-name-card"></p>
<form class="form-signin" action="" method="post">
<input id="username" name="username" placeholder="User Name" class="form-control" required autofocus>
<br/><br/><br/>
<input type="password" id="password" name="password" placeholder="Password" class="form-control" required >
<br/><br/><br/>
<div align="center">
<span id = "errorspan"><?php echo $error; ?></span>
</div>
<br/><br/><br/>
<button class="btn btn-lg btn-primary btn-block btn-signin" type="submit" name="submit" id="loginBtn">SIGN IN</button>
</form><!-- /form -->
</div><!-- /card-container -->
</div><!-- /container -->
<script>
$('#loginBtn').click(function(){
// alert('as');
$(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
});
</script>
</body>
</html>
There's an extra ');' in your script. Remove it and it will work.
function hideBtn(){
//$(this).html('<img src="http://www.bba-reman.com/images/fbloader.gif" />');
alert('hello');
}
Remove the extra ) then your code will work properly like below
function hideBtn()
{
alert('Hii');
}
I just started working with JS again (it's been awhile) so I'm a bit rusty! I'm trying to make an input come into focus when a button is pressed. Can anyone explain why this works in the snippet but not in my document?
document.getElementById('Search_Button').addEventListener('click', function ()
{
document.getElementById('Search_Input').focus();
});
<input type="checkbox" id="Search_Button" />
<label for="Search_Button"><div id="Search_Bar_Dismiss_Box"></div></label>
<div id="Search_Box">
<input type="search" name="Search" id="Search_Input" placeholder="Search" />
<label for="Search_Button"><img src="SVG/Back_Arrow.svg" id="Cancel_Search"></label>
</div>
Here is my entire document:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
document.getElementById('Search_Button').addEventListener('click', function()
{
document.getElementById('Search_Input').focus();
});
</script>
</head>
<body>
<input type="checkbox" id="Search_Button" /> <!-- Opens Search Bar -->
<label for="Search_Button"><div id="Search_Bar_Dismiss_Box"></div></label>
<div id="Search_Box">
<input type="search" name="Search" id="Search_Input" placeholder="Search" />
<label for="Search_Button"><img src="SVG/Back_Arrow.svg" id="Cancel_Search"></label>
</div>
</body>
</html>
Working Code: Add script in footer section
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="checkbox" id="Search_Button" /> <!-- Opens Search Bar -->
<!-- SEARCH BAR -->
<label for="Search_Button">
<div id="Search_Bar_Dismiss_Box">
</div> <!-- Search Bar Dismiss Box -->
</label> <!-- Dismisses the search bar -->
<div id="Search_Box">
<input type="search" name="Search" id="Search_Input" placeholder="Search" />
<label for="Search_Button">
<img src="SVG/Back_Arrow.svg" id="Cancel_Search">
</label>
</div> <!-- Search Box -->
<script type="text/javascript">
document.getElementById('Search_Button').addEventListener('click', function (){
document.getElementById('Search_Input').focus();
});
</script>
</body>
</html>
Put your code on window.onload function
window.onload = function()
{
document.getElementById('Search_Button').addEventListener('click', function ()
{
document.getElementById('Search_Input').focus();
});
};
hope it helps
All I've done is to include Angular in my chrome extension and right of the bat it gives me a ´Uncaught ReferenceError:minErr is not defined´. I've tried multiple versions of Angular but the issue persists.
This is all I've done:
<!DOCTYPE html>
<html>
<head>
<title>Typography</title>
<script type="text/javascript" src="bower_components/angular-latest/src/Angular.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
</head>
<link rel="stylesheet" type="text/css" href="css/core.css">
<body ng-app="" ng-csp>
<h1>Typography</h1>
<div class="viewport">
<form>
<label for="baseline">Baseline</label>
<div class="row clear">
<input type="range" name="baselineRange" id="baselineRange" min="0" max="144" step="1" />
<input type="input" name="baseline" id="baseline"/>
</div>
<label for="offset">Baseline offset</label>
<input type="text" name="offset" id="offset" />
<button type="submit" id="send">Generate</button>
</form>
<p>Typography was created by Joel Sanden</p>
</div>
</body>
</html>