I implemented a modal with a form inside with 5 buttons: Submit, 2 Close buttons, and 2 more for an input number spinner that allows the user to select a quantity using "+" and "-" buttons. The problem is that every time the "+" or "-" button are clicked, the modal is closed, which is a normal behavior for modals when pressing submit or close buttons but I need the modal to stay visible and allow the user to select the quantity without the modal been closed.
This are the buttons inside the form that control the number spinner:
<div class="item-count">
<div class="input-group number-spinner">
<span class="input-group-btn">
<button class="btn btn-default" id="spin1" data-dir="dwn">-</button>
</span>
<input type="text" class="form-control text-center" name="quantity" value="1">
<span class="input-group-btn">
<button class="btn btn-default" id="spin2" data-dir="up">+</button>
</span>
</div>
</div>
And this is the function that control the input spinner:
<script>
$(document).on('click', '.number-spinner button', function () {
var btn = $(this),
oldValue = btn.closest('.number-spinner').find('input').val().trim(),
newVal = 0;
if (btn.attr('data-dir') == 'up') {
newVal = parseInt(oldValue) + 1;
} else {
if (oldValue > 1) {
newVal = parseInt(oldValue) - 1;
} else {
newVal = 1;
}
}
btn.closest('.number-spinner').find('input').val(newVal);
});
</script>
if I use the e.preventDefault() (associated to ID's for the buttons for this purpose: spin1 and spin2) to avoid the modal to be closed, the modal stays visible but the spinner doesn't not update the quantity input with the new value, and he form sends the default value of 1 to the server to be processed. Any guidance is appreciated. Thanks.
When you tried e.preventDefault(), did you pass the event to the function?
If not check the console, there must be an error saying that 'e' is undefined.
So just pass 'e'(the event), then it should work.
$(document).on('click', '.number-spinner button', function (e) {
e.preventDefault();
var btn = $(this),
oldValue = btn.closest('.number-spinner').find('input').val().trim(),
newVal = 0;
if (btn.attr('data-dir') == 'up') {
newVal = parseInt(oldValue) + 1;
} else {
if (oldValue > 1) {
newVal = parseInt(oldValue) - 1;
} else {
newVal = 1;
}
}
btn.closest('.number-spinner').find('input').val(newVal);
});
I think the best solution will be adding <a href> tag with the button style.
Related
I use an automation testing tool (selenium)
I try to test a page which has this button:
<button morearea-controllers="my-list" morearea-expanded="false" class="lpw-reach-text-more link">
As a user, when I press show more it shows the "show more content". And when there is no more to show, the morearea-expanded becomes true.
Is there any JavaScript command which could expand the button until the end (until morearea-expanded becomes true)?
Somehting very general I tried as I found it is from the full button list which I found the list and after that the number of button (but this number is not the same in every page I try to test):
document.querySelectorAll('button')
is this:
document.getElementsByTagName('button')[29].click()
You can keep invoking the click event in a while loop until the attribute value is "true". Sample using jQuery (function named automationFunction()):
$(document).ready(function() {
var count = 0,
$button = $("[morearea-controllers='my-list']");
/* bad code alert - just for sample purpose */
$button.click(function() {
if (count == 5) {
return;
} else {
if (count === 4) {
$(this).attr("morearea-expanded", true);
$(this).val("Show Less");
}
$("#container").append((count + 1) + "<br/>");
count++;
}
});
/* automation function */
$("#btn-automate").click(function() {
automationFunction();
});
var automationFunction = function() {
count = 0;
while ($button.attr("morearea-expanded") === "false") {
$button.click();
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
Five items hidden..click on show more to unhide
<div id="container"></div>
</div>
<input type="button" id="btn-show-more" morearea-controllers="my-list" morearea-expanded="false" class="lpw-reach-text-more link" value="Show More"> <br/>
<input type="button" id="btn-automate" value="Invoke automation function">
I've created the input box with plus and minus button, to increase and decrease the value of input box while clicking the button.
I'm adding attribute 'disabled' to minus button when input value is set to zero, but the problem is that when page loads the input has value zero by-default but i need to click the minus button one time to add the attribute 'disabled' which is not i'm looking for, what i want is when the value of input is zero, i want minus button to have attribute set to be disabled by default and when i click the plus button it'll remove the 'disabled' attribute form minus button.
Even i tried adding attribute on button with window load but with no luck like this:
$( window ).load(function() {
$('.minus').attr('disabled', true)
})
Here's the jsFiddle link for the same.
Hope you understand this.
Thanks in advance for the help.
Just add the disabled property on the input
<button disabled class="change_qty minus cursor_hover">-</button>
Here is the working code for you. I just added a function which gets called on document.ready and on every click of + or - sign:
$(".plus").click(function(e) {
e.preventDefault();
var $this = $(this);
var $input = $this.siblings('input');
var value = parseInt($input.val());
if (value < 30) {
value = value + 1;
} else {
value = 30;
}
$input.val(value);
checkAndDisable();
});
$(".minus").click(function(e) {
e.preventDefault();
var $this = $(this);
var $input = $this.siblings('input');
var value = parseInt($input.val());
if (value > 1) {
value = value - 1;
$(this).removeAttr('disabled');
} else {
value = 0;
$(this).attr('disabled', true);
}
$input.val(value);
checkAndDisable();
});
$(document).ready(function() {
checkAndDisable();
});
$("#inputField").on('change', function(){
if($(this).val() <= 0)
$(this).val(0);
checkAndDisable();
});
function checkAndDisable() {
$(".minus").removeAttr('disabled');
if ($("#inputField").val() == 0) {
$(".minus").attr('disabled', true);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="change_qty minus cursor_hover">-</button>
<input type="number" style="height:26px;width:40px;text-align:center;" value="0" id="inputField">
<button class="change_qty plus cursor_hover">+</button>
use document.ready to disable the button as
$(document ).ready(function() {
$('.minus').attr('disabled', 'disabled')
})
I am facing the below issues:
If the user clicks "next" button before cloning, it should say you have 4 fields missing to validate. but if the user clicks the "addmore" button, and then clicks the next button, it should say you have 4 fields missing to validate. If the user fills any mandatory field in the cloned div and original div then clicks the next button, it should say you have 7 fields missing to validate. Getting confused I tried all the ways Nothing works
Here is the jquery code
function check_for_validation_removal(element){
var parent_div = $(element).closest("div.cloned-row1,div.cloned-row2,div.cloned-row3,div.cloned-row4,div.cloned-row5").find("input[type='text'],#txt_schName option:selected");
console.log(parent_div);
console.log(parent_div.length);
var invalid_ele = 0;
parent_div.each(function () {
if($(this).val().trim().length == 0)
{
invalid_ele = invalid_ele + 1;
}
});
console.log(invalid_ele);
if(parent_div.length == invalid_ele){
parent_div.each(function () {
$(this).removeClass("required_field");
$(this).rules('remove');
});
bind_validation();
update_errors();
}
Here is the complete fiddle Link
Kindly suggest how I could resolve these issues.
<div id="TextBoxesGroup" style="margin-bottom:4px;" class="clonedInput">/*Html code here also*/</div>
$(document).ready(function () {
var counter = 2;
$("#addButton").click(function () {
var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<br><input type="text" name="ipt_Havg" id="ipt_Havg" class="ipt_Field required_field" aria-required="true" aria-invalid="false">');/*Same code paste here html*/
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if (counter == 1) {
alert("No more File box to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
<div><input type='button' value='Add File' id='addButton'><input type='button' value='Remove File' id='removeButton'></div>
I'm trying to make a website using asp.net mvc 4 & jQuery 1.9.1 where I want to insert boolean values (Y or N) in textbox for the corresponding button pressed. It works for a single button, but it's not working for group of buttons. Here are my codes,
$(document).ready(function () {
var isClicked = 0;
$('.btn').click(function () {
if (isClicked == 0) {
isClicked = 1;
$(this).toggleClass('color-blue color-green');
$(this).next('.assignCheck').val('Y');
} else if (isClicked == 1) {
isClicked = 0;
$(this).toggleClass('color-green color-blue');
$(this).next('.assignCheck').val('N');
}
});
});
JSFiddle Demo
How can I make the buttons work individually? Need this help badly. Thanks.
uYou can use data- attributes with button to store if its click value is 1 or zero and use that value to update the respective textbox
Live Demo
Html
<button class="btn color-blue" data-clicked="0">ONE</button>
<input type="text" class="assignCheck" /><br><br>
<button class="btn color-blue" data-clicked="0">TWO</button>
<input type="text" class="assignCheck" /><br><br>
<button class="btn color-blue" data-clicked="0">THREE</button>
<input type="text" class="assignCheck" />
JQuery
$(document).ready(function () {
$('.btn').click(function () {
var isClicked = $(this).data("clicked");
if (isClicked == 0) {
isClicked = 1;
$(this).toggleClass('color-blue color-green');
$(this).next('.assignCheck').val('Y');
} else if (isClicked == 1) {
isClicked = 0;
$(this).toggleClass('color-green color-blue');
$(this).next('.assignCheck').val('N');
}
$(this).data("clicked", isClicked);
});
})
I have a next button and a input tag, user can enter page number into the input,and hit enter to jump to the page, every page is an image,
like:
<img src="http://someurl.com/1_1.emf" > // first page
<img src="http://someurl.com/2_1.emf" > // second page
as you can see the only defference is the url , when updateing the page , i did not update the src attributes , but change the whole img tag.
the problem is that if I enter 2 in the input tag and hit enter , the image updated successfully, but when i click the next button the image just shows a white background, not matter how long i wait it will not render the image.
the enter keydown event and the click event are exactly same.but I notic that when use input to update page, after hit the enter, there will be an loading circle beside the mouse pointer,but when click the next button there isn't.
any idea why???
code:
<input type="text" class="currentPage" id="docCurrentPage" value="1" onfocus="this.className='currentPage_focus'" onkeydown="jumpToPage(event,this.value)" onblur="this.className='currentPage'" />
window.jumpToPage = function(event, value) {
var charCode = (event.which) ? event.which : event.keyCode;
if (charCode == 13) {
var num = parseInt(value);
var totalPage = parseInt(doc.options.pageCount)
if (num != 0 && num <= totalPage) {
// doc.download(num)
doc.download.apply(doc,[num])
} else {
doc._node.docPager.val(doc.currPage)
}
}
}
<a id="nextBtn" class="doc_right" onclick="openDocNextPage()" href="javascript:;" ></a>
openDocNextPage = function() {
if (!doc.isLastPage()) {
var totalPage = parseInt(this.options.pageCount);
var pageNum = parseInt(this.currPage) + 1;
if (pageNum != totalPage + 1) {
this.download(pageNum);
}
}
}
download: function(pageNum) {
// debugger;
if (pageNum != this.tempPage) {
this.tempPage = pageNum || 1;
if (this.options.id) {
if (this.docType === 'emf') {
if (!this.downloading) {
this.getDoc(pageNum)
}
} else if (this.docType === 'txt') {
this.loadDoc(this.getUrl(pageNum))
this.updatePageNum(pageNum)
}
} else {
this.loadDoc(this.getUrl(pageNum))
this.updatePageNum(pageNum)
}
}
},
Change
<a id="nextBtn" class="doc_right" onclick="openDocNextPage()" href="javascript:;" ></a>
to
<a id="nextBtn" class="doc_right" onclick="openDocNextPage(); return false;" href="#" ></a>