I have this HTML structure :
<input type="text" name="quantity" class="form-control quantity" value="1" min="1" max="10" maxlength="2" size="2">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number btn-plus p-l-10 p-r-10">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
and also I have this jquery script :
<script>
$(document).ready(function(){
$(document).on("click", ".btn-plus", function() {
event.preventDefault();
var quantity = $( this ).closest( ".quantity" ).val();
alert (quantity);
});
});
</script>
theoretically, I can get value of input text once the btn-plus is clicked, but I still get undefined value as result.
how to get the input value of .quantity using .closest? thank you
.closest() is used to find a matching ancestor element, in your case the input element is the previous sibling of the buttons parent
$(document).ready(function() {
$(document).on("click", ".btn-plus", function(event) {
event.preventDefault();
var quantity = $(this).parent().prev(".quantity").val();
alert(quantity);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="quantity" class="form-control quantity" value="1" min="1" max="10" maxlength="2" size="2">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number btn-plus p-l-10 p-r-10">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
$(document).ready(function() {
$(document).on("click", ".btn-plus", function(event) {
event.preventDefault();
var quantity = $(this).closest("span").prev().val();//use closest span and prev to get input
alert(quantity);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="quantity" class="form-control quantity" value="1" min="1" max="10" maxlength="2" size="2">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number btn-plus p-l-10 p-r-10">
<span class="glyphicon glyphicon-plus">asdasdasdas</span>
</button>
</span>
Use .closest() span to get the parent span. Since input is before span use .prev()
According to the JQuery website it appears as though the closest function acts similarly to the parents function in that it only looks at the ancestors of the element you are targeting.
https://api.jquery.com/closest/#entry-longdesc
As the input tag is not a parent of the button tag then the closest function will not find it.
Utilize a combination of parent and sibling or similar to target the input tag.
Related
In my case, I want to make plus or minus button with add or minus to count number into text box. I can do it. But I've got the error. There have multi row with same design but different ID (I mean working with auto increment ID). When I click on plus button of top or middle row but it doesn't work on it's own row. It's always work on the last row.
Here is my Screenshot
Here is my HTML in JQuery Code. When Click on Add button at right top corner, this code work. It's doesn't the problem.
<input id="qty1" type="text" class="form-control dateadd" style="border- radius:0px;" name="count_date[]" value="0">
Here is my processing JQuery codes.
var test;
$('.dateadd').each(function() {
var test = this.id;
console.log("ID is",test, "Hello, world!");
});
$(document).ready(function(){
$('.plus').click( function() {
var counter = $(test).val();
counter++ ;
$(test).val(counter);
});
});
$(document).ready(function(){
$('.minus').click( function() {
var counter = $(test).val();
counter-- ;
$(test).val(counter);
});
});
Here is my Row HTML Code
<div class="col-sm-5" style="padding-right:0;">
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>
<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>
</span>
<input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0">
</div>
</div>
Here is my Row Add Jquery + HTML Code
var perDayHtml = '<div class="col-sm-5" style="padding-right:0;">'+
'<div class="input-group">'+
'<span class="input-group-btn">'+
'<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>'+
'<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>'+
'</span>'+
'<input id="qty1" type="text" class="form-control dateadd" style="border-radius:0px;" name="count_date[]" value="0">'+
'</div>'+
'</div>'
$("#optionBox").on('click', '.addPerDay', function(){
$('.remove').prop('disabled', false);
if (rowNo<maxi && rowNo<minusmaxi) {
rowNo++;
plan++;
$(".perDay:last").after(perDayHtml.replace(/qty1/g,"qty" + rowNo));
I guess that you've plus/minus button in same div with the dateadd input so you could just go up to the parent div then find the dateadd input :
$(document).ready(function(){
$('body').on('click', '.plus', function() {
var parent = $(this).closest('div');
var counter = parseInt(parent.find('.qty').val());
counter++ ;
parent.find('.qty').val(counter);
});
$('body').on('click', '.minus', function() {
var parent = $(this).closest('div');
var counter = parseInt(parent.find('.qty').val());
counter-- ;
parent.find('.qty').val(counter);
});
});
NOTE 1: NO need for multiple ready function.
NOTE 2: You should use event delegation .on() instead of .click() since your code is added dynamically to the DOM.
NOTE 3: Check in minus click event if the qte is greater than 0 before decreasing the counter :
counter>0?counter--:counter;
Hope this helps.
$(document).ready(function(){
$('body').on('click', '.plus', function() {
var parent = $(this).closest('div');
var counter = parseInt(parent.find('.qty').val());
counter++ ;
parent.find('.qty').val(counter);
});
$('body').on('click', '.minus', function() {
var parent = $(this).closest('div');
var counter = parseInt(parent.find('.qty').val());
counter>0?counter--:counter;
parent.find('.qty').val(counter);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>
<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>
</span>
<input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0">
</div>
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>
<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>
</span>
<input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0">
</div>
<div class="input-group">
<span class="input-group-btn">
<a class="btn btn-default plus" type="button" style="background-color:#7ec1cb;color:#fff;border-radius:0px;">＋</a>
<a class="btn btn-default minus" style="color:#7ec1cb;border-radius:0px;">－</a>
</span>
<input type="text" class="form-control qty" style="border-radius:0px;" name="count_date[]" value="0">
</div>
I'm trying to fetch values from some input fields that are placed in a Bootstrap Popover. But I get empty string.
Complexity: There is a button within a form, when you click this button a popover appears with 2 input fields and a button. I want to capture the values of these 2 fields when we click the button. If I put these fields in a form, then it would become nested forms.
Following is my code.
<button type="button" class="btn btn-danger popper hyperlink" data-toggle="popover">Trial</button>
<div class="popper-content hide">
<input type="text" class="form-control" id='urlLabel' placeholder="URL Label">
<input type="text" class="form-control url" id='url' placeholder="Complete URL">
<button type="button" class="btn btn-default btn-block urlDetails">Done</button>
</div>
My way of fetching values
$('.urlDetails').click(function(){
console.log('clicked');
console.log($('#urlLabel').val());
console.log($('#url').val());
})
Here is my JSFiddle covering the above case.
Try following code:
$(document).ready(function() {
$(document).on('click', '.urlDetails', function() {
console.log('clicked');
console.log($('.popover-content').find('#urlLabel').val());
console.log($('.popover-content').find('#url').val());
})
});
I think you misspelled
$(document).ready(function() {
$('.urlDetails').click(function(){
console.log('clicked');
console.log($('#urlLabel').val());
console.log($('#url').val());
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-danger popper hyperlink" data-toggle="popover">Trial</button>
<div class="popper-content hide">
<input type="text" class="form-control" id='urlLabel' placeholder="URL Label">
<input type="text" class="form-control url" id='url' placeholder="Complete URL">
<button type="button" class="btn btn-default btn-block urlDetails">Done</button>
</div>
Here is a working code
How do I change the input from disabled to enabled when clicks and returns from disabled to enabled when clicked
HTML
<div class="col-md-2">
<input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
<button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" value=""> </button>
</div>
JQUERY
$('#submit1').click(function() {
$('#tes').prop("disabled",true);
$(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});
Use this Generalized function in your project to make things enabled / disabled.
(function($) {
$.fn.toggleDisabled = function(){
return this.each(function(){
this.disabled = !this.disabled;
});
};
})(jQuery);
$('#submit1').click(function() {
$('#tes').toggleDisabled();
$(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2">
<input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
<button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" >Button </button>
</div>
You can use this one.
$('#submit1').click(function() {
$('#tes').prop("disabled",!$('#tes').prop("disabled"));
$(this).toggleClass('glyphicon glyphicon-ok').toggleClass('glyphicon glyphicon-remove btn-danger');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2">
<input type="text" class="form-control" id="tes" name="tes" />
</div>
<br>
<div class="col-md-3">
<button type="submit" id="submit1" class="glyphicon glyphicon-ok success btn btn-primary btn" value="Submit">SUbmit </button>
</div>
.prop(property) will return whether the property is set. You can use this to check the value and toggle it based on it's current value.
if( $('#tes').prop("disabled") )
$('#tes').prop("disabled",false);
else
$('#tes').prop("disabled",true);
You could reduce this to:
$('#tes').prop("disabled", !$('#tes').prop("disabled") )
This fetches the current value of the property, negates it with !, then sets that as the new value
If what you want is to toggle the disable prop:
$('#submit1').click(function() {
$('#tes').prop("disabled", !$('#tes').prop("disabled"));
});
I have seen many examples about adding and removing normal text fields. BUt on date picker i got the problem.
I have these codes to choose the date.
I want to add more than one date so how i can new date fields dynamicly. And also remove. There are manye xamples only for adding.
<div class="form-group">
<label class="control-label col-md-3">Dates</label>
<div class="col-md-2">
<input class="form-control form-control-inline input-medium date-picker" size="16" type="text" value="" />
<span class="help-block">Choose a date </span>
</div>
<div class="col-md-1">
<div class="input-group">
<span class="input-group-btn">
<button id="plus" class="btn btn-success" type="button" name="add">
<i class="glyphicon glyphicon-plus"></i>
</button>
</span>
</div>
</div>
</div>
I got these code which is working for normal text field dynamic adding.
var template = '<div class="input-group"><input type="text" class="form-control"/></div>',
minusButton = '<span class="btn input-group-addon delete-field">(-)</span>';
$('.add-field').click(function() {
var temp = $(template).insertBefore('.help-block');
temp.append(minusButton);
});
$('.fields').on('click', '.delete-field', function(){
$(this).parent().remove();
});
I am using bootstrap date picker and bootsrap version is 3.3.6.
Thanks in advance.
You can attach datepicker to the element after inserting it to the DOM.
$('.add-field').click(function() {
var temp = $(template).insertBefore('.help-block');
temp.find("input[type=text]").datetimepicker();
temp.append(minusButton);
});
<div class="panel-footer">
<div class="input-group">
<input id="btn-input" type="text" class="form-control input-sm chat_input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm" id="btn-chat">Wyślij</button>
</span>
</div>
</div>
I have HTML like above. My question is how to get the input value when I click on #btn-chat. I have been trying of jQuery functions like .prev() and .prevAll() but those didn't work for me.
Given that the input element has an id attribute it should be unique, so you can select it directly without the need to traverse the DOM:
$('#btn-chat').click(function() {
var inputVal = $('#btn-input').val();
// do something with the value here...
});
If, for whatever reason, you still want to use DOM traversal you can use closest() to get the nearest common parent to both elements, and then find():
$('#btn-chat').click(function() {
var inputVal = $(this).closest('.input-group').find('input').val();
// do something with the value here...
});
If you have multiple elements in your page with the same id attribute then your HTML is invalid and you would need to change it. In that case, use class attributes to identify and select the elements.
$("#btn-chat").click(function(){
var input_values = $(this).parent().parent().find("input").val();
alert(input_values);
});
As #RoryMcCrossan has pointed out, if you have multiple elements with the same id attribute, you would need to use a class attribute instead.
$(function() {
$('.btn-chat').on('click', function() {
var val = $(this).closest('.input-group').find('input.btn-input').val();
//OR $(this).parent().prev().val();
console.log( val );
});
});
$(function() {
$('.btn-chat').on('click', function() {
var val = $(this).closest('.input-group').find('input.btn-input').val();
console.log( val );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>
<div class="panel-footer">
<div class="input-group">
<input type="text" class="form-control input-sm chat_input btn-input" placeholder="Wpisz tutaj swoją wiadomość..." />
<span class="input-group-btn">
<button class="btn btn-primary btn-sm btn-chat">Wyślij</button>
</span>
</div>
</div>