The problem I am having is that my JQuery checked event only seems to be working once. My aim is for textboxes to be enabled when the corresponding checkbox is checked. Here is a cut down version of the HTML:
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="forenameCheck" name="forenameCheck" onchange="valueChanged()">
<label for="forename" class="control-label">Forename</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="forename" disabled name="forename" placeholder="Forename">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="surnameCheck" name="surnameCheck" onchange="valueChanged()">
<label for="surname" class="control-label">Surname</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="surname" disabled name="surname" placeholder="Surname">
</div>
</div>
</div>
and this is the JQuery:
function valueChanged()
{
if($("#forenameCheck").is(":checked")){
$("#forename").prop("disabled",false);
}
else{
$("#forename").prop("disabled",true);
}
if($("#surnameCheck").is(":checked")){
$("#surname").prop("disabled",false);
}
else{
$("#surname").prop("disabled",true);
}
}
I am very new to JQuery and have no idea why this isn't working. "Forename" works fine but "Surname" does not. This is the JSFiddle of the code. What's strange is that it does not work at all on JSFiddle. It's also worth noting that i'm using bootstrap with this too.
If anyone can help it would be much appreciated!
I would handle each element separately.
$("#forenameCheck").change(function() {
var isDisabled = !$(this).is(":checked");
$("#forename").prop("disabled", isDisabled);
});
It would be better to handle each element separately in your case. Here is the code:
$("#forenameCheck").change(function() {
var isDisabled = !$(this).is(":checked");
$("#forename").prop("disabled", isDisabled);
});
$("#surnameCheck").change(function() {
var isDisabled = !$(this).is(":checked");
$("#surname").prop("disabled", isDisabled);
});
Here is an updated JSFiddle
Update
I just tried the following code (not in JSFiddle, just in a plain html file) and it works.
<script type='text/javascript' src='http://code.jquery.com/jquery-compat-git.js'></script>
<script>
function valueChanged()
{
if($("#forenameCheck").is(":checked")){
$("#forename").prop("disabled",false);
}
else{
$("#forename").prop("disabled",true);
}
if($("#surnameCheck").is(":checked")){
$("#surname").prop("disabled",false);
}
else{
$("#surname").prop("disabled",true);
}
}
</script>
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="forenameCheck" name="forenameCheck" onchange="valueChanged()">
<label for="forename" class="control-label">Forename</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="forename" disabled name="forename" placeholder="Forename">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="surnameCheck" name="surnameCheck" onchange="valueChanged()">
<label for="surname" class="control-label">Surname</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="surname" disabled name="surname" placeholder="Surname">
</div>
</div>
</div>
It seems it is not working in JSFiddle because of how the code is loaded in it. It is giving the following JavaScript error:
Uncaught ReferenceError: valueChanged is not defined
If you view the source of the JSFiddle output you will see that the JavaScript code is wrapped in window.onload=function(){ and this might be causing issues.
Your code is far too complicated. Replace onchange="valueChanged()" with onchange="valueChanged(this)" and use this javascript:
function valueChanged(button) {
button.parentNode.nextElementSibling.childNodes[1].disabled=!button.checked;
}
Result:
function valueChanged(button) {
button.parentNode.nextElementSibling.childNodes[1].disabled=!button.checked;
}
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="forenameCheck" name="forenameCheck" onchange="valueChanged(this)">
<label for="forename" class="control-label">Forename</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="forename" disabled name="forename" placeholder="Forename">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="surnameCheck" name="surnameCheck" onchange="valueChanged(this)">
<label for="surname" class="control-label">Surname</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="surname" disabled name="surname" placeholder="Surname">
</div>
</div>
While we're unable to answer the question of "why isn't my code working," since the code in your question is apparently dissimilar to the code you attempted to type1, I'd like to offer a simple plain JavaScript alternative to the posted solutions.
This approach binds the event-handler using JavaScript itself, in order for easier future maintenance (since it prevents having to search the HTML to update the function calls) and applies the same function to each of the check-boxes. This approach allows for the same function to handle the change event of each check-box, rather than individually binding a change event-handler to every check-box element on the page, which is unnecessarily repetitive (and rapidly inflates the document size).
This is dependant upon the relationship of the check-box ids and their associated <input /> elements' id (though an alternative, below, is posted which uses the structure of the HTML):
// re-naming the function according what it does, this is
// entirely personal, so change, or revert, according to taste:
function changeToggle() {
// the changed check-box ('this' is passed in
// via the use of addEventListener(), later:
var checkbox = this,
// replacing the 'Check' from the element's id
// with an empty string (to get the id of the
// associated <input />:
id = checkbox.id.replace('Check', ''),
// retrieving the associated <input />:
input = document.getElementById(id);
// updating the disabled property of the <input />,
// to be the opposite of the checked state of
// the check-box:
input.disabled = !checkbox.checked;
}
// retrieving all <input /> elements that are descendants of
// an element with the class of 'row':
var checkboxes = document.querySelectorAll('.row input[type=checkbox]');
// using Array.prototype.forEach, and Function.prototype.call,
// to iterate over the NodeList returned by querySelectorAll():
Array.prototype.forEach.call(checkboxes, function(check) {
// check is the array-element of the array we're currently
// iterating, in this case the check-box nodes; here we're
// binding a change event-handler, naming the function
// created earlier:
check.addEventListener('change', changeToggle);
});
function changeToggle() {
var checkbox = this,
id = checkbox.id.replace('Check', ''),
input = document.getElementById(id);
input.disabled = !checkbox.checked;
}
var checkboxes = document.querySelectorAll('.row input[type=checkbox]');
Array.prototype.forEach.call(checkboxes, function(check) {
check.addEventListener('change', changeToggle);
});
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="forenameCheck" name="forenameCheck" />
<label for="forename" class="control-label">Forename</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="forename" disabled name="forename" placeholder="Forename" />
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="surnameCheck" name="surnameCheck" />
<label for="surname" class="control-label">Surname</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="surname" disabled name="surname" placeholder="Surname" />
</div>
</div>
</div>
To use the HTML structure, particularly that the <label> for the associated <input /> is the next element-sibling to the check-box:
function changeToggle() {
var checkbox = this,
// retrieving the nextElementSibling (the first
// element that follows as a sibling, rather than
// nextSibling, which includes comment, and text,
// nodes):
label = checkbox.nextElementSibling,
// accessing the HTMLLabelElement's htmlFor
// property, to retrieve the string from its
// 'for' attribute (getAttribute('for') would
// also work):
id = label.htmlFor,
input = document.getElementById(id);
// as above:
input.disabled = !checkbox.checked;
}
function changeToggle() {
var checkbox = this,
label = checkbox.nextElementSibling,
id = label.htmlFor,
input = document.getElementById(id);
input.disabled = !checkbox.checked;
}
var checkboxes = document.querySelectorAll('.row input[type=checkbox]');
Array.prototype.forEach.call(checkboxes, function(check) {
check.addEventListener('change', changeToggle);
});
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="forenameCheck" name="forenameCheck" />
<label for="forename" class="control-label">Forename</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="forename" disabled name="forename" placeholder="Forename" />
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-lg-3 col-md-3 col-xs-3">
<input type="checkbox" class="" id="surnameCheck" name="surnameCheck" />
<label for="surname" class="control-label">Surname</label>
</div>
<div class="col-lg-7 col-md-7 col-xs-7">
<input type="text" class="form-control" id="surname" disabled name="surname" placeholder="Surname" />
</div>
</div>
</div>
References:
Array.prototype.forEach().
document.querySelectorAll().
EventTarget.addEventListener().
Function.prototype.call().
HTMLLabelElement.
Node.nextElementSibling.
Footnotes:
Your comment, below the question, addressing Pointy:
#Pointy Thank you for pointing that out. I didn't see that there. The text editor must have automatically put them there as I was typing.
Source.
Related
can you help me solve my problem
I want to get the value of codeIsbn which is in the jquery keydown function, then I will place it in the value bookCode
let codeIsbn;
$('#bookISBN').keydown(function(){
let bookIsbn = $('#bookISBN').val();
let splitISBN = bookIsbn.split('-');
codeIsbn = splitISBN[1]+'-'+splitISBN[2]+'-'+splitISBN[3];
//console.log(codeIsbn);
});
console.log(codeIsbn);
$('#bookCode').val(codeIsbn);
Html Code
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="form-group">
<label for="">ISBN Buku</label>
<input type="text" name="isbnBuku" class="form-control" id="bookISBN" data-inputmask="'mask': ['999-999-999-99-9']" data-mask placeholder="ISBN Buku">
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="form-group">
<label for="">Kode Buku</label>
<input type="text" name="kodeBuku" id="bookCode" class="form-control" placeholder="Kode Buku">
</div>
</div>
</div>
The error that appears in the console log is undefined
You want to use keyup, rather than keydown. Assuming the ISBN number should be greater than 10 characters this should work for you. You will want to probably do something different to validate the isbn format and length. This isn't a perfect solution ready for production, but it's a step in the right direction.
$(function(){
let codeIsbn;
$('#bookISBN').keyup(function(){
if( $(this).val().length > 9 ) {
let bookIsbn = $('#bookISBN').val();
let splitISBN = bookIsbn.split('-');
codeIsbn = splitISBN[0]+'-'+splitISBN[1]+'-'+splitISBN[2];
if( codeIsbn.length > 9 ) {
$('#bookCode').val(codeIsbn);
}
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-6 col-sm-12">
<div class="form-group">
<label for="">ISBN Buku</label>
<input type="text" name="isbnBuku" class="form-control" id="bookISBN" data-inputmask="'mask': ['999-999-999-99-9']" data-mask placeholder="ISBN Buku">
</div>
</div>
<div class="col-lg-6 col-sm-12">
<div class="form-group">
<label for="">Kode Buku</label>
<input type="text" name="kodeBuku" id="bookCode" class="form-control" placeholder="Kode Buku">
</div>
</div>
</div>
I have a bootstrap form where I want to set the focus to the next 'enabled' input element upon pressing enter key. When I press enter in Barcode input element, I want to set the focus to the Quantity input element since it is the next enabled input element.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3 pr-0">
<div class="form-group">
<label for="txtBarcode">Barcode</label>
<input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">
</div>
</div>
<div class="col-7 pl-2 pr-0">
<div class="form-group">
<label for="txtPartDesc">Description</label>
<input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>
</div>
</div>
<div class="col-2 pl-2">
<div class="form-group">
<label for="txtUom">UoM</label>
<input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-4 pr-0">
<div class="form-group">
<label for="txtQuantity">Quantity</label>
<input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">
</div>
</div>
</div>
What I have tried so far is:
$(":input").keydown(function(event){
if (event.keyCode === 13) {
$(this).nextAll(':input:enabled').first().focus();
}
});
But this doesn't work as I expect.
next(), nextAll(), and the other similar methods are for finding siblings. Since none of your inputs are actual siblings this will not work.
What you can do however is:
Get a jQuery object of all the enabled inputs
var enabledInputs = $("input:enabled");
Get the index of the current input in that jQuery object using index()
var idx = enabledInputs.index(this);
Then using that index get the element at index+1 using eq()
enabledInputs.eq(idx+1).focus();
Demo
$(":input").keydown(function(event){
if (event.keyCode === 13) {
var enabledInputs = $("input:enabled");
var idx = enabledInputs.index(this);
enabledInputs.eq(idx+1).focus()
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3 pr-0">
<div class="form-group">
<label for="txtBarcode">Barcode</label>
<input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">
</div>
</div>
<div class="col-7 pl-2 pr-0">
<div class="form-group">
<label for="txtPartDesc">Description</label>
<input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>
</div>
</div>
<div class="col-2 pl-2">
<div class="form-group">
<label for="txtUom">UoM</label>
<input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-4 pr-0">
<div class="form-group">
<label for="txtQuantity">Quantity</label>
<input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">
</div>
</div>
</div>
The next input is not a sibling of the #barcode input, so nextAll won't work at that point. Try navigating to the parent's parent, the div class="col-, and then use nextAll to recursively search through that parent's siblings until a matching element is found:
$(":input").keydown(function(event) {
if (event.keyCode !== 13) return;
$(this)
.parent()
.parent() // get to the `class=col-#` element
.nextAll(':input:enabled')
.first()
.focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-3 pr-0">
<div class="form-group">
<label for="txtBarcode">Barcode</label>
<input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">
</div>
</div>
<div class="col-7 pl-2 pr-0">
<div class="form-group">
<label for="txtPartDesc">Description</label>
<input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>
</div>
</div>
<div class="col-2 pl-2">
<div class="form-group">
<label for="txtUom">UoM</label>
<input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-4 pr-0">
<div class="form-group">
<label for="txtQuantity">Quantity</label>
<input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">
</div>
</div>
</div>
If I understand your question correctly then one solution to this problem is to update your keydown() handler like so:
if (event.keyCode === 13) {
// Get all enabled inputs in the document
var inputs = $('input:enabled');
// Iterate all inputs, searching for the index of the "next" input to "this"
for(var i = 0; i < inputs.length; i++) {
// If the "global" index of "this" input is found
if( $(inputs).eq(i).is( $(this) ) ) {
// Then select the "next" input by incrementing the index, and call
// focus on that input if it exists
inputs.eq(i + 1)
.css({ border : '1px solid red' }) // Added to help visualise focus, remove this line
.focus();
// Exit the loop now that focus has been called on "next" input
break
}
}
}
The idea here is to select the next input element based on the order that they occur in the DOM, rather than to select the next input element based on adjacent siblings to the input that "enter" is pressed. This solution also corrects a few minor errors in your code's selector syntax. Here's a working demo:
$("input").keydown(function(event){
if (event.keyCode === 13) {
var inputs = $('input:enabled');
for(var i = 0; i < inputs.length; i++) {
if( $(inputs).eq(i).is( $(this) ) ) {
inputs.eq(i + 1)
.css({ border : '1px solid red' }) // Added to help visualise focus, remove this line
.focus()
break
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3 pr-0">
<div class="form-group">
<label for="txtBarcode">Barcode</label>
<input type="text" id="txtBarcode" name="barcode" class="form-control form-control-sm">
</div>
</div>
<div class="col-7 pl-2 pr-0">
<div class="form-group">
<label for="txtPartDesc">Description</label>
<input type="text" id="txtPartDesc" name="part_desc" value="" class="form-control form-control-sm" disabled>
</div>
</div>
<div class="col-2 pl-2">
<div class="form-group">
<label for="txtUom">UoM</label>
<input type="text" id="txtUom" name="barcode" value="" class="form-control form-control-sm" disabled>
</div>
</div>
</div>
<div class="row">
<div class="col-4 pr-0">
<div class="form-group">
<label for="txtQuantity">Quantity</label>
<input type="text" id="txtQuantity" name="barcode" class="form-control form-control-sm">
</div>
</div>
</div>
I am trying to get the next closest input of same class or different class that is available in the next row div child it says undefined am unable to get it.
[Fiddle]
$(".std_amt").change(function() {
alert($(this).parent('.row').next(".row").children("input.std_amt").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_0" id="relative_name_0" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_1" id="relative_name_1" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
Try to use closest instead of parent like below
$(".std_amt").change(function() {
alert($(this).closest('.row').next(".row").find("input.std_amt").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_0" id="relative_name_0" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="form-group ">
<input class="form-control std_amt" type="text" name="relative_name_1" id="relative_name_1" value="">
<label class="help-inline"></label>
</div>
</div>
</div>
.parent('.row') looks at the direct parent, it does NOT climb the tree. You need to use closest('.row') to reference the row. And you should use find() and not children() since the input is not a direct child.
$(this).closest('.row').next(".row").find("input.std_amt")
I have the following HTML:
<div class="field text-left">
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Name</label>
<input type="text" id="name" name="name" placeholder="Name"/>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Surname</label>
<input type="text" id="surname" name="surname" placeholder="Surname"/>
</div>
</div>
<div class="field">
<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">
<div class="col-lg-12 col-sm-12 col-xs-12">
Next Step
</div>
</div>
</div>
The above is in a multi-step form with other values and hidden panel.
I am trying to figure out how to remove the Class disabled from the a tag with id fullnameBtn only when both surname and name fields are entered using JavaScript or jQuery.
Can someone help on the right path?
Thanks
1-check if both the fields are filled
2- then remove the "selected" class
if($("name") && $("surname")){
$("#fullnameBtn").removeClass("disabled");
}
Here is something to toggle class [but still i guess you want to disable and enable the nextPage link for which you have to manually handle in disabled class]
$(document).ready(function(){
// lets monitor the input of values for inputs you can use a class also
$('input').on('input',function(){
// added for bit of simplicity or you can directly get valuess
var surname = $('#surname').val();
var name = $('#name').val();
if(surname != "" && name != "" )
{
// values seems filled remove class
$('#fullnameBtn').removeClass('disabled');
}
else
{
// user has emptied some input so add class again.
$('#fullnameBtn').addClass('disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="field text-left">
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Name</label>
<input type="text" id="name" name="name" placeholder="Name"/>
</div>
<div class="col-lg-6 col-sm-6 col-xs-12">
<label class="text-left">Surname</label>
<input type="text" id="surname" name="surname" placeholder="Surname"/>
</div>
</div>
<div class="field">
<div class="col-lg-6 col-lg-offset-3 col-sm-8 col-sm-offset-2 col-xs-12 col-xs-offset-0">
<div class="col-lg-12 col-sm-12 col-xs-12">
Next Step
</div>
</div>
</div>
I need to disable the textbox inside my angularJS dynamic form after I clicked the button. my code seems to be working fine if I am going to disable textbox outside the dynamic form but when I get the ID of the textbox inside the dynamic form it is not working. What could be the problem.
$scope.copyText = function () {
document.getElementById('copyText').disabled=true;
document.getElementById('bName').disabled=true;
document.getElementById('pName').disabled=true;
// $('#bName').attr('disabled', true);
//alert('#bName');
$scope.LanguageFormData.language = [
{ bName: document.getElementById('brandName').value, pName: document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature: document.getElementById('pfeatureNew').value, lIngredient: document.getElementById('pingredientNew').value, lInstruction: document.getElementById('pinstructionNew').value, languageCat: null }
];
My View looks like this
<div class="col-md-12" class="pull-right" >
<button class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" value="">COPY</button>
</div>
</div>
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" required/>
</div>
</div><br/><br/><br/>
Why not use ng-disabled. You need to change $scope.disableThis=false; back to false to re-enable the text somewhere else inside the controller code.
$scope.copyText = function () {
$scope.disableThis=true;
$scope.LanguageFormData.language = [
{ bName: document.getElementById('brandName').value, pName: document.getElementById('prodName').value, pNameSub: document.getElementById('prodNameSub').value, lFeature: document.getElementById('pfeatureNew').value, lIngredient: document.getElementById('pingredientNew').value, lInstruction: document.getElementById('pinstructionNew').value, languageCat: null }
];
Suggestions:
I have some doubts on the above code, you can just use the $scope.LanguageFormData.language as is, since you are using ng-model in the input fields, the data of the variable is updated dynamically, you can check this by {{LanguageFormData.language}} printing the output in the HTML
HTML:
<div class="col-md-12" class="pull-right" >
<button class="btn btn-primary pull-right" type="button" ng-click="copyText()" id="copyText" ng-disabled="disableThis" value="">COPY</button>
</div>
</div>
<div id="web" ng-repeat="languageItem in LanguageFormData.language">
<div class="row col-xs-12">
<div class="col-xs-6">
<br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Brand Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" ng-required="true" name="bName" id="bName" ng-disabled="disableThis" class="form-control" ng-model="languageItem.bName" required/>
</div>
</div><br/><br/><br/>
<div class="form-group">
<label class="col-md-6 control-label">Product Name: </label>
<div class="col-md-6">
<input type="text" class="form-control" name="pName" ng-required="true" id="pName" ng-model="languageItem.pName" ng-disabled="disableThis" required/>
</div>
</div><br/><br/><br/>
Suggestions:
It would be good if you restrict the ID for one particular element alone, its a good practice to follow in general!