I am trying to show the value entered in a text box into a javascript alert(). I have a form on whose onSubmit(), I am calling a function checkLogin() in which I am alerting the value entered in the #test_user text box. Below is the HTML code:
<form id="login_form" name="login_form" method="post" action="verifylogin.php" onSubmit="checkLogin()">
<input type="text" id="test_user" name="username" class="inputbox" placeholder="Username" value=""/>
<input type="password" id="password" name="password" class="inputbox" placeholder="Password" />
<input type="submit" id="login" name="submit" value="LOG IN">
Login with facebook
</form>
And below is the checkLogin() function in js:
function checkLogin() {
var uname = document.getElementById('test_user').value;
alert(uname);
}
I need to show the text entered in the text box with id #test_user in the alert but the alert does not show anything. A blank alert is displayed.
I know this can also be done by passing the value as a parameter to the function but I wanted to know why this way isn't working.
Please help.
UPDATE: It does work when I use this code separately but when I am doing this in a website I am developing, this issue arises. I am not able to understand why this is happening.
UPDATE: Below is all my HTML code:
<!doctype html>
<!--[if IE 7 ]> <html lang="en-gb" class="isie ie7 oldie no-js"> <![endif]-->
<!--[if IE 8 ]> <html lang="en-gb" class="isie ie8 oldie no-js"> <![endif]-->
<!--[if IE 9 ]> <html lang="en-gb" class="isie ie9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en-gb" class="no-js"> <!--<![endif]-->
<head>
<title><?php echo $title?> | App Contest</title>
<meta charset="utf-8">
<meta name="keywords" content="app contest" />
<meta name="description" content="Welcome to App Contest" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>addons/superfish_responsive/superfish.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/updates.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>css/custom.css" type="text/css" />
<!-- This stylesheet only adds some repairs on idevices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php echo base_url(); ?>css/responsive-devices.css" type="text/css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300,400,700,900&v1∓subset=latin,latin-ext" type="text/css" media="screen" id="google_font" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700&v1∓subset=latin,latin-ext" type="text/css" media="screen" id="google_font_body" />
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="<?php echo base_url(); ?>js/jquery-1.8.2.min.js">\x3C/script>')</script>
<script src="<?php echo base_url(); ?>js/jquery.noconflict.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>js/common_functions.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.1/modernizr.min.js" type="text/javascript"></script>
<link rel="shortcut icon" href="<?php echo base_url(); ?>images/favicons/favicon.png">
<link rel="apple-touch-icon" href="<?php echo base_url(); ?>images/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo base_url(); ?>images/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo base_url(); ?>images/favicons/apple-touch-icon-114x114.png">
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="css/fixes.css" />
<![endif]-->
<!--[if lte IE 8]>
<script src="js/respond.js"></script>
<script type="text/javascript">
var $buoop = {vs:{i:8,f:6,o:10.6,s:4,n:9}}
$buoop.ol = window.onload;
window.onload=function(){
try {if ($buoop.ol) $buoop.ol();}catch (e) {}
var e = document.createElement("script");
e.setAttribute("type", "text/javascript");
e.setAttribute("src", "http://browser-update.org/update.js");
document.body.appendChild(e);
}
</script>
<![endif]-->
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Facebook OpenGraph Tags - Replace with your own -->
<meta property="og:title" content="KALLYAS Template HTML"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.hogash.com/demo/kalypso_html/"/>
<meta property="og:image" content="http://www.hogash.com/demo/kalypso_html/images/logo.png"/>
<meta property="og:site_name" content="Kallyas"/>
<meta property="fb:app_id" content=""/> <!-- PUT HERE YOUR OWN APP ID - you could get errors if you don't use this one -->
<meta property="og:description" content="Welcome to KALLYAS Template, a wonderful and premium product for multipurpose websites"/>
<!-- END Facebook OpenGraph Tags -->
<!-- THIS IS THE DARK THEME STYLESEET // REMOVE COMMENTS TO ENABLE -->
<!-- <link rel="stylesheet" href="css/dark-theme.css" type="text/css" /> -->
<!-- END DARK THEME -->
</head>
<body class="">
<!-- ADD AN APPLICATION ID !!
If you want to know how to find out your app id, either search on google for: facebook appid, either go to http://rieglerova.net/how-to-get-a-facebook-app-id/ -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1&appId="; // addyour appId here
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="support_panel" id="sliding_panel">
<div class="container">
<div class="row">
<div class="span9">
<h4 class="m_title">HOW TO SHOP</h4>
<div class="m_content how_to_shop">
<div class="row">
<div class="span3">
<span class="number">1</span> Login or create new account.
</div>
<div class="span3">
<span class="number">2</span> Review your order.
</div>
<div class="span3">
<span class="number">3</span> Payment & <strong>FREE</strong> shipment
</div>
</div>
<p>If you still have problems, please let us know, by sending an email to support#website.com . Thank you!</p>
</div><!-- end how to shop steps -->
</div>
<div class="span3">
<h4 class="m_title">SHOWROOM HOURS</h4>
<div class="m_content">
Mon-Fri 9:00AM - 6:00AM<br>
Sat - 9:00AM-5:00PM<br>
Sundays by appointment only!
</div>
</div>Document.getElementById
</div>
</div>
</div><!-- end support panel -->
<div class="login_register_stuff hide"><!-- Login/Register Modal forms - hidded by default to be opened through modal -->
<div id="login_panel">
<div class="inner-container login-panel">
<h3 class="m_title">SIGN IN YOUR ACCOUNT TO HAVE ACCESS TO DIFFERENT FEATURES</h3>
<form id="login_form" name="login_form" method="post" action="<?php echo base_url(); ?>index.php/verifylogin" onSubmit="checkLogin()">
Login with google
<input type="text" id="test_user" name="username" class="inputbox" placeholder="Username" onblur="checkEmpty(this.value)" />
<input type="password" id="password" name="password" class="inputbox" placeholder="Password" />
<input type="submit" id="login" name="submit" value="LOG IN">
Login with facebook
</form>
<!--
<div class="links">FORGOT YOUR USERNAME? / FORGOT YOUR PASSWORD?</div>
-->
</div>
</div><!-- end login panel -->
<div id="register_panel">
<div class="inner-container register-panel">
<h3 class="m_title">CREATE ACCOUNT</h3>
<form id="register_form" name="register_form" method="post">
<p>
<input type="text" id="reg-username" name="username" class="inputbox" placeholder="Username">
</p>
<p>
<input type="text" id="fullname" name="fullname" class="inputbox" placeholder="Your full name">
</p>
<p>
<input type="text" id="reg-email" name="email" class="inputbox" placeholder="Your email">
</p>
<p>
<input type="password" id="reg-password" name="password" class="inputbox" placeholder="Desired password">
</p>
<p>
<input type="password" id="confirm_password" name="confirm_password" class="inputbox" placeholder="Confirm password">
</p>
<p>
<input type="submit" id="signup" name="submit" value="CREATE MY ACCOUNT">
</p>
</form>
<div class="links">ALREADY HAVE AN ACCOUNT?</div>
</div>
</div><!-- end register panel -->
<div id="forgot_panel">
<div class="inner-container forgot-panel">
<h3 class="m_title">FORGOT YOUR DETAILS?</h3>
<form id="forgot_form" name="forgot_form" method="post">
<p>
<input type="text" id="forgot-email" name="email" class="inputbox" placeholder="Email Address">
</p>
<p>
<input type="submit" id="recover" name="submit" value="SEND MY DETAILS!">
</p>
</form>
<div class="links">AAH, WAIT, I REMEMBER NOW!</div>
</div>
</div><!-- end register panel -->
</div><!-- end login register stuff -->
<div id="page_wrapper">
<header id="header" class="style2">
<div class="container">
<!-- logo -->
<h1 id="logo"><a href="<?php echo base_url(); ?>" style="color:#fff">App Contest
</a></h1>
<ul class="topnav navRight">
<li><a href="#" id="open_sliding_panel">
<span class="icon-remove-circle icon-white"></span>
</a>
</li>
<?php if(isset($username))
{
echo'<li>LOGOUT</li>';
}
else
{
echo '<li>LOGIN</li>';
}?>
</ul><!-- end topnav // right aligned -->
<!-- end topnav // left aligned -->
<script type="text/javascript">
// THIS SCRIPT DETECTS THE ACTIVE ELEMENT AND ADDS ACTIVE CLASS
(function($){
$(document).ready(function(){
var pathname = window.location.pathname,
page = pathname.split(/[/ ]+/).pop(),
menuItems = $('#main_menu a');
menuItems.each(function(){
var mi = $(this),
miHrefs = mi.attr("href"),
miParents = mi.parents('li');
if(page == miHrefs) {
miParents.addClass("active").siblings().removeClass('active');
}
});
});
})(jQuery);
</script>
</div>
</header>
The function checkLogin() is in the file common_functions.js which I have included on line:33 and the login form is at line:129.
try this fiddle, it works for me
http://jsfiddle.net/WR2en/
as you can see the error was
onSubmit="javascript:checkLogin();">
try this
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
function checkLogin()
{
var uname = jQuery('#test_user').val();
if(uname=='')
alert('Enter Username');
else
alert(uname);
//return true; // checklogin true
return false; // checklogin fail
}
</script>
</head>
<body>
<form id="login_form" name="login_form" method="post" action="verifylogin.php" onSubmit="return checkLogin()">
<input type="text" id="test_user" name="username" class="inputbox" placeholder="Username" value=""/>
<input type="password" id="password" name="password" class="inputbox" placeholder="Password" />
<input type="submit" id="login" name="submit" value="LOG IN">
Login with facebook
</form>
</body>
</html>
Related
I have tried all codes avaliable but nothing worked.
Here is the Code :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script>
var text1 = document.getElementById("inhouse");
var text2 = document.getElementById("sahodaya");
function showsum() {
var first_number = parseFloat(text1.value);
if (isNaN(first_number)) first_number = 0;
var second_number = parseFloat(text2.value);
if (isNaN(second_number)) second_number = 0;
var result = first_number + second_number;
document.getElementById("total").value = result;
}
</script>
<title>Sahodaya 25 Report - Form</title>
</head>
<body>
<div class = "container my-3">
<form method="POST">
<fieldset disabled>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Name</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="<?php echo $_SESSION['name']?>" name = "name" value="<?php echo $_SESSION['name']?>">
<label for="disabledTextInput2" class="form-label my-2">Email</label>
<input type="text" id="disabledTextInput2" class="form-control" placeholder="<?php echo $_SESSION['email']?>" name = "email" value="<?php echo $_SESSION['email']?>">
</fieldset>
<label for="inhouse" class="form-label">Inhouse Training Done In Hours</label>
<input type="number" id="inhouse" class="form-control" placeholder="Type Here" name = "inhouse" required oninput="showsum()"><br>
<label for="sahodaya" class="form-label">Sahodaya Training Done In Hours</label>
<input type="number" id="sahodaya" class="form-control" placeholder="JSSC + PSCC (Both)" name = "sahodaya" oninput="showsum()" required><br>
<label for="total" class="form-label">Total Hours Done</label>
<input type="number" id="total" class="form-control" name = "total" value="0"><br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
But this Code is Not Wokring I tried all Solutions Available on Stack Overflow that I seen till now but nothing helped much So i m posting this if somebody can help.
I want to add the value in inhouse and sahodaya and show it in total input field.
But when I m running this it's not wokring. How can i fix this Error.
Try the below code. It should fix the issue.
Full working code snippet:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script>
function add_number() {
var first_number = parseFloat(document.getElementById("inhouse").value);
if (isNaN(first_number)) first_number = 0;
var second_number = parseFloat(document.getElementById("sahodaya").value);
if (isNaN(second_number)) second_number = 0;
var result = first_number + second_number;
document.getElementById("total").value = result;
}
</script>
<title>Sahodaya 25 Report - Form</title>
</head>
<body>
<div class="container my-3">
<form method="POST">
<fieldset disabled>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Name</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="<?php echo $_SESSION['name']?>" name="name" value="<?php echo $_SESSION['name']?>">
<label for="disabledTextInput2" class="form-label my-2">Email</label>
<input type="text" id="disabledTextInput2" class="form-control" placeholder="<?php echo $_SESSION['email']?>" name="email" value="<?php echo $_SESSION['email']?>">
</fieldset>
<label for="inhouse" class="form-label">Inhouse Training Done In Hours</label>
<input type="number" id="inhouse" class="form-control" placeholder="Type Here" name="inhouse" required onkeyup="add_number()"><br>
<label for="sahodaya" class="form-label">Sahodaya Training Done In Hours</label>
<input type="number" id="sahodaya" class="form-control" placeholder="JSSC + PSCC (Both)" name="sahodaya" onkeyup="add_number()" required><br>
<label for="total" class="form-label">Total Hours Done</label>
<input type="number" id="total" class="form-control" name="total" value="0"><br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
You should wrap the document.getElementById call inside the function or should move the script block below your form.
Your document will be rendered line by line by the browser. Since you've your script tag before the form element. the elements were not available when you call the document.getElementById("inhouse") so the var first_number gets undefined and when the form is rendered the element will be available. But still your var is undefined. That's why your code is not getting executed.
I've also refactored your function to arrow function and removed few unnecessary methods.
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Sahodaya 25 Report - Form</title>
</head>
<body>
<div class = "container my-3">
<form method="POST">
<fieldset disabled>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Name</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="<?php echo $_SESSION['name']?>" name = "name" value="<?php echo $_SESSION['name']?>">
<label for="disabledTextInput2" class="form-label my-2">Email</label>
<input type="text" id="disabledTextInput2" class="form-control" placeholder="<?php echo $_SESSION['email']?>" name = "email" value="<?php echo $_SESSION['email']?>">
</fieldset>
<label for="inhouse" class="form-label">Inhouse Training Done In Hours</label>
<input type="number" id="inhouse" class="form-control" placeholder="Type Here" name = "inhouse" required oninput="showSum()"><br>
<label for="sahodaya" class="form-label">Sahodaya Training Done In Hours</label>
<input type="number" id="sahodaya" class="form-control" placeholder="JSSC + PSCC (Both)" name = "sahodaya" oninput="showSum()" required><br>
<label for="total" class="form-label">Total Hours Done</label>
<input type="number" id="total" class="form-control" name = "total" value="0" disabled><br>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<script>
var text1 = document.getElementById("inhouse");
var text2 = document.getElementById("sahodaya");
var resultField = document.getElementById("total");
const showSum = () => {
resultField.value = Number(text1.value) + Number(text2.value);
}
</script>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
I'm trying to create a login system. I want the system to take me to another page "page3.htm" when I press the login button. I have been trying to test my system in jquery, but the code below does not seem to work. Why is that?
The "login.js" file contains:
window.onload =function() {
var loginBtn = document.getElementById('go');
loginBtn.addEventListener('click',function(){
document.location.href = './page3.html';
});
}
The "index.html" file contains:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!--Jquery -->
<script>window.$ = window.jQuery = require('./jquery-3.3.1.min.js');</script>
<!--Jquery end -->
<!--login css -->
<link rel="stylesheet" type="text/css" href="/bootstrap/css/login.css">
<!--login css ends here -->
<!--Database link -->
<script src='dbcon.js'></script>
<!--database link ends -->
<!--login link -->
<script src='login.js'></script>
<!--login link ends -->
<style>
</style>
</head>
<body>
<form>
<h1>Fashion World</h1>
<div class="inset">
<p>
<label for="username">Username</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="password">PASSWORD</label>
<input type="password" name="password" id="password">
</p>
<p>
<input type="checkbox" name="remember" id="remember">
<label for="remember">Remember me for 14 days</label>
</p>
</div>
<p class="p-container">
<span>Forgot password ?</span>
<input type="submit" name="go" id="go" value="Log in">
</p>
</form>
</body>
</html>
I have a problem that is killing me right now because I can't see why it isn't working. I have made a script in one file that works, but when I copy/paste it into the file that I want it to work in, it doesn't work.
Here's the script I just made:
<html>
<body>
<p id="myElement"></p>
<script>
if (window.location.hash == "#hello") {
document.getElementById("myElement").innerHTML = 'Vi har Hello';
} else {
document.getElementById("myElement").innerHTML = '';
}
</script>
</body>
</html>
Here it works, but when I insert it into the file that it was meant for it won't work. Here it is:
<html>
<head>
<title>...</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body id="top">
<div id="forside"></div>
<div class="bgded overlay" style="background-image:url('images/stor_1.png');">
<div id="pageintro" class="hoc clear">
<li>
<p></p><h2>Log ind</h2>
<p id="myElement"></p>
<script>
if (window.location.hash == "#hello") {
document.getElementById("myElement").innerHTML = 'Vi har Hello';
} else {
document.getElementById("myElement").innerHTML = '';
}
</script>
<div id="comments">
<font color="black">
<form action="proces.php" method="post">
<input class="form-control" type="text" id="name" size="22" name="username" placeholder="Brugernavn" required><br>
<input class="form-control" type="password" id="name" size="22" name="pass" placeholder="Kodeord" required><br>
<input type="submit" name="submit" value="Log Ind!">
</form>
</font><br>
<i class="fa fa-chevron-left" aria-hidden="true"> Tilbage til forsiden</i>
</div>
</li>
</div>
</div>
<?php include_once "footer.php"; ?>
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
</body>
</html>
What the script, I am inserting, does is to detect if #Hello is in the URL and if it is, it has to display some text... But it won't work.
Anybody who has an idea about what I could be doing wrong?
your code will only run once when your page document first time load, if you do want to check the hash every time its changed, it is better to put in a change callback.
please also be sure you jQuery relative path is right.
$(function() { // ensure you will execute script after document loaded
$(window).on('hashchange', function() { // put you code in side change callback.
if (window.location.hash == "#hello") {
document.getElementById("myElement").innerHTML = 'Vi har Hello';
} else {
document.getElementById("myElement").innerHTML = '';
}
});
});
<html>
<head>
<title>...</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
<link rel="shortcut icon" href="images/favicon.ico">
</head>
<body id="top">
<div id="forside"></div>
<div class="bgded overlay" style="background-image:url('images/stor_1.png');">
<div id="pageintro" class="hoc clear">
<li>
<p></p>
<h2>Log ind</h2>
<p id="myElement"></p>
<script>
</script>
<div id="comments">
<font color="black">
<form action="proces.php" method="post">
<input class="form-control" type="text" id="name" size="22" name="username" placeholder="Brugernavn" required>
<br>
<input class="form-control" type="password" id="name" size="22" name="pass" placeholder="Kodeord" required>
<br>
<input type="submit" name="submit" value="Log Ind!">
</form>
</font>
<br>
<i class="fa fa-chevron-left" aria-hidden="true"> Tilbage til forsiden</i>
</div>
</li>
</div>
</div>
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
<script type="text/javascript">
$(function() {
$(window).on('hashchange', function() {
if (window.location.hash == "#hello") {
document.getElementById("myElement").innerHTML = 'Vi har Hello';
} else {
document.getElementById("myElement").innerHTML = '';
}
});
});
</script>
</body>
</html>
try adding these
<script src="layout/scripts/jquery.min.js"></script>
<script src="layout/scripts/jquery.mobilemenu.js"></script>
at the top in the head section
I am learning ASP.NET MVC File Uploading without refreshing page. I want that when image is clicked it invoke the file click and open the file selection dialogue and then when user select a file it starts upload automatically.I am using fileupload.js plugin to upload my files.In the demo program it is working nicely but when i try to embed it in my program it is not working. The problem seems to be in my _Layout page where I am referencing the file path. I do not know what I am doing wrong but I have tried every thing. Please help me, Thanks in advance.
_Layout Page:
<!DOCTYPE html>
Head
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Ali Mohsin">
<!-- FavIcon -->
<link rel="shortcut icon" type="image/png" href="~/Content/Images/Icons/favicon.png" />
<title>#ViewBag.Title</title>
<!-- Bootstrap Core CSS -->
<link href="~/Content/Css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<!-- Custom CSS -->
<link href="~/Content/Css/the-big-picture.css" rel="stylesheet">
<link href="~/Content/Css/jquery.fileupload.css" rel="stylesheet" />
<link href="~/Content/Css/font-icon.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Css/jquery.fancybox.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Css/flexslider.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Css/main.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Css/responsive.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Css/animate.min.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:500" rel="stylesheet" type="text/css" />
<!-- ============ Google fonts ============ -->
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet'
type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300,800'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/Content/Css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Advent+Pro:600" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="https://fonts.googleapis.com/css?family=Quicksand:500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister" rel="stylesheet">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.10.3.min.js"></script>
<link href="~/Content/Css/jquery-ui.min.css" rel="stylesheet" />
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<link href="~/Content/Css/Toast.css" rel="stylesheet" />
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="~/Scripts/jquery.fileupload.js"></script>
<style>
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
text-decoration: none;
background-color: #AD6800;
}
</style>
</head>
Body
<body>
<script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.easing.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.flexslider-min.js"></script>
<script src="~/Scripts/jquery.fancybox.pack.js"></script>
<script src="~/Scripts/wow.js" type="text/javascript"></script>
<script src="~/Scripts/retina.min.js"></script>
<script src="~/Scripts/modernizr.js"></script>
<script src="~/Scripts/main.js"></script>
<script src="~/Scripts/jquery.ui.widget.js"></script>
<script src="~/Scripts/jquery.easypiechart.min.js"></script>
<script type="text/javascript">
//WOW Scroll Spy
var wow = new WOW({
//disabled for mobile
mobile: false
});
wow.init();
</script>
<script type="text/javascript">
$(function () {
$(".dropdown").hover(
function () {
$('.dropdown-menu', this).stop(true, true).fadeIn("fast");
$(this).toggleClass('open');
//$('b', this).toggleClass("caret caret-up");
},
function () {
$('.dropdown-menu', this).stop(true, true).fadeOut("fast");
$(this).toggleClass('open');
//$('b', this).toggleClass("caret caret-up");
});
});
</script>
</body>
This is My View
#{
ViewBag.Title = "SignUp";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="container">
<div id="loginbox" style="margin-top: 10%; margin-bottom: 05%;" class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-default" style="background-color:#d9d9d9">
<div class="panel-heading" style="background-color: #FF9900">
<div class="panel-title text-center">#ViewBag.Message #ViewBag.Logout </div>
</div>
<div style="padding-top:30px; border:2px;" class="panel-body">
<!-- Place the anchor tag here to cover both your caption and image -->
<div class="profilepic">
<a id="OpenImgUpload" onclick="trigerClick()">
<div class="caption">
<br /><br /><br />
<h4 class="" style="color:white">Profile Picture</h4>
<p class="" style="color:white">
Upload your profile picture by clicking this Image.
</p>
</div>
<img src="~/Images/WebIcons/user.png" id="profileimage" class="img-responsive img-circle" width="250" style="margin-left:28%">
</a>
</div>
<div class="container" id="mychart">
<span class="chart" data-percent="0">
<span class="percent"></span>
</span>
</div>
<!-- Anchor tag ends covering both image and caption -->
</div>
<input id="fileupload" type="file" name="files[]" style="display:none" />
<form class="form-horizontal" role="form" action="~/Account/CreateAccount" method="post">
#Html.AntiForgeryToken()
Email:
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user" style="color:black;"></i></span>
<input type="email" class="form-control" name="email" placeholder="Email" style="color:black;" required onblur="validateEmail()" id="email"> <span class="input-group-addon" id="addin"><i class="glyphicon glyphicon-ok" style="color:green;" id="success"></i> <i class="glyphicon glyphicon-remove" style="color:red;" id="failure"></i></span>
</div>
Password:
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock" style="color:black;"></i></span>
<input type="password" class="form-control" name="password" placeholder="Password" style="color:black;" required>
</div>
Full Name:
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user" style="color:black;"></i></span>
<input type="text" class="form-control" name="name" placeholder="Full Name" style="color:black;" required>
</div>
Default: Free
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-heart-empty" style="color:black;"></i></span>
<select class="form-control" name="account">
<option value="Free">Account Type</option>
<option value="Free">Free</option>
<option value="Premium">Premium</option>
</select>
</div>
Format: 03331234123
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-phone" style="color:black;"></i></span>
<input type="number" class="form-control" name="mobile" placeholder="Mobile Number" style="color:black;" required min="03000000001" max="03479999999">
</div>
Default: Lahore
<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-heart-empty" style="color:black;"></i></span>
<select class="form-control" name="city">
<option value="Lahore">City</option>
<option value="Islamabad">Islamabad</option>
<option value="Karachi">Karachi</option>
<option value="Lahore">Lahore</option>
<option value="Pishawar">Pishawar</option>
<option value="Queta">Queta</option>
</select>
</div>
<div style="margin-top:10px" class="form-group">
<!-- Button -->
<div class="col-md-12 col-sm-12 controls text-center">
<button type="submit" class="btn btn-borderwhite btn-block">Sign Up </button>
</div>
</div>
<div class="form-group">
<div class="col-md-12 control">
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%">
Already Have an account? Login here.
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var progress = 0;
$('#mychart').hide();
debugger
$('#fileupload').fileupload({
dataType: 'json',
url: '/FileUploader/UploadFiles',
autoUpload: true,
done: function (e, data) {
debugger
$("#dp").attr("src", data.result.url);
}
}).on('fileuploadprogressall', function (e, data) {
debugger
$('#mychart').show();
progress = parseInt(data.loaded / data.total * 100, 10);
//$('.progress .progress-bar').css('width', progress + '%');
$('.chart').easyPieChart({
onStep: function (from, to, percent) {
$(this.el).find('.percent').text(Math.round(progress));
}
});
var chart = window.chart = $('.chart').data('easyPieChart');
chart.update(progress);
if (progress == 100) {
setTimeout(function () { $('#mychart').fadeOut("slow") }, 1500);
}
});
});
$("#success").hide();
$("#failure").hide();
function validateEmail() {
//$("#customimage").show();
var email = $("#email").val();
$.ajax({
type: "POST",
url: "/Account/validateEmail",
data: { email: email },
//dataType: "html",
success: function (response) {
//$("#customimage").hide();
if (response == "Success") {
debugger
$("#success").show();
}
else {
debugger
$("#failure").show();
}
}
});
}
//Open Image upload dialog on Clicking Image
function trigerClick() { $('#fileupload').trigger('click'); }
//On image hover show upload image
$('#profileimage').hover(
function () {
$('.caption').fadeIn(2500); //.fadeIn(250)
}
);
$('#profileimage').mouseleave(
function () {
$('.caption').fadeOut(2500); //.fadeOut(205)
}
);
</script>
And My controller
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ProjectFirstStep.Models;
using System.IO;
namespace ProjectFirstStep.Controllers
{
public class FileUploaderController : Controller
{
Project1stStepEntities db = new Project1stStepEntities();
//
// GET: /FileUploader/
public ActionResult Index()
{
return View();
}
[HttpPost]
public ContentResult UploadFiles()
{
TempImgTable image = new TempImgTable();
foreach (string file in Request.Files)
{
HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
if (hpf.ContentLength == 0)
continue;
string savedFileName = Path.Combine(Server.MapPath("~/Images"), Path.GetFileName(hpf.FileName));
image.name = hpf.FileName;
image.path = savedFileName.Replace("\\", "/").Replace("C:/Users/ali.mohsin/Desktop/New Folder (3)/FileUploadMVC4/", "/").ToString();
db.TempImgTables.Add(image);
db.SaveChanges();
hpf.SaveAs(savedFileName);
}
return Content("{\"url\":\"" + image.path + "\"}", "application/json");
}
}
}
My script which I used is all here
I'm developing an app by Jquery, and signup/login page occurs some problems with the signup/login dialogue. it doesn't come out when I click the trigger button, when I clicked the button, there is just nothing happens.
My home page looks like this:
<html lang="en" class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Home Page</title>
<link rel="stylesheet" href= "css/normalise.css" type="text/css" charset = "utf-8" src = "cordova-2.3.0.js"/>
<link rel="stylesheet" href= "css/jquery.mobile-1.4.5.css" type="text/css" charset = "utf-8" src = "cordova-2.3.0.js"/>
<link rel="stylesheet" href= "css/jquery.mobile.structure-1.4.5.css" type="text/css" charset = "utf-8" src = "cordova-2.3.0.js"/>
<link rel="stylesheet" href= "css/jquery.mobile.theme-1.4.5.css" type="text/css" charset = "utf-8" src = "cordova-2.3.0.js"/>
<link rel="stylesheet" href= "css/signup.css" type="text/css" charset = "utf-8" src = "cordova-2.3.0.js"/>
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style1.css"> <!-- Gem style -->
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/modernizr.js"></script> <!-- Modernizr -->
</head>
<title>Welcome</title>
<body>
<img alt="full screen background image" src="images/background1.png" id="full-screen-background-image" />
<div class="intro__content">
<div class="grid">
<figure class="effect-bubba">
<img src="images/signup.png" alt="img02"/>
<figcaption>
<h2>SIGN <span>UP</span></h2>
View more
</figcaption>
</a>
</figure>
<figure class="effect-bubba">
<img src="images/signin.png" alt="img16"/>
<figcaption>
<h2>SIGN <span>IN</span></h2>
<a href="#cd-login" class="ui-shadow cd-signin" >View more</a>
</figcaption>
</figure>
</div>
</div>
<div class="cd-user-modal"> <!-- this is the entire modal form, including the background -->
<div class="cd-user-modal-container"> <!-- this is the container wrapper -->
<ul class="cd-switcher">
<li>Sign in</li>
<li>New account</li>
</ul>
<div id="cd-login"> <!-- log in form -->
<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-email" for="signin-email">E-mail</label>
<input class="full-width has-padding has-border" id="signin-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-password" for="signin-password">Password</label>
<input class="full-width has-padding has-border" id="signin-password" type="text" placeholder="Password">
Hide
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<input type="checkbox" id="remember-me" checked>
<label for="remember-me">Remember me</label>
</p>
<p class="fieldset">
<input class="full-width" type="submit" value="Login">
</p>
</form>
<p class="cd-form-bottom-message">Forgot your password?</p>
<!-- Close -->
</div> <!-- cd-login -->
<div id="cd-signup"> <!-- sign up form -->
<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-username" for="signup-username">Username</label>
<input class="full-width has-padding has-border" id="signup-username" type="text" placeholder="Username">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-email" for="signup-email">E-mail</label>
<input class="full-width has-padding has-border" id="signup-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<label class="image-replace cd-password" for="signup-password">Password</label>
<input class="full-width has-padding has-border" id="signup-password" type="text" placeholder="Password">
Hide
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<input type="checkbox" id="accept-terms">
<label for="accept-terms">I agree to the Terms</label>
</p>
<p class="fieldset">
<input class="full-width has-padding" type="submit" value="Create account">
</p>
</form>
<!-- Close -->
</div> <!-- cd-signup -->
<div id="cd-reset-password"> <!-- reset password form -->
<p class="cd-form-message">Lost your password? Please enter your email address. You will receive a link to create a new password.</p>
<form class="cd-form">
<p class="fieldset">
<label class="image-replace cd-email" for="reset-email">E-mail</label>
<input class="full-width has-padding has-border" id="reset-email" type="email" placeholder="E-mail">
<span class="cd-error-message">Error message here!</span>
</p>
<p class="fieldset">
<input class="full-width has-padding" type="submit" value="Reset password">
</p>
</form>
<p class="cd-form-bottom-message">Back to log-in</p>
</div> <!-- cd-reset-password -->
Close
</div> <!-- cd-user-modal-container -->
<div id="carbonads-container">
<div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/57881/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script>
</div>
Close
</div> <!-- carbonads-container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="js/main.js"></script> <!-- Gem jQuery -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-48014931-1', 'codyhouse.co');
ga('send', 'pageview');
jQuery(document).ready(function($){
$('.close-carbon-adv').on('click', function(){
$('#carbonads-container').hide();
});
});
</script>
</body>
</html>`