handle javascript function inside loop - javascript

I am using javascript function inside of while loop. That loop prints list of records and edit button. When click on edit button there is function(Let say editBtnClicked(id)).
Problem: It is getting called to there but page is refreshing automatically.
What is happening over there I couldn't find? Someone have a look on this.
function editBtnClicked(id) {
console.log("Edit Section");
$(".showData").css("display", "none");
$(".showInputField").css("display", "block"); }
<button id="edit" name="Edit" value="Edit" class="edit btn btn-info"onclick="editBtnClicked('<%=id%>');">

By defualt, button elements are type="submit". If you don't want it to be a submit button, use type="button" instead:
<button type="button" id="edit" name="Edit" value="Edit" class="edit btn btn-info"onclick="editBtnClicked('<%=id%>');">
If for some reason you want it to continue to be a submit button, but you want to prevent submission: In your onclick attribute, pass the event into your function:
<button id="edit" name="Edit" value="Edit" class="edit btn btn-info"onclick="editBtnClicked(event, '<%=id%>');">
That event will exist within the context created for that call, either as a global (Chrome, IE) or as a local (Firefox).
Then in your handler, use preventDefault:
function editBtnClicked(event, id) {
$.Event(event).preventDefault(); // Note the jQuery event wrapper
console.log("Edit Section");
$(".showData").css("display", "none");
$(".showInputField").css("display", "block");
}
That said, I'd probably change this up completely and use event delegation instead of an onclick attribute.
On some container all these buttons will be in:
$("selector for the container").on("click", "button.edit", editBtnClicked);
...and when outputting them (note I've removed the id — you said this was a loop, you can't have the same id more than once!):
<button type="button" type="button" value="Edit" class="edit btn btn-info" data-id="'<%=id%>'">
And in the function:
function editBtnClicked() {
var id = $(this).attr("data-id"); // Get the ID
console.log("Edit Section");
$(".showData").css("display", "none");
$(".showInputField").css("display", "block");
}

1- attach preventDefault() to click event or return false at the end of function to prevent submitting. In second case you should write onclick="return editBtnClicked('<%=id%>')"
2- Do not put your function inside the loop. Consider using ID inside your function so you wont need to repeat function inside the loop.

Please use PreventDefault for reference :http://api.jquery.com/event.preventdefault/
function editBtnClicked(e) {
e.preventDefault();
console.log("Edit Section");
$(".showData").css("display", "none");
$(".showInputField").css("display", "block");
}
<button id="edit" name="Edit" value="Edit" class="edit btn btn-info"onclick="editBtnClicked('<%=id%>');">

Related

call function When Submit is Clicked

Hello guy's im trying to call a Function But after i Click on Submit but there is no ID for the submit
here what i got :
<input type="submit" name="save" value="Continue" onclick="return validateFrm();" class="btn primary-btn btn-ctnue row alignCenter" autocomplete="off">
so i want it to be like this for example :
if Submit Clicked then Run this :
function example()
{ alert('Yay!'); )
Anyidea How to do it on JavaScript/Jquery
Ps: There a lot of Submit so i want this specific Submit
Select the submit button using CSS selector input[name=save]
Add listener to fire on click event and pass the function to execute.
document.querySelector("input[name=save]").addEventListener("click", function(){
alert('Yay!');
});
<button id="submit-btn">SUBMIT</button> //html file
const submitBtn = document.getElementById('submit-btn');
function showAlert() {
alert ('YAY!');
}
showAlert();
submitBtn.addEventListener('click', showAlert);

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);
});

Calling controller AngularJS from a button in HTML

I need to call the controller deleteMember so to when the user clicks on a button, the member is deleted.
//deleting a member
Members.controller('deleteMember',['$scope','$http',function($scope, $http){
$scope.deleteMember = function(member){
$scope.deleteMember="";
console.log(member);
var deleteMember=confirm("Sure you want to delete?");
if(deleteMember){
$http.post('PHP/deleteMember.php',member).success(
function(data){
console.log(data);
if (data){
console.log("Deletion successful"); //delete worked
}else{
console.log("Deletion not successful"); //delete did not work
}
});
};
};
}]);
HTML code:
<div class="col-md-2">
<td><button type="button" class="btn btn-warning">Delete</button><td> <!--on button click, the member will be deleted-->
</div>
Is there a way that I can write the name of the controller using HTML?
Thanks for the help :)
You could add the ng-click attribute to the button:
<button type="button" ng-click="deleteMember(member)" class="btn btn-warning">Delete</button>
In this example I assume that the member variable that is passed to the deleteMember method is already in the scope of this button. This would be the case if this button is rendered inside an ng-repeat directive.
For example:
<tr ng-repeat="member in members">
...
<td>
<button type="button" ng-click="deleteMember(member)" class="btn btn-warning">
Delete
</button>
<td>
</tr>
Also you should probably not shooting yourself into the foot by replacing the deleteMember function with a string because the next time you want to call this method it simply won't work:
$scope.deleteMember = "";
You can simply just call the function deleteMember using ng-click and make sure you pass in the member you want to delete as an argument. You are passing a member in your function as an argument in the controller, so one must also be passed via the HTML. You haven't shown it in your code but I assume you are using ng-repeat to do this.
<div class="col-md-2">
<td><button type="button" class="btn btn-warning" ng-click="deleteMember(member)">Delete</button><td> <!--on button click, the member will be deleted-->
</div>
You mention calling the controller in the HTML. If you mean your page isn't initiated with the 'deleteMember' controller then you can wrap that block of code using ng-controller to give you access to the deleteMember.
<div class="col-md-2" ng-controller="deleteMember">
<td><button type="button" class="btn btn-warning" ng-click="deleteMember(member)">Delete</button><td> <!--on button click, the member will be deleted-->
</div>

Clear input in Angular with button, but same button is also used as part of ng-show

First of all, I can imagine the subject of this question is not very clear, so sorry for that.
I am using a button with ng-click to display an input (ng-show) and two other buttons(send, cancel). For hiding the input again I use the "cancel" button. But I also would like to clear the value of the input. The problem is that I dont know how to invoke the clear function as well as the hiding the input again with the same button.
Here is my code:
<button class="btn-share" ng-click="showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">
show input.
</button>
<div class="form-group" ng-show="showme">
<input id="myInput2" class="typeahead" sf-typeahead type="text" datasets="userDataset" ng-model="searchUser" >
<button ng-click="showme=false" class="btn btn-xs">Cancel</button>
<button ng-click="send()" class="btn btn-success btn-xs btn-sent">Send</button>
</div>
$scope.showme = false;
Just update your code
<button class="btn-share" ng-click="showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">
with
<button class="btn-share" ng-click="searchUser='';showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">
I have added searchUser='' in ng-click. So, when user click on it, it will first update the searchUser to empty string in scope and then update showMe in scope.
If you do not want information after cancel, you can do the same thing with ng-click of cancel button.
Here is a plunker for you - http://plnkr.co/edit/X9wbGYsBoIXxR7QmE1zP?p=preview
If you add this line to your clear() function:
$scope.showme = false;
it will invoke the function and set the showme variable to false, thus hiding the div!
So your clear function could look like this:
$scope.clear = function() {
$scope.searchUser = "";
$scope.showme = false;
}

How to add an event to button with two classes in jQuery

my button is defined:
<td>
<button type="button" class="btn btn-danger" id="${machine.uid}">
<spring:message code="vending.generic.delete" />
</button>
</td>
I want to add an event handler to the button.
I tried this:
$(document).on("click",'.btn btn-danger',function(e){
....
}
You can use another dot . without space to target element by multiple classes name:
$(document).on("click",'.btn.btn-danger',function(e){
....
}
Actually .btn btn-danger is an invalid selector, you have to merge by using a dot, so that the meaning becomes "Hey select all elements which contains class btn and class btn-danger"
Try,
$(document).on("click",'.btn.btn-danger',function(e){
....
}

Categories