I'm trying to get the key attribute of the <td> tag from the below HTML code.
<td class="xedit editable editable-click editable-open" id="3" key="details" data-original-title="" title="">Javascript library </td>
<div class="popover fade top in editable-container editable-popup" style="top: 289px; left: 534px; display: block;">
<div class="arrow"></div>
<div class="popover-content">
<div>
<div class="editableform-loading" style="display: none;"></div>
<form class="form-inline editableform" style="">
<div class="control-group form-group">
<div>
<div class="editable-input" style="position: relative;">
<input type="text" class="form-control input-sm" style="padding-right: 24px;">
<span class="editable-clear-x">
</span>
</div>
<div class="editable-buttons">
<button type="submit" class="btn btn-primary btn-sm editable-submit">
<i class="glyphicon glyphicon-ok">
</i>
</div>
</div>
</div>
</form>
</div>
jQuery used :
var x = $(this).closest('div').find('.editable-container').closest('td').attr('key'); //Doesn't work
var x = $(this).closest('td').attr('key'); //Doesn't work
Try to use:
var x = $(this).closest('.editable-container').prev().attr('key');
Related
I have the following code which is hidden.
<div id="orderFields" style="display: none;">
<table class="table">
<tbody id="more-tr">
<tr>
<th style="font-weight: bold">Offer</th>
<td class="col-lg-6 col-md-6 col-sm-12">
<input type="text" class="form-control price" id="offer" placeholder="Offer title" value="" novalidate>
</td>
<th style="font-weight: bold">Image</th>
<td class="col-lg-4 col-md-4 col-sm-12">
<img src="" style="max-width:40%;max-height:20%" />
<input type="file" name="image[]" style="background: transparent;border: transparent">
</td>
<td class="col-lg-2 col-md-2 col-sm-12">
<a href="javascript:void(1);" style="width: 10%;">
<span class="voyager-trash remove-this btn-danger" style="padding: 10px; border-radius: 5px;"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
I have a code to a button that adds the tr field from the hidden field when being clicked.
<div class="col-md-12">
<a href="javascript:void(0)" class="btn btn-success btn-xs" id="addMore" style="float: right;">
<i class="fa fa-plus"></i> <span>Add offer(s)</span>
</a>
</div>
And the javascript is the following :
$("#addMore").on("click", function() {
$(".multipleDiv").after($('#orderFields #more-tr').html());
});
The button and tr work perfectly but while submitting a form I am getting data from the div that is hidden. So, I removed the attribute from the div which is hidden. Now, I want to add a name attribute to the input field that is just added after clicking the button. But, again I don't want to add an attribute to the input field of an input tag which is hidden.
How can I achieve that?
Also, Why am I not getting data coming from the <input type="file" name="image"> which is inside the form tag
You can use the clone() and then use the find() to get the input with id offer. Then use the attr() to set the attribute.
$("#addMore").on("click", function() {
let clone = $('#orderFields #more-tr').clone();
let offer = clone.find('input[type="text"]');
offer.attr('name', 'newOffer'); // replace with your value
offer.attr('id', new Date().getTime()); // ID needs to be unique
$(".multipleDiv").append(clone);
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="orderFields" style="display: none;">
<table class="table">
<tbody id="more-tr">
<tr>
<th style="font-weight: bold">Offer</th>
<td class="col-lg-6 col-md-6 col-sm-12">
<input type="text" class="form-control price" id="offer" placeholder="Offer title" value="" novalidate>
</td>
<th style="font-weight: bold">Image</th>
<td class="col-lg-4 col-md-4 col-sm-12">
<img src="" style="max-width:40%;max-height:20%" />
<input type="file" name="image[]" style="background: transparent;border: transparent">
</td>
<td class="col-lg-2 col-md-2 col-sm-12">
<a href="javascript:void(1);" style="width: 10%;">
<span class="voyager-trash remove-this btn-danger" style="padding: 10px; border-radius: 5px;"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<table class="multipleDiv"></table>
<div class="col-md-12">
<a href="javascript:void(0)" class="btn btn-success btn-xs" id="addMore" style="float: right;">
<i class="fa fa-plus"></i> <span>Add offer(s)</span>
</a>
</div>
This is my HTML code:
<div data-repeater-item class="mt-repeater-item prescribeData">
<div class="mt-repeater-cell">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-stethoscope blue-icon-font"></i>
</span>
<input type="text" id="prescribe_test" class="form-control typeahead-prescribetest input-circle-right" placeholder="Prescribe Test">
</div>
<span class="help-block">Name of Investigation</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-stethoscope blue-icon-font"></i>
</span>
<input type="text" id="diagnosis_input" class="form-control typeahead-diagnosis input-circle-right" placeholder="Duration of Investigation (Optional)">
</div>
<span class="help-block">e.g. Once, Weekly, Monthly</span>
</div>
</div>
<div class="col-md-1 pull-right col-sm-6 col-xs-6">
<a href="javascript:;" style="margin-right:20px;" class="btn-circle prescribeAddData btn green-meadow mt-repeater-btn-inline"> <i class="fa fa-plus"></i>
</a>
</div>
</div>
</div>
</div>
I want to get all the input elements data in a variable using a JQuery code:
I am currently using this code:
$(document.body).on('click', 'a.prescribeAddData', function ()
{
console.log($(this).closest($(".prescribeData :input")));
});
But this code doesn't display the data that the elements are holding after inputting in it.
How can I fix this logic?
You can use the find method to find all elements that are children of a specific element then iterate over them, and store the values in an array for example.
var inputFields = $('.prescribeData').find('input');
var values = [];
inputFields.each(function(){
values.push($(this).val())
})
console.log(values)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-repeater-item class="mt-repeater-item prescribeData">
<div class="mt-repeater-cell">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-stethoscope blue-icon-font"></i>
</span>
<input type="text" id="prescribe_test" class="form-control typeahead-prescribetest input-circle-right" placeholder="Prescribe Test">
</div>
<span class="help-block">Name of Investigation</span>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon input-circle-left capsule-lightblue">
<i class="fa fa-stethoscope blue-icon-font"></i>
</span>
<input type="text" id="diagnosis_input" class="form-control typeahead-diagnosis input-circle-right" placeholder="Duration of Investigation (Optional)">
</div>
<span class="help-block">e.g. Once, Weekly, Monthly</span>
</div>
</div>
</div>
</div>
</div>
I'm using a Bootstrap collapsible panel.
Here's the Fidle for it
I'm trying to do the following :
I want to move both the buttons on the Panel header(at the extreme
right end) i.e. exactly opposite to the text "Panel"
But I only want the buttons to be visible when the panel is expanded. And
when the panel is hidden the buttons should be hidden too.
How can I achieve this. What would be the JS for it?
I tried to do the following in JS:
$(document).ready(function () {
$("#btnSearch").hide();
$(".panel-title").click(function () {
$("#btnSearch").show();
});
});
But with this the buttons won't hide when the panel is made to hide.
Try this. I moved your buttons to panel-heading itself and positioned them using position:absolute;.
It is very similar to this bootsnipp
$(".panel-success").on('show.bs.collapse', function() {
$('.buttonCon').addClass('vis');
}).on('hide.bs.collapse', function() {
$('.buttonCon').removeClass('vis');
})
.panel{
position:relative;
}
.buttonCon{
position:absolute;
top:5px;
right:10px;
display:none;
}
.buttonCon.vis{
display:block;
}
<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"/>
<div class="container">
<div class="panel panel-success">
<div class="buttonCon">
<button type="button" class="btn btn-primary" onclick="ReloadData()">
Button1
<span class="glyphicon glyphicon-search" aria-hidden="true" onclick="ReloadData()"></span>
</button>
<button type="reset" class="btn btn-warning" id="clearAll" data-toggle="tooltip" title="btn2">
Buttonn2
<span class="glyphicon glyphicon-remove"></span>
</button>
</div>
<div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;">
<div class="panel-title">
<span class="glyphicon glyphicon-expand"></span> Panel
</div>
</div>
<div class="panel-body collapse" id="body">
<div class="form-group row">
<label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt1" />
</div>
<label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt2" />
</div>
<label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt3" />
</div>
</div>
<div class="form-group row" style="margin-left:auto;margin-right:auto;">
<div class="col-md-2 col-md-offset-5">
</div>
</div>
</div>
</div>
</div>
You can use bootstrap collapse events to achieve it.
$('#accordion').on('shown.bs.collapse', function() {
$(".buttons").show();
})
$('#accordion').on('hidden.bs.collapse', function() {
$(".buttons").hide();
})
Check this fiddle.
The following JsFiddle is another option compared to the answers already given.
Mainly, it prevents the use of position: absolute which can result in a mish-mash of bad things happening. The following jQuery (which is readily available since you are using bootstrap) will work:
$("#js-panel").on('show.bs.collapse', function() {
$('.js-toggle-btn').removeClass('hide');
}).on('hide.bs.collapse', function() {
$('.js-toggle-btn').addClass('hide');
})
Take note that there are events to track whether a panel is currently opening or closing (plus two others), which can be found here.
I would also suggest that you take the time to read some of the documentation/examples found on the bootstrap webpage, only because a lot of your css/html is pretty rough/unnecessarily complex.
Got it working by combining the answers provided by #kittyCat (the updated solution) and #BuddhistBeast .
Here's the Fiddle.
HTML code :
<div class="container">
<div class="panel panel-success" id="js-panel">
<div class="panelButtons">
<button type="reset" class="js-toggle-btn btn-warning pull-right btn-xs hide" id="clearAll" data-toggle="tooltip" title="btn2" style="margin-left:5px;">
Button2
<span class="glyphicon glyphicon-remove"></span>
</button>
<button type="button" class="js-toggle-btn btn btn-primary pull-right btn-xs hide" onclick="ReloadData()">
Button1
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
<div class="panel-heading panelHeader" data-toggle="collapse" data-target="#body" style="cursor:pointer;">
<div class="panel-title">
<span class="glyphicon glyphicon-expand"></span> Panel
</div>
</div>
<div class="panel-body collapse" id="body">
<div class="form-group row">
<label for="Label1" class="col-xs-1 col-md-1 col-form-label">Label 1</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt1" />
</div>
<label for="Label2" class="col-xs-1 col-form-label alignment">Label 2</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt2" />
</div>
<label for="Label3" class="col-xs-1 col-form-label alignment">Label 3</label>
<div class="col-md-2">
<input class="form-control roundedElement" type="text" id="txt3" />
</div>
</div>
</div>
</div>
</div>
JS Code :
$("#js-panel").on('show.bs.collapse', function() {
$('.js-toggle-btn').removeClass('hide');
}).on('hide.bs.collapse', function() {
$('.js-toggle-btn').addClass('hide');
})
I have HTML as shown below. Using CSS, I want to change the background-color of nth child div of every div. If I click on the first More Info button I want to change the color of first child div of every div and so on.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
HTML :
<div class="row" id="empListTable">
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-weight:bold">
Hired
</div>
<div class="col-xs-6 col-sm-3"style="padding-left: 25px;font-weight:bold">
Screened
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 15px;font-weight:bold">
Pre-Qualified
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-weight:bold">
Approved
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
6
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
2
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:12px;color:#888;">
Total Number of <br /> Employees hired
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees screened <br /> via phone or web
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Via Screened <br />employees
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees have <br />recieved tax credits
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:8px">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
</div>
So first, you get the index of the clicked button using the index method, then you can use the nth-child selector to change the background color.
View the solution in full screen mode to see what is happening
var index = 1;
$(".button-container button").on('click', function(){
// this will tell you which index you clicked
$('.to-change div:nth-child('+index+')').css('background-color', 'white');
index = $(this).index('button') + 1;
$('.to-change div:nth-child('+index+')').css('background-color', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" id="empListTable">
<div class="form-group to-change col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-weight:bold">
Hired
</div>
<div class="col-xs-6 col-sm-3"style="padding-left: 25px;font-weight:bold">
Screened
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 15px;font-weight:bold">
Pre-Qualified
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-weight:bold">
Approved
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
6
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
2
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:12px;color:#888;">
Total Number of <br /> Employees hired
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees screened <br /> via phone or web
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Via Screened <br />employees
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees have <br />recieved tax credits
</div>
</div>
<div class="form-group col-md-12 button-container" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:8px">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
</div>
Since you are using AngularJS, you can add ng-style and modify your ng-click to change the div that you want to change. To change the background of the numbers in the corresponding column of your bootstrap row when you click the more info button:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class="row" id="empListTable" ng-app="">
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-weight:bold">
Hired
</div>
<div class="col-xs-6 col-sm-3"style="padding-left: 25px;font-weight:bold">
Screened
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 15px;font-weight:bold">
Pre-Qualified
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-weight:bold">
Approved
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold" ng-style="col0">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold" ng-style="col1">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold" ng-style="col2">
6
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold" ng-style="col3">
2
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:12px;color:#888;">
Total Number of <br /> Employees hired
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees screened <br /> via phone or web
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Via Screened <br />employees
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees have <br />recieved tax credits
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:8px">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="col0={'background-color':'red'}">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="col1={'background-color':'blue'}">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="col2={'background-color':'green'}">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="col3={'background-color':'yellow'}">More Info <i class="fa fa-arrow-down"></i></button>
</div>
</div>
Go to angular ng-style for more examples.
If you want to do the nth child and ensure that its only divs you use this selector:
div:nth-of-type(2) {
background-color: red;
}
div {
min-height: 200px;
}
div > div {
background-color: blue;
}
div > div:nth-of-type(2) {
background-color: red;
}
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
You can use CSS3 nth-child() selector.
.parent > div:nth-child(1)
{
background-color: blue;
}
For more reference, go here.
div
{
height: 50px;
background: gray;
}
.parent > div:nth-child(1)
{
background: blue;
}
<div class="parent">
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</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/