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
Related
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 have using bootstrap v3.3.7 on for my php project. I have included all minified files. But my tooltip is not working.
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="content1">
<div style="padding-left:120px; padding-right:120px">
<form class="form-horizontal" role="form" method="post"
id="formID" enctype="multipart/form-data">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Name of business</label>
<div class="col-sm-8">
<input type="text" class="form-control validate[required]" placeholder="Enter name of your business" name="tbname" value="<?=$b_name?>" >
</div>
</div>
<br>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Area</label>
<div class="col-sm-5">
<select class="form-control" name="area" id="area" data-toggle="tooltip" data-placement="right" title="specify your nearby location">
<option value="">-- Select Area --</option>
<?php
$q = mysqli_query($con, "select * from tbl_areas");
while($result = mysqli_fetch_assoc($q))
{
echo "<option value='$result[areaid]'>$result[area]</option>";
}
?>
</select>
</div>
</div>
<div class="col-sm-7"> <input type="submit" name="btnad" id="btnad" value="Register" class="btn btn-info"/></div>
</form>
</div>
</div>
</div>
<div class="col-md-3">
<div class="right">
<?php include 'include\front_right.php'?>
</div>
</div>
</div><!--row end-->
</div>
I have used here tooltip for only 'select' tag. but still not working.
Please give me solution for this.
Please chekc this demo how it is working
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
Hover over me
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Have you included jquery?
Here is a working example:
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<label for="inputPassword3" class="col-sm-3 control-label">Area</label>
<div class="col-sm-5">
<select class="form-control" name="area" id="area" data-toggle="tooltip" data-placement="bottom" title="specify your nearby location">
<option value="">-- Select Area --</option>
<option value="1">Area 1</option>
<option value="2">Area 2</option>
</select>
</div>
</div>
</div>
I'm trying to use jquery form validator to validate a form that has multiple input fields and a mandatory file upload. For brevity, I reduced 1 text input field and 1 file upload field on my sample. The problem is every time a file is selected for upload then the validation on other field will not function.
< script >
$.validate({
form: '#frmSlide',
modules: 'file',
validateOnBlur: false,
errorMessagePosition: 'top', // Instead of 'element' which is default
scrollToTopOnError: false, // Set this property to true if you have a long form
onError: function($form) {
alert('Failed!');
},
onSuccess: function($form) {
alert('ok!');
return false; // Will stop the submission of the form
},
onElementValidate: function(valid, $el, $form, errorMess) {
console.log('Input ' + $el.attr('name') + ' is ' + (valid ? 'VALID' : 'NOT VALID'));
}
});
$("#imgfile").on('change', function() {
var imgPath = $(this)[0].value;
var extn = imgPath.substring(imgPath.lastIndexOf('.') + 1).toLowerCase();
if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
if (typeof(FileReader) != "undefined") {
var image_holder = $("#image-holder");
image_holder.empty();
var reader = new FileReader();
reader.onload = function(e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image img-thumbnail"
}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[0]);
} else {
alert("This browser does not support FileReader.");
}
} else {
alert("Pls select only images");
}
}); < /script>
<html lang="en">
<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="">
<title></title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Aguafina+Script">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="css/theme.min.css">
<link rel="stylesheet" href="css/styles.css">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link rel="stylesheet" href="css/ie10-viewport-bug-workaround.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css" />
<link rel="stylesheet" href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.8/theme-default.min.css" />
<link rel="stylesheet" href="css/typeaheadjs.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.2.8/jquery.form-validator.min.js"></script>
</head>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data" class="form-horizontal" id="frmSlide">
<div class="form-group">
<label class="col-sm-4 control-label" for="imgfile">Image file</label>
<div class="col-sm-8">
<input type="file" id="imgfile" data-validation="required ratio mime size" data-validation-allowing="jpg, png, gif" />
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-md-offset-4" id="image-holder">
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="seq">Sequence</label>
<div class="col-sm-8">
<input class="form-control server" name="f_seq" id="f_seq" data-validation="number" data-validation-allowing="range[1;4]" type="text" value="" placeholder="Enter 1-4" />
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button name="btnUpd" id="btnUpd" type="submit" class="clsUpd btn btn-primary"><i class="fa fa-floppy-o"></i> Update</button>
</div>
</div>
</form>
</div>
</div>
</div>
</html>
Can anyone shed me light on how to fix it? Thanks.
Just change the ratio validation to data-validation-ratio="1:1" (or any ratio you want) instead of "ratio" in the data-validation. Working fiddle here - https://jsfiddle.net/Sanjeevi/s9o7273r/
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" enctype="multipart/form-data" class="form-horizontal" id="frmSlide">
<div class="form-group">
<label class="col-sm-4 control-label" for="seq">Sequence</label>
<div class="col-sm-8">
<input class="form-control server" name="f_seq" id="f_seq" data-validation="number" data-validation-allowing="range[1;4]" type="text" value="" placeholder="Enter 1-4" />
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="imgfile">Image file</label>
<div class="col-sm-8">
<input type="file" id="imgfile" data-validation="required mime size" data-validation-allowing="jpg, png, gif" data-validation-ratio="1:1"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-8 col-md-offset-4" id="image-holder">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-8">
<button name="btnUpd" id="btnUpd" type="submit" class="clsUpd btn btn-primary"><i class="fa fa-floppy-o"></i> Update</button>
</div>
</div>
</form>
</div>
</div>
</div>
I have a problem with the bootstrap datetime picker. I don't think the JavaScript get's loaded when the page is running. Here is the script that i try to run.
<script type="text/javascript">
$(function () {
$('#inputNewPublicationDate').datetimepicker({
locale: 'dk'
});
});
</script>
and here is the textbox/input box that I want the date picker to be related to.
<div class="form-group">
<div class='input-group date' id='inputNewPublicationDate'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
I am using a masterpage if that is relevant for this problem. Can some one explained to me what I am doing wrong? Here is the generated HTML.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>
Euro Poultry
</title><script src="/Scripts/modernizr-2.6.2.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /><link href="Content/bootstrap.css" rel="stylesheet" /><link href="Content/hover.css" rel="stylesheet" /><link href="Content/MenuCss.css" rel="stylesheet" /><link href="Content/MyCss.css" rel="stylesheet" /><link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" /><link href="Content/bootstrap-datetimepicker.min.css" rel="stylesheet" /><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="../Scripts/moment.min.js"></script>
<script src="../Scripts/bootstrap-datetimepicker.min.js"></script>
<script src="../Scripts/da.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" /></head>
<body>
<form method="post" action="NewProduct" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="TohYngYAQpCAII8RpuQnEalPl/MTArnSEh+ZpM9u8IM0qp+pydvAXRs1biEQdGMzypAlutTdOoQBFlApZ5P0jplQl6tY3em/XaDxCPoZLIUpPnQP/EJu8oNhT1EGKGTU/mY5b/S/GvhXA3nzCXGnQ37DOu9qDZwMxP3xDCwjFxTwNQux/jF9ZH/K24q0Fmgo7cpJALpuVCgmiBZ8nxTPpA==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<script src="/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax-framework på klientsiden blev ikke indlæst.');
//]]>
</script>
<script src="Scripts/jquery-2.1.4.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/respond.js" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=AAyiAYwMfvmwjNSBfIMrBAqfU5exDukMVhrRuZ-PDU01" type="text/javascript"></script>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="E6B80599" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="ziT0MWsXfU8bZf+HxgsyZxmvTOEWqLQAAVF2jCik7SvdOA/hstIfA8BYa8FfUczfqC2x1DvTsx1lx8eC0mAvo2idOZKBotnAxZyCCfL95qaIB3oeDzaq8WPooYr8Erpv" />
</div>
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl16', 'ctl01', [], [], [], 90, 'ctl00');
//]]>
</script>
<div class="MenuBody">
<a href="Overview.aspx">
<div class="MenuBrand">
<p>EP</p>
</div>
</a>
<a href="AllProducts.aspx">
<div class="MenuBtn hvr-underline-from-left">
<p>Produkter</p>
</div>
</a>
<a href="NewProduct.aspx">
<div class="MenuBtn hvr-underline-from-left">
<p>Nyt Produkt</p>
</div>
</a>
</div>
<div class="menuUnderLine">
</div>
<div class="Content fullscreen">
<div class="newProductWrapper">
<div class="myRow">
<div class="mediumCol">
<div class="myRow">
<div class="mediumCol title">
<span id="MainContent_lblNewGtin">GTIN - Global Trade Item Number</span>
</div>
</div>
<div class="myRow">
<div class="mediumCol">
<input name="ctl00$MainContent$txtNewGtin" type="text" id="MainContent_txtNewGtin" class="form-control" />
</div>
</div>
</div>
<div class="mediumCol">
<div class="myRow">
<div class="mediumCol title">
<span id="MainContent_lblNewTargetMarket">Landekode for Target Market</span>
</div>
<div class="mediumCol">
<select name="ctl00$MainContent$ddNewTargetMarket" id="MainContent_ddNewTargetMarket" class="form-control">
</select>
</div>
</div>
</div>
</div>
<div class="myRow">
<div class="smallCol">
<div class="myRow">
<div class="smallCol title">
<span id="MainContent_Label1">Start gyldighedsdato</span>
</div>
<div class="smallCol">
<div class="form-group">
<div class='input-group date' id='inputNewEffectiveDate'>
<input id="txtNewEffectiveDate" type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="smallCol">
<div class="myRow">
<div class="smallCol title">
<span id="MainContent_lblNewPublicationDate">Publikationsdato</span>
</div>
<div class="smallCol">
<div class="form-group">
<div class='input-group date' id='inputNewPublicationDate'>
<input id="txtNewPublicationDate" data-format="dd/MM/yyyy" type='text' class="form-control" />
<span class="input-group-addon" style="z-index: 200;">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#txtNewEffectiveDate').datetimepicker({
locale: 'da'
});
});
</script>
<script type="text/javascript">
$(function () {
$('#inputNewPublicationDate').datetimepicker({
locale: 'da'
});
});
</script>
</div>
</form>
</body>
</html>
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>