I'm in a refactoring mood, so I've moved all my login controller stuff out of Autenticate.html and into HTML templates. It was all working before the move but now the Javascript I am using is not being called. I have Javascript like this:
login.js
$(function () {
$("#userNameInput").keypress(function (e) {
if (e.keyCode === 13) $("#passwordInput").focus();
});
$("#passwordInput").keypress(function (e) {
if (e.keyCode === 13) $("#loginButton").click();
});
});
Authenticate.html
<!DOCTYPE html>
<html ng-app="iBOSModule">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /><base href="/">
<title>Welcome to iBOS</title>
<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/angular-route.min.js"></script>
<script src="/Scripts/promise-tracker.js"></script>
<script src="/Scripts/angular-busy.min.js"></script>
<script src="/Scripts/http-interceptor.js"></script>
<script src="/Scripts/ui-bootstrap-tpls-0.12.1.min.js"></script>
<script src="/Scripts/angular-animate.min.js"></script>
<script src="/Scripts/dirPagination.js"></script>
<script src="/Scripts/linq.js"></script>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/angular/components/login/scripts/login.js"></script>
<script src="/angular/components/shared/scripts/app.js"></script>
<script src="/angular/components/login/controllers/login.js"></script>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/acs.css" rel="stylesheet"/>
</head>
<body style="background-image: url(/Content/Images/Jet-Above-The-Clouds.jpg);" ng-cloak>
<div class="container body-content top-buffer">
<ng-include src="'/angular/components/login/templates/login-template.html'"></ng-include>
</div>
</body>
</html>
login-template.html
<div class="well center-block" style="max-width: 489px;" ng-controller="LoginCtrl">
<div class="container">
<div class="row">
<img src="/Content/Images/ibos_logo.png" class="img-responsive" />
</div>
<div class="row col-sm-10 col-sm-offset-1 top-buffer remove-bottom-buffer" ng-show="hasFailed()">
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Invalid credentials. Please try again.
</div>
</div>
<div class="row col-sm-10 col-sm-offset-1 top-buffer remove-bottom-buffer" ng-show="hasFault()">
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
An error occurred.
</div>
</div>
<div class="row col-sm-10 col-sm-offset-1 top-buffer">
<input ng-model="userName" type="text" class="form-control" placeholder="User Name" ng-disabled="isAuthenticating()" id="userNameInput" tabindex="0">
</div>
<div class="row col-sm-10 col-sm-offset-1 top-buffer">
<input ng-model="password" type="password" class="form-control" placeholder="Password" ng-disabled="isAuthenticating()" id="passwordInput" tabindex="1">
</div>
<div class="row col-sm-10 col-sm-offset-1 top-buffer">
<button id="loginButton" class="btn btn-default pull-right" ng-hide="isAuthenticating()" ng-click="authenticate()" tabindex="2">Login</button>
<button id="loadingButton" class="btn btn-default pull-right disabled" ng-show="isAuthenticating()"><img src="/Content/Images/ajax-loader.gif" /></button>
</div>
</div>
</div>
The problem is that the Javascript is not being called when the key press events are fired. The actual bindings are happening - I checked in F12 and the binding function is being called.
Nothing else has changed. Why are the functions not being called?
Related
So I have this code, I am trying to make the login/register buttons to hide the buttons once clicked, they instead flash (hide and quickly come back).
I am new to web development in general so I may be doing something stupid
<!DOCTYPE html>
<html lang="en">
<head>
<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/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--CSS-->
<link rel="stylesheet" href="Login.css" />
<meta charset="utf-8" />
</head>
<body>
<div class="jumbotron">
<!--Login/Register Tabs-->
<ul class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#loginTab">Login</a></li>
<li><a data-toggle="tab" href="#registerTab">Register</a></li>
</ul>
<!--Tabs Content-->
<div class="tab-content">
<div id="loginTab" class="tab-pane active">
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="loginUsernameText" type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="loginPasswordText" type="password" class="form-control" placeholder="Password">
</div>
<button id="loginButton" class="btn btn-primary btn-block">Login</button>
</form>
</div>
<div id="registerTab" class="tab-pane fade">
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="registerUsernameText" type="text" class="form-control" placeholder="Username (3-24 Char)">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="registerPasswordText" type="password" class="form-control" placeholder="Password (3-24 Char)">
</div>
<button id="registerButton" class="btn btn-primary btn-block">Register</button>
</form>
</div>
</div>
</div>
<!--Scripts-->
<script src="Login.js" type="text/javascript"></script>
</body>
</html>
Login.js written with jquery
$('#loginButton').click(function () {
$('#loginButton').addClass('hidden');
$('#registerButton').addClass('hidden');
});
$('#registerButton').click(function () {
$('#loginButton').addClass('hidden');
$('#registerButton').addClass('hidden');
});
Any help is appreciated
SOLVED: settings attribute type="button" for the buttons saved my life, thanks for help!
try the following :
1) Add type="button" attributes to your buttons, might save you from some cases where buttons in form act as submits unless stated as of type=button.
2) Rewrite to the following
var registerButton = $('#registerButton');
var loginButton= $('#loginButton');
function hideButtons(){
registerButton.hide(); // or add your custom class here
loginButton.hide(); // or add your custom class here
return false; // avoid bubling
}
loginButton.on('click',function () {
hideButtons();
});
registerButton.on('click',function () {
hideButtons();
});
Tell me if it worked
I want to use color picker in my form and i have tried below code in my project but its not working. Anything wrong with the code?,
In view blade,
#extends('layouts.blank')
#push('stylesheets')
<link href="https://maxcdn.bootstrapcdn.com/bootstrap
/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/css/bootstrap-colorpicker.min.css" rel="stylesheet">
#endpush
#section('main_container')
<div class="main-content">
<!-- page content -->
<div id="page-wrapper">
<div class="tab-pane active" id="horizontal-form">
<h3 class="blank1">Vehicle Details</h3>
{!! Form::open(array('class' => 'form-horizontal','route' =>
'vehicles.store','method'=>'POST')) !!}
<script type="text/javascript">
$('.colorpicker').colorpicker();
</script>
<div class="row">
<div id="cp2" class="input-group colorpicker colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
{{ Form::close() }}
</div>
</div>
</div>
</div>
#endsection
#pushonce('custom-scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
#endpushonce
I got an empty text box not showing the color.Is there any problem with including css or js files.
How can I solve this ?Can anyone help?
I have used the scripts through #yield scripts then it worked.
You can try this it's worked fine!
<html lang="en">
<head>
<title>Bootstrap Color Picker Plugin Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/css/bootstrap-colorpicker.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/js/bootstrap-colorpicker.js"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap Color Picker Plugin Example</h1>
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="form-control" />
<span class="input-group-addon"><i></i></span>
</div>
</div>
<script type="text/javascript">
$('#cp2').colorpicker();
</script>
</body>
</html>
Make like this
<div class="main-content">
<!-- page content -->
<div id="page-wrapper">
<div class="tab-pane active" id="horizontal-form">
<h3 class="blank1">Vehicle Details</h3>
{!! Form::open(array('class' => 'form-horizontal','route' =>
'vehicles.store','method'=>'POST')) !!}
<script type="text/javascript">
$('#cp2').colorpicker();
</script>
<div class="row">
<div id="cp2" class="input-group colorpicker-component">
<input type="text" value="#00AABB" class="colorpicker form-control" />
<span class="input-group-addon"><i></i></span>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-6">
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
{{ Form::close() }}
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
colorpicker/2.5.1/js/bootstrap-colorpicker.min.js"></script>
Hello i am new to laravel and i'm following this tutorial in order to build a student CMS, i have a datepicker and a bootstrap modal that are supposed to popup when i click form buttons, but nothing shows up even though everything seems okay.
I have a master page that contains all the styles and js references
master.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Creative - Bootstrap 3 Responsive Admin Template">
<meta name="author" content="GeeksLabs">
<meta name="keyword" content="Creative, Dashboard, Admin, Template, Theme, Bootstrap, Responsive, Retina, Minimal">
<link rel="shortcut icon" href="img/favicon.png">
<title>Dashboard</title>
<!-- Bootstrap CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- bootstrap theme -->
<link href="/css/bootstrap-theme.css" rel="stylesheet">
<!--external css-->
<!-- font icon -->
<link href="/css/elegant-icons-style.css" rel="stylesheet" />
<link href="/css/font-awesome.min.css" rel="stylesheet" />
<!-- full calendar css-->
<link href="/assets/fullcalendar/fullcalendar/bootstrap-fullcalendar.css" rel="stylesheet" />
<link href="/assets/fullcalendar/fullcalendar/fullcalendar.css" rel="stylesheet" />
<!-- easy pie chart-->
<link href="/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css" rel="stylesheet" type="text/css" media="screen"/>
<!-- owl carousel -->
<link rel="stylesheet" href="/css/owl.carousel.css" type="text/css">
<link href="/css/jquery-jvectormap-1.2.2.css" rel="stylesheet">
<!-- Custom styles -->
<link rel="stylesheet" href="/css/fullcalendar.css">
<link href="/css/widgets.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
<link href="/css/style-responsive.css" rel="stylesheet" />
<link href="/css/xcharts.min.css" rel=" stylesheet">
<link href="/css/jquery-ui-1.10.4.min.css" rel="stylesheet">
<!-- =======================================================
Theme Name: NiceAdmin
Theme URL: https://bootstrapmade.com/nice-admin-bootstrap-admin-html-template/
Author: BootstrapMade
Author URL: https://bootstrapmade.com
======================================================= -->
</head>
<body>
<section id="container" class="">
#include('layouts.header.header')
#include('layouts.sidebars.sidebar')
<section id="main-content">
<div class="wrapper">
#yield('content')
</div>
</section>
</section>
#yield('script')
<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui-1.10.4.min.js"></script>
<script src="/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.9.2.custom.min.js"></script>
<!-- bootstrap -->
<script src="/js/bootstrap.min.js"></script>
<!-- nice scroll -->
<script src="/js/jquery.scrollTo.min.js"></script>
<script src="/js/jquery.nicescroll.js" type="text/javascript"></script>
<!-- charts scripts -->
<script src="/assets/jquery-knob/js/jquery.knob.js"></script>
<script src="/js/jquery.sparkline.js" type="text/javascript"></script>
<script src="/assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
<script src="/js/owl.carousel.js" ></script>
<!-- jQuery full calendar -->
<<script src="/js/fullcalendar.min.js"></script> <!-- Full Google Calendar - Calendar -->
<script src="/assets/fullcalendar/fullcalendar/fullcalendar.js"></script>
<!--script for this page only-->
<script src="/js/calendar-custom.js"></script>
<script src="/js/jquery.rateit.min.js"></script>
<!-- custom select -->
<script src="/js/jquery.customSelect.min.js" ></script>
<script src="/assets/chart-master/Chart.js"></script>
<!--custome script for all page-->
<script src="/js/scripts.js"></script>
<!-- custom script for this page-->
<script src="/js/sparkline-chart.js"></script>
<script src="/js/easy-pie-chart.js"></script>
<script src="/js/jquery-jvectormap-1.2.2.min.js"></script>
<script src="/js/jquery-jvectormap-world-mill-en.js"></script>
<script src="/js/xcharts.min.js"></script>
<script src="/js/jquery.autosize.min.js"></script>
<script src="/js/jquery.placeholder.min.js"></script>
<script src="/js/gdp-data.js"></script>
<script src="/js/morris.min.js"></script>
<script src="/js/sparklines.js"></script>
<script src="/js/charts.js"></script>
<script src="/js/jquery.slimscroll.min.js"></script>
</body>
</html>
I have another page that contains the form to add a course and the scripts for the datepicker and the modal
manageCourse.blade.php
#extends('layouts.master')
#section('content')
#include('courses.popup.academic')
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><i class="fa fa-file-text-o"></i>Courses</h3>
<ol class="breadcrumb">
<li><i class="fa fa-home"></i>Home</li>
<li><i class="icon_document_alt"></i>Course</li>
<li><i class="fa fa-file-text-o"></i>Manage Course</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<section class="panel panel-default">
<header class="panel-heading">
Manage Course
</header>
<form class="form-horizontal">
<div class="panel-body" style="border-bottom: 1px solid #ccc;">
<div class="form-group">
<div class="col-sm-3">
<label for="academic-year">Academic Year</label>
<div class="input-group">
<select class="form-control" name="academic_id" id="academic_id">
</select>
<div class="input-group-addon" >
<span class="fa fa-plus" id="add-more-academic"></span>
</div>
</div>
</div>
<div class="col-sm-4">
<label for="program">Course</label>
<div class="input-group">
<select class="form-control" name="program_id" id="program_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-5">
<label for="level">Course</label>
<div class="input-group">
<select class="form-control" name="level_id" id="level_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-3">
<label for="shift">Shift</label>
<div class="input-group">
<select class="form-control" name="shift_id" id="shift_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-4">
<label for="time">Time</label>
<div class="input-group">
<select class="form-control" name="time_id" id="time_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-3">
<label for="batch">Batch</label>
<div class="input-group">
<select class="form-control" name="batch_id" id="batch_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-2">
<label for="group">Group</label>
<div class="input-group">
<select class="form-control" name="group_id" id="group_id">
</select>
<div class="input-group-addon">
<span class="fa fa-plus"></span>
</div>
</div>
</div>
<div class="col-sm-3">
<label for="startDate">Start date</label>
<div class="input-group">
<select class="form-control" name="start_date" id="start_date">
</select>
<div class="input-group-addon">
<span class="fa fa-calendar"></span>
</div>
</div>
</div>
<div class="col-sm-4">
<label for="endDate">End date</label>
<div class="input-group">
<select class="form-control" name="end_date" id="end_date">
</select>
<div class="input-group-addon">
<span class="fa fa-calendar"></span>
</div>
</div>
</div>
</div>
</div>
<div class="panel-footer">
<button type="submit" class="btn btn-default btn-sm">Create Course</button>
</div>
</form>
</section>
</div>
</div>
#endsection
#section('script')
<script type="text/javascript">
$('#start_date').datepicker({
changeMonth:true,
changeYear:true,
});
$('#add-more-academic').on('click', function(){
$('#academic-year-show').modal();
});
</script>
#endsection
and the page for the modal
<div class="modal fade" id="academic-year-show" tabindex="-1" role="dialog" aria-labelled-by="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Academic year</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<input type="text" name="academic_year" id="new-academic" class="form-control" placeholder="Academic year">
</div>
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button class="btn btn-success btn-save-academic" type="button">Save</button>
</div>
</div>
</div>
Nothing seems to work, everytime i get this error: Uncaught ReferenceError: $ is not defined. Can anyone tell me why the datepicker and the modal are not showing?
Your section #yield("script") needs to go after <script src="/js/jquery.js"></script> in master.blade.php. Currently, you're trying to run code that is depending on jQuery being available by extending the master layout and yielding a section to the extending template, but when this yield is happening is prior to jQuery being available.
<script src="/js/jquery.js"></script>
#yield('script')
<script src="/js/jquery-ui-1.10.4.min.js"></script>
...
</body>
or
...
<script src="/js/charts.js"></script>
<script src="/js/jquery.slimscroll.min.js"></script>
#yield('script')
</body>
Generally, whenever I do #yield for js, I do it after all other <script> tags in the master layout, but as long as you know your dependencies have been loaded before they're called, all is well.
I have the following code:
<!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">
<link rel="stylesheet" type="text/css" href="flags.min.css">
<link rel="stylesheet" type="text/css" href="css2.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="build/css/intlTelInput.css">
<script src="google/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="padding-right: 6%;padding-left: 6%;margin-right: auto;margin-left: auto;">
<div class="row" style="padding-bottom: 5%;">
<div class="col-lg-offset-1 col-lg-4">
<h3 style="color:#00B0F0;">Choose your phone numbers<h3>
</div>
</div>
<form action="deuxiemeBis.php" method="POST">
<div class="row">
<div class="col-lg-offset-1 col-lg-4">
<div class="form-group phone1">
<input type="tel" class="form-control" name ="phone1" id="phone1">
</div>
<div class="form-group phone2">
<input type="tel" class="form-control" name ="phone2" id="phone2">
</div>
<div class="form-group phone3">
<input type="tel" class="form-control" name ="phone3" id="phone3">
</div>
</div>
</div>
<div class="row">
<br><br>
<div class="col-lg-offset-1 col-lg-3">
<button data-toggle="collapse" data-target="#demo" style="background-color: transparent;border:none;color:#00B0F0;">+More infos</button>
</div>
</div>
<div class="row">
<br>
<div class="form-group col-lg-offset-1 col-lg-6">
<div id="demo" class="collapse">
<textarea rows="3" name="comment" class="form-control" form="usrform"></textarea>
</div>
</div>
</div>
<div class="col-lg-offset-9 col-lg-3"><br>
<div class="form-group">
<button type="submit" class="btn btn-primary" style="width: 50%;background-color: #00B0F0;">Submit</button>
</div>
</div>
</form>
</div>
</body>
</html>
The problem is that when I click on the button "More infos" it submits the form but I just want it to show the collapse div.
So my question is: how do you specify that only the submit button will actually submit the form ?
That's because you didn't specify the type for that button and submit is the default type. Set the type='button' and it will no longer act as a submit.
Please check the below code
HTML
<!-- bootstrap-progressbar -->
<link href="vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<!-- JQVMap -->
<link href="vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
<!-- bootstrap-daterangepicker -->
<link href="vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="build/css/custom.min.css" rel="stylesheet">
<!-- Custom Responsive Style -->
<link href="build/css/responsive.css" rel="stylesheet">
<!--Sweet alerts style-->
<link rel="stylesheet" type="text/css" href="css/sweetalert/sweetalert.css">
<!--Sweet alerts javascript-->
<script src="js/sweetalert/sweetalert.min.js"></script>
<form action="">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel tile fixed_height_320">
<div class="col-sm-12 formset2 msgbox1">
<div class="row">
<div class="form-group">
<h5>Title</h5>
<input type="text" class="form-control" id="titleText" name="titleText" value="" placeholder="i.e LOREM IPSUM">
</div>
</div>
<div class="row pt48">
<div class="col-xs-12 col-md-12 col-sm-12 formbox">
<div class="form-group">
<h5>Text</h5>
<textarea class="form-control vresize" rows="5" id="message" name="message"></textarea>
</div>
<div class="form-group">
<img id="blah" src="#" alt="your image" />
</div>
<div class="form-group text-right"><span id="videoOutput"></span><span id="imageOutput"></span>
<span class="btn btn-default btn-file editacc btnspt hand">ADD VIDEO <input type="file" id="videoURL" name="videoURL"></span><span class="btn btn-default btn-file editacc btnspt hand">ADD IMAGE <input type="file" id="imageURL" name="imageURL"></span>
</div>
</div>
</div>
<div id="education_fields">
</div>
<div class="row text-right pt24"><span class="btn btn-primary bluebt hand" onclick="education_fields();"><span class="glyphicon glyphicon-plus" style="padding-top:5px;"></span> ADD NEW MESSAGE</span></div>
</div>
</div>
</div>
</form>
JQuery
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imageURL").change(function(){
readURL(this);
alert("sdsds");
});
</script>
What should happen here is, when user clicks on "Add Image" button, a file chooser should open. User will select an image. The selected image will be previewed in the web page. But at the moment the "Preview" part is not taking place. What is wrong here?
Your code is working fine, you just need to add jquery in your Code like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Below working snippet
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imageURL").change(function() {
readURL(this);
alert("sdsds");
});
#blah{width:200px;height:200px}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form action="">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel tile fixed_height_320">
<div class="col-sm-12 formset2 msgbox1">
<div class="row">
<div class="form-group">
<h5>Title</h5>
<input type="text" class="form-control" id="titleText" name="titleText" value="" placeholder="i.e LOREM IPSUM">
</div>
</div>
<div class="row pt48">
<div class="col-xs-12 col-md-12 col-sm-12 formbox">
<div class="form-group">
<h5>Text</h5>
<textarea class="form-control vresize" rows="5" id="message" name="message"></textarea>
</div>
<div class="form-group">
<img id="blah" src="#" alt="your image" />
</div>
<div class="form-group text-right"><span id="videoOutput"></span><span id="imageOutput"></span>
<span class="btn btn-default btn-file editacc btnspt hand">ADD VIDEO <input type="file" id="videoURL" name="videoURL"></span><span class="btn btn-default btn-file editacc btnspt hand">ADD IMAGE <input type="file" id="imageURL" name="imageURL"></span>
</div>
</div>
</div>
<div id="education_fields">
</div>
<div class="row text-right pt24"><span class="btn btn-primary bluebt hand" onclick="education_fields();"><span class="glyphicon glyphicon-plus" style="padding-top:5px;"></span> ADD NEW MESSAGE</span>
</div>
</div>
</div>
</div>
</form>