We Keep Coding

How may I get the value of a button when a user clicks on it?

I have four buttons:
<button id="button-yardSize" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize" class="btn btn-success" value="4"><h1>4</h1></button>
<button id="button-yardSize" class="btn btn-success" value="6"><h1>6</h1></button>
<button id="button-yardSize" class="btn btn-success" value="8"><h1>8</h1></button>
And I want to capture the value of the button clicked so that I may add it later with another button and add them together.
I added this for the JS:
var inputYardSize = $("#button-yardSize").on("click", function(){
$("#button-yardSize").val();
console.log(inputYardSize);
});
I read that I may need to use .attr instead, however not sure how to add a custom attribute to the buttons?

First of all, you should use a class, not an ID. IDs should be unique, and $("#button-yardSize") will only select the first button.
In the event listener you can use this to refer to the button that was clicked.
You need to assign the inputYardSize variable inside the function. .on() just returns the jQuery object you're binding the handler to, not the value from inside the function.
$(".button-yardSize").on("click", function() {
var inputYardSize = $(this).val();
console.log(inputYardSize);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn btn-success button-yardSize" value="2"><h1>2</h1></button>
<button class="btn btn-success button-yardSize" value="4"><h1>4</h1></button>
<button class="btn btn-success button-yardSize" value="6"><h1>6</h1></button>
<button class="btn btn-success button-yardSize" value="8"><h1>8</h1></button>

EDIT: You should use ID for unique elements and class for repeating element.
So if you would replace the ID with class on the button, the code should look like this:
Remove the declaration from the beginning and instead use it to store the values inside the click function.
In this way, you will have the value of the clicked button with the specified class.
$('.button-yardSize').on('click', function(){
var inputYardSize = $(this).val();
console.log(inputYardSize);
})

The id of each element has to be unique
<button id="button-yardSize1" class="btn btn-success" value="2"><h1>2</h1></button>
<button id="button-yardSize2" class="btn btn-success" value="4"><h1>4</h1></button>
The JS function is incorrect, you need a click handler which will log the button value
$("#button-yardSize1").on("click", function(){
inputYardSize=$("#button-yardSize1").val();
console.log(inputYardSize);
});

ng-click not firing on a button click

I am facing weird error where I am not able to call a function on ng-click when button is clicked.
This is the block of code for which the ng-click is not working for delete button but working for edit button.
<table ng-table="tableParams" class="table table-striped table-bordered Pages_table">
<thead>
<td><b>Id</b></td>
<td><b>Image</b></td>
<td><b>Alt</b></td>
<td><b>Edit</b></td>
<td><b>Delete</b></td>
</thead>
<tbody>
<tr ng-repeat="dat in newData">
<td>((dat.id))</td>
<td class="clients_review_admin_item"><img src="((imagePath+'/'+dat.image))" alt="" style="height:100px;width:150px" /></td>
<td>((dat.alt))</td>
<td><button type="button" class="btn btn-info rounded-buttons" data-toggle="modal" data-target="#editWhy" ng-click="editWhy(dat)" ><i class="fa fa-pencil"></i></button></td>
<td>
<button class="btn btn-danger rounded-buttons" type="button" ng-click="deleteFooter(dat.id,dat.alt)"><i class="fa fa-close"></i></button>
</td>
</tr>
</tbody>
</table>
The Javascript function deleteFooter
$scope.deleteFooter = function(id,name){
console.log("called");
var postUrl = apiUrl+"/delfriendfooter";
var $inputs = {
id:id,
token:$scope.token,
};
var func = function(){
$http.post(postUrl, $inputs).
success(function(data, status, headers, config) {
swal("Deleted!", name+" has been deleted!", "success");
var dat = $scope.newData;
for(var i=0,len= dat.length;i<len;i++){
if(dat[i].id==id){
dat.splice(i,1);
break;
}
}
}).
error(function(data, status, headers, config) {
sweetAlert("Oops!!", "Please try again!!", "error");
});
}
$scope.deletePopUp(func,name);
};
The weird thing is that it is working for the edit functionality
<td><button class="btn btn-info rounded-buttons" data-toggle="modal" data-target="#editWhy" ng-click="editWhy(dat)" ><i class="fa fa-pencil"></i></button></td>
I have also tried to call other functions but it is just not firing.
Note: I have changed the angular braces to (()).

This is happening because of the way angular / buttons / forms work.
Specifically:
To prevent double execution of the handler, use only one of the ngSubmit or ngClick directives. This is because of the following form submission rules in the HTML specification:
If a form has only one input field then hitting enter in this field triggers form submit (ngSubmit)
If a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn't trigger submit
If a form has one or more input fields and one or more buttons or input[type=submit] then hitting enter in any of the input fields will trigger the click handler on the first button or input[type=submit] (ngClick) and a submit handler on the enclosing form (ngSubmit)
Because of these rules, buttons can behave a little strangely.
A solution is to add type="button" to your buttons. This will basically prevent these rules from being applied:
<button type="button" class="btn btn-danger rounded-buttons" ng-click="deleteFooter(dat.id,dat.alt)"><i class="fa fa-close"></i></button>
Angular will then, instead of using the form standards to decide what function to call, simply execute the ng-click's function.

The problem is that i guess deleteFooter function and it's ng-click is called on different scopes.
Both are defined in your controllers scope, and its fine.
But i suppose, as You wrote, that you call deleteFooter in ng-repeat, which has its own scope.
Use $parent to enforce your controller scope on deleteFooter.
<button class="btn btn-danger rounded-buttons" ng-click="$parent.deleteFooter(dat.id,dat.alt)"><i class="fa fa-close"></i></button>

Ok so after so many efforts I opted for jquery ajax method and applied the changes using angular $apply to the scope variable. I am still not sure what is wrong.

2 Cancel buttons on Xeditable angular directive

I'm using xeditable angular directive.Could you tell me how to use 2 cancel buttons ? B'cos I need to implement 2 functionalities on it.I mean cancel + my work 1 and cancel + my work 2. Thanks in advance.
HTML
<form editable-form name="tableform" onaftersave="saveTable()" oncancel="cancel()">
//UI code here
<button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">Cancel</button>
</form>
JS
// cancel all changes
$scope.cancel = function() {
};
JSFiddle

You can have 2 cancel buttons within the form and pass the form as attribute. Then in the corresponding cancel functions you can invoke form.$cancel and then do your logic. form.$cancel does the same work as invoking ng-click="tableform.$cancel()".
Play with it : Plunker
//html
<button type="button" ng-disabled="tableform.$waiting" ng-click="cancel1(tableform)" class="btn btn-default">cancel 1</button>
<button type="button" ng-disabled="tableform.$waiting" ng-click="cancel2(tableform)" class="btn btn-default">cancel 2</button>
//controller
$scope.cancel1 = function(tableForm) {
// Call tableForm cancel to reset
tableForm.$cancel();
//Logic1
};
$scope.cancel2 = function(tableForm) {
// Call tableForm cancel to reset
tableForm.$cancel();
//Logic2
};

Actually you should be able to take control of how the cancel button function. If you take carefully into the code you will see that, they just create some buttons and display or hide them base on the current form status(form.$visible)
Do something like this.
<button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-default">cancel1</button>
</div>
Here is an example

Angular: on click, add input fields text to array

First off, starting out with this so a bit confused. I have a simple table, where the contents are pulled in from a database and injected into the DOM with Angular.
The table consists of an option, and its value. I would like the user to be able to edit the values, and then click a "save" button, where I make a http call to my back-end with the details.
I've got the basics working, clicking a button and the input fields replace the table cell content:
Clicking "Edit":
When clicking "Cancel", it reverts back - so this is all working.
So this bit I can't work out, is when I press update, I want to create an array (json?), where I can send somewhere using http.
I'd need something where each object in the array/json contains the "option" and the "value", so I can match these in the database.
My HTML:
<div ng-hide="loading" class="table-responsive">
<table class="table table-striped table-compact table-bordered">
<thead>
<tr>
<th>Option</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="setting in settings">
<td><< setting.option >> <i class="fa fa-question pull-right pointer" tooltip="<< setting.description >>" ></i></td>
<td ng-switch="status">
<input ng-switch-when="editable" type="text" class="form-control" value="<< setting.value >>" />
<span ng-switch-when="uneditable"><< setting.value >></span>
</td>
</tr>
</tbody>
</table>
</div>
<div ng-hide="loading" ng-switch="status">
<button ng-switch-when="uneditable" ng-click="edit()" class="btn btn-sm btn-info">Edit</button>
<button ng-switch-when="editable" ng-click="save()" class="btn btn-sm btn-success">Update</button>
<button ng-switch-when="editable" ng-click="cancel()" class="btn btn-sm btn-danger">Cancel</button>
</div>
And finally my ng controller:
app.controller('appSettingsController', function($scope, ApplicationSettings) {
$scope.settings = {};
$scope.loading = true;
$scope.status = 'uneditable';
// Grab data for table
ApplicationSettings.get()
.success(function(data) {
$scope.settings = data;
$scope.loading = false;
});
$scope.edit = function() {
$scope.status = 'editable';
$scope.updates = {};
};
$scope.cancel = function() {
$scope.status = 'uneditable';
};
$scope.save = function() {
// Construct Array/JSON of inputs
};
});
Anyone got any ideas? I have a feeling it's something to do with using ng-model?

Inside your table, the second column has the following input element tag when in edit mode:
<input ng-switch-when="editable" type="text" class="form-control"
value="<< setting.value >>" />
Firstly - I think the value attribute should be {{setting.value}} and not << setting.value >> - I can't imagine the latter giving the value in AngularJS.
Now, for your requirements. Instead of using the value attribute, you can use the ng-model attribute as you guessed.
With the ng-model attribute in place, the input should now be:
<input ng-switch-when="editable" type="text" class="form-control"
ng-model="setting.value" />
ng-model will take care of displaying the value for that input as well as due to two way data binding, the value entered into the input will be stored back into setting.value.
What this means is that, AngularJS automatically will update $scope.settings when you input something in the text box. You don't have to write any additional code to ensure that the value is put back. It's like the Update button was already clicked and data was saved - only that it wasn't clicked but data was still saved
The only downside to this is that when you click on cancel, the old values are no longer available (since the moment you type something into the text, the values are updated). You can store initial values of $scope.settings into another variable before switching to edit mode. That way, when you click cancel, you are still left with old values.

Customize the cancel code button of the X-editable (AngularJS)

Is that possible when the user add a new row and by clicking on the cancel button(without put any data), the row will be deleted.
Otherwise how can I change the cancel button code, because this one use the default xeditable code of angularJS.(Or maybe how can I call the delete function if the row is empty?)
This is the EXAMPLE.
HTML for the cancel button:
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>

You may call your own function. To achieve this you should change your html like this:
<button type="button" ng-disabled="rowform.$waiting"
ng-click="cancelAdvice(rowform, $index)"
class="btn btn-default">
cancel
</button>
As you can see there is a new function with the form and the current index as parameter. In your controller you have to define this function:
$scope.cancelAdvice = function(rowform, index){
console.log(rowform, index);
$scope.removeUser(index);
rowform.$cancel();
}
Now you can do your own stuff and call the form $cancel if you are done.

Alternatively if you look at xeditable.js you'll see that $cancel() internally calls $oncancel() which looks for oncancel attribute on the form and calls the function supplied in it. So instead of handling the form in the controller you could have:
<form editable-form name="rowform" onbeforesave="saveRole($data, $index)" oncancel="removeIfNewRow($index)" ng-show="rowform.$visible" class="form-inline" shown="inserted == role">
<button type="submit" ng-disabled="rowform.$waiting" class="btn btn-primary">
save
</button>
<button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()" class="btn btn-default">
cancel
</button>
</form>