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>
Related
var count = 2;
var countMax = 5;
function adddt() {
if (count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'block';
count++;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btn1" onclick="adddt()"><i class="fa fa-plus"></i></button> </div>
<div class="row" id="dt-1" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-2" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-3" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
I am using the above code to show multiple divs one by one by clicking on the 'add' button. Now I want to hide the same divs when I click on the delete or minus button. Requesting you please guide how can I solve this. I tried using the show hide method but it would not work for me. Thanks in advance.
you can do like this
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btn1" onclick="adddt()"><i class="fa fa-plus"></i></button> </div>
<div class="row" id="dt-1" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(1)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-2" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(2)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-3" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(3)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
</body>
<script>
var count = 1;
var countMax = 3;
function adddt() {
if(count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'block';
count++;
}
function deletdt(id)
{
document.getElementById('dt-' + id + '').style.display = 'none';
}
</script>
</html>
function delete() {
if(count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'none';
count++;
}
if you change value to "display: none;" instead of "display: block;" it will work.
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>
I am trying to put a dash '-' between two text boxes in a single bootstrap row. I currently have it without a dash, and when I put it in it appends the '-' above the text box rather than next to it.
My code looks like the following (it's using angular 2 with prime-ng library):
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<p-dropdown [options]="fieldsForDropdown" [(ngModel)]="selectedField" (onChange)="onFieldChanged($event)"></p-dropdown>
</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">
<input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" />
</div>
<div class="col-lg-4 col-md-3 col-sm-12">
<input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" />
</div>
<div class="col-lg-1 col-md-3 col-sm-12">
<button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button>
</div>
</div>
I want it to look like this
If possible I would like it to have equal spacing between the four elements as well.
Thanks in advance
Just try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" />
<style>
.bdr {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 15px;
height: 2px;
background-color: #000;
}
#media only screen and (max-width: 550px) {
.mt_10 {
margin-top: 5px;
margin-bottom: 5px;
}
.bdr {
height: 15px;
width: 2px;
}
.mb_40 {
margin-bottom: 40px;
}
}
</style>
</head>
<body>
<div class="col-xs-12 col-sm-12">
<div class=" col-xs-12 col-sm-3 mt_10">
<p-dropdown [options]="fieldsForDropdown" [(ngModel)]="selectedField" (onChange)="onFieldChanged($event)"></p-dropdown>
</div>
<div class="col-xs-12 col-sm-7" style="position:relative; padding:0;">
<div class="col-xs-12 col-sm-6 mt_10 mb_40">
<input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" />
</div>
<div class="bdr"></div>
<div class="col-xs-12 col-sm-6 mt_10">
<input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" />
</div>
</div>
<div class="col-xs-12 col-sm-2 mt_10">
<button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button>
</div>
</div>
</body>
</html>
You can also use bootstrap to split up the input fields and add a - in between like so, this would give you much more flexibility:
<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"/>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<p-dropdown [options]="fieldsForDropdown" [(ngModel)]="selectedField" (onChange)="onFieldChanged($event)"></p-dropdown>
</div>
<div class="col-lg-8 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-5 col-xs-5">
<input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" />
</div>
<div class="col-lg-1 col-xs-1">
<strong>-</strong>
</div>
<div class="col-lg-5 col-xs-5">
<input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" />
</div>
</div>
<div class="col-lg-1 col-md-3 col-sm-12 col-xs-12">
<button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button>
</div>
</div>
try to add a -
and add some css style like
.dash {
float:left;
width:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/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"/>
<div class="row">
<div class="col-xs-3">
<select style="width:100%"><option></option></select>
</div>
<div class="col-xs-3">
<input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" />
</div>
<b class="dash">-</b>
<div class="col-xs-3">
<input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" />
</div>
<div class="col-xs-3">
<button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button>
</div>
</div>
div{
display:inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<p-dropdown [options]="fieldsForDropdown" [(ngModel)]="selectedField" (onChange)="onFieldChanged($event)"></p-dropdown>
</div>
<div class="col-lg-4 col-md-3 col-sm-6 col-xs-6">
<input pInputText class="form-control" type='date' [(ngModel)]="fromVal" (change)="addFROMFilter($event)" />
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-6">
<b>-</b>
</div>
<div class="col-lg-4 col-md-3 col-sm-12">
<input pInputText class="form-control" type='date' [(ngModel)]="toVal" (change)="addTOFilter($event)" />
</div>
<div class="col-lg-1 col-md-3 col-sm-12">
<button class="btn btn-default btn-lg" (click)="applyDateFilter($event)">Apply</button>
</div>
</div>
I am working on a new concept to allow Users to made update their account profile without the need to reload the screen to allow for updates.
Currently, I have two sections that will display the information they already submitted. By default, all field are disabled. Each section contain an "Edit" button to allow for modifications.
The problem that I am facing is that my "Edit" buttons are enabling editing on all sections, not their own section.
Toggle Disabled fields for editing in Sections
Here's the HTML code:
<div class="container">
<p>User should use the "Edit" button to correct any information separated in the form sections, individually.
User should be allowed to submit individual sections with updated information.</p>
<br />
<form name="ReviewInformation" method="post" class="clearfix">
<section id="NameConfirmation" style="background-color: #F1F3F2; border-radius: 8px; clear: both;" class="border-gray">
<!-- FIRST AND NAME SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-users"></i> First & Last Name Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserEmail" name="UserEmail" class="form-control" placeholder="First Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" id="UserPhone" name="UserPhone" class="form-control" placeholder="Last Name" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- /FIRST AND LAST NAME SECTION/ -->
</section>
<div class="col-lg-12 spacer"></div>
<hr class="horizontal-line" />
<div class="spacer"></div>
<section id="EmailPhoneConfirmation" style="background-color: #E5F2F5; border-radius: 8px; clear: both;" class="border-gray">
<!-- EMAIL AND PHONE SECTION -->
<div class="col-lg-12 no-padding no-margin clearfix">
<div class="col-md-11 col-sm-11 col-xs-11 no-padding no-margin">
<h1 class="h1-header"><i class="fa fa-envelope"></i> Email & Phone# Section</h1>
</div>
<div class="col-md-1 col-sm-1 col-xs-1 no-padding no-margin">
<div class="positioning">
<input type="button" class="btn btn-warning" value="Edit" />
</div>
</div>
<div class="col-md-12 spacer"></div>
<div class="col-mg-12 horizontal-line"></div>
<div class="col-md-12 spacer"></div>
</div>
<div class="col-lg-12">
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="emailaccount#isp.com" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
<div class="col-md-6 col-sm-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="801-999-9999" disabled />
<span class="input-group-addon">
<i class="fa fa-user"></i>
</span>
</div>
<div class="spacer"></div>
</div>
</div>
<div class="clearfix"></div>
<!-- EMAIL AND PHONE SECTION -->
</section>
<div class="clearfix"></div>
<hr />
<div class="clearfix"></div>
<div class="align-text-center">
<button type="sumbit" id="myForm" class="btn btn-success">Submit Form</button>
</div>
</form>
</div>
Here's the JS:
<script>
(function($) {
$.fn.toggleDisabled = function() {
return this.each(function() {
var $this = $(this);
if ($this.attr('disabled')) $this.removeAttr('disabled');
else $this.attr('disabled', 'disabled');
});
};
})(jQuery);
$(function() {
//$('input:editlink').click(function() {
$('input:button').click(function() {
$('input:text').toggleDisabled();
});
});
</script>
Here's the DEMO: https://jsfiddle.net/UXEngineer/7tft16pt/35/
So, I am trying to get individual editing enable only the section they are associated with.
Can anyone help with this issue? I would appreciate any help, thanks!
You can use:
$(function() {
$('input:button').click(function() {
$(this).closest('.col-lg-12').next().find('input:text').toggleDisabled();
});
});
Demo: https://jsfiddle.net/7tft16pt/38/
Use closest() -> https://api.jquery.com/closest/ , and next() -> https://api.jquery.com/next/
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?