Acces the correct button using this keyword - javascript

i am having trouble selecting the correct button in my form. For example i have two items and i want to delete the one on the right and when i click to delete it always removes the one on the left;
I am shure the this keyword is not the correct one
Index.ejs
<% service.forEach(function (myService) { %>
<form method="post" action="/service/<%= myService._id %>?_method=DELETE" name="del_form">
<button type="submit" class="btn btn-danger btn-del" name="del_btn"></button>
</form>
script.js
let delServiceBtn = $('button[name=del_btn]');
let delServiceForm = $('form[name=del_form]');
delServiceBtn.on('click', function (e) {
e.preventDefault();
if(confirm('Confirm delete')){
delServiceForm.submit();
}
});

Add the click attribute to your <button> tag as,
<button type="submit" class="btn btn-danger btn-del" name="del_btn" onClick="delService(this);"></button>
And write a new javascript function delService as,
function delService(buttonObj) {
if(confirm('Confirm delete')){
var btn = document.getElementsByName(buttonObj.name);
btn.submit();
}
}
Hope this helps!

Related

Adding list items using jquery

Please check my code. The code adds the list item but it suddenly disappears. Kindly let me know the error in my code.
<button type="submit" class="btn btn-primary" id="needButton">Need</button>
<button type="submit" class="btn btn-primary btn-success" id="haveButton" >Have</button>
</form>
<div class="myNeed">
<ul class="need">
<li>
The needed items are
</li>
</ul>
</div>
This is js code
$(document).ready(function() {
$("#needButton").click(function () {
var needed = $("#bill").val();
$(".need").append("<li>" + needed + "<li>");
});
});
The issue is because the button click triggers the form to be submit which redirects the page.
To fix this, hook your event handler to the submit event of the form element and call preventDefault() on the event. Using this methoid over change the button type means that users can still trigger the action by pressing the return key on the keyboard when the input has focus.
jQuery($ => {
$("form").on('submit', e => {
e.preventDefault();
var needed = $("#bill").val();
$(".need").append(`<li>${needed}</li>`);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<form>
<input type="text" id="bill" />
<button type="submit" class="btn btn-primary btn-success" id="haveButton">Have</button>
</form>
<div class="myNeed">
<ul class="need">
</ul>
</div>
i think there is a typo you write id=haveButton but in js code you type #needButton try change that to #haveButton
i did a simple code for here i hop it will help you
<button id="add">Have</button>
<ul class="need"></ul>
<script>
$(document).ready(function () {
$("#add").click(function () {
var needed = '123.';
$(".need").append("<li>" + needed + "</li>");
});
});
</script>

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

How to stop next page to be loading

In my project, while a particular button is clicked I want to stop the next page appearing. Here is my JavaScript code:
function checkcond() {
check_value=document.getElementById("chkvalue");
if(check_value==null){
alert(check_value);
document.firstform.textview.focus();
return false;
}
}
and button code is:
<form id="payment_form" name="payment_form" action="<?php echo site_url("cont/accept");?>" method="post">
<input id="chkvalue" name="chkvalue" type="hidden">
<button type="submit" id="submit_button" class="btn btn-primary" onclick="checkcond()">
<b>Make a Payment</b>
<span class="fa fa-hand-o-right" aria-hidden="true"></span>
</button>
Here after checking the check_value I want to keep my current page while it is null. How should it be done? Is there any function for that?
My suggestion would be to remove inline javascript
and use like this
document.getElementById('payment_form').onsubmit = function() {
return checkcond();
};
or if you want to use inline method, change onclick method like this
<button type="submit" id="submit_button" class="btn btn-primary" onclick="return checkcond()"><b>Make a Payment</b>

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

javascript validation on Submit button

Want to use javascript validation to work when i click submit button. What happens now is even if i enter a low value the value submits. but i need to check the validation before i click submit...
This is the Javascript:
$(function () {
$("#newMonoReading").on('focusout', function () {
var str = "";
var initialMonoReading = $('#InitialMonoReading').val();
var newMonoReading = $('#newMonoReading').val()
if (~~newMonoReading < ~~initialMonoReading) {
$('#MonoErrorMessage').text("New Mono Readings must be MORE than existing");
$('#MonoErrorMessage').show();
} else {
$('#MonoErrorMessage').hide();
}
});
});
Now on my form, you can see the input type (Submit)
<div class="modal-footer">
<input type="submit" value="Submit New Readings" class="btn btn-primary">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</fieldset>
</form>
How do i get the JavaScript function to the submit button, so when i enter submit it wont work because i have entered a low value.
function validateForm() {
var str = "";
var initialMonoReading = $('#InitialMonoReading').val();
var newMonoReading = $('#newMonoReading').val();
if (~~newMonoReading < ~~initialMonoReading) {
$('#MonoErrorMessage').text("New Mono Readings must be MORE than existing");
$('#MonoErrorMessage').show();
return false;
} else {
$('#MonoErrorMessage').hide();
}
}
This example will clear things
FIDDLE
<form onsubmit="return validateForm()" method="post">
<div class="modal-footer">
<input type="submit" value="Submit New Readings" class="btn btn-primary">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</fieldset>
</form>
You don't actually want the validation on the submit button, since there are other ways to submit a form. You actually want the validation the the form's onsubmit handler.
Now, that said, you haven't shown enough of your code to know where the problem is, but I can take a good guess.
Before this line:
$("#newMonoReading").on('focusout', function () {
Add this line:
alert($("#newMonoReading").length);
There is a good chance you are trying to run this code before the DOM has been rendered. If that returns 0, you have three choices:
Use event delegation (overkill in this case)
Move the code inside a $(function() {...}); block
Load the scripts at the bottom of the page.
Change the submit button to button
In this way, you will have full control of the submit. You can perform your own logic in the validate() function and decide whether allow the form to submit or not
<input type="button" onclick="validate()" value="Submit New Readings" class="btn btn-primary">
and your the validate function will be
function validate () {
var initialMonoReading = $('#InitialMonoReading').val();
var newMonoReading = $('#newMonoReading').val()
if (~~newMonoReading < ~~initialMonoReading)
{
alert("Value is not valid");
return;
}
///else submit
$("yourform").submit();
});

Categories