I'm making reminder app here is the interface
Now when i click the "All Checked" button all the check boxes removes. I'm using remove() function for that but after removing these check boxes the space remains there, and when I'm putting the new value it's coming after that space. I was trying trim function but its not working
MY HTML
<div class="has-success topSpaceFromRoof">
<div class="checkbox">
</div>
</div>
<button class="btn btn-default btn-block slight" id="allFinished">
ALL Checked
</button>
MY JAVASCRIPT
$('#allFinished').click(function(){
$('span').remove();
$('.checkbox').trim();
});
MY JAVASCRIPT FOR INPUT VALUES
$('<label><span>' +
'<input type="checkbox" id="checkboxSuccess" value="option1">' +
input.val().toUpperCase() +
'</span></label><br/>').appendTo('.checkbox');
event.preventDefault();
Looks Like This
Try this,
$('#allFinished').click(function(){
$('span').remove();
$('.checkbox').html('');
});
Another option you can use by using some CSS like,
.checkbox label{
display:inline-block;
margin:2px 0;
}
And no need to add <br/> after your dynamically added label's.
And some jquery code like,
$('#allFinished').click(function(){
$('.checkbox label').remove();
});
Try
$('#allFinished').click(function(){
$('.checkbox').find('*').remove();
// $('.checkbox').empty();
});
Please try this :
Use .empty(); method
$('#allFinished').click(function(){
$('span').empty();
});
Reference
Demo
This is what you need to code
DEMO
HTML
<input type=text />
<input type=button value=Submit />
<div class="has-success topSpaceFromRoof">
<div class="checkbox">
</div>
</div>
<button class="btn btn-default btn-block slight" id="allFinished">
ALL Checked
</button>
CODE
$(document).ready(function(){
$('#allFinished').click(function(){
$('span').remove();
$('.checkbox').empty();
});
$(":button[value=Submit]").click(function(){
var input=$(":text");
$('<label><span>' + '<input type="checkbox" id="checkboxSuccess" value="option1">' + input.val().toUpperCase() + '</span></label><br/>').appendTo('.checkbox');
});
});
Think about your markup first. Try to come up with a structure which allows you identify a whole block of your checkboxes with its label, the input itself and whatever element you want to associate with this checkbox.
Something like this:
<div class="checkbox-wrapper">
<label>
Blablub
<input type="checkbox" value="1" />
</label>
</div>
Now in your click event you could loop through all your checkboxes (elements with your identifiying class checkbox-wrapper) and remove the whole element if its checkbox is checked:
$(document).ready(function(){
$('#allFinished').on("click", function(){
$(".checkbox-wrapper").each(function(){
if($(this).find("input[type=checkbox]").prop("checked")){
$(this).remove();
}
});
});
});
Working Demo: https://jsfiddle.net/n1o3t3nz/1/
Related
When I click on a checkbox, I append some content to a div (#item_list)
if(cb_new.prop('checked')) {
$("#item_list").append("<input type='hidden' name='post[]' value="+ this.value +">");
} else {
// ??
}
When I uncheck the box I want that exact same string to be removed from the div. Keeping all the others that have a different value (this.value).
So for example I could have:
<div id="item_list">
<input type="hidden" name="post[]" value="102">
<input type="hidden" name="post[]" value="93">
</div>
But if I uncheck
<input type="checkbox" id="d-102-2" name="d-102" value="102" data-id="d-102">
I want :
<div id="item_list">
<input type="hidden" name="post[]" value="93">
</div>
If I check it again, I want it back.
How can I do that?
A vanilla JS solution would look like:
Updated according to your expanded requirements.
document.querySelector(`#item_list input[value='${this.value}']`).remove();
This will query the DOM, find an input element, with a value attribute whose value is equal to this.value, and remove it from the DOM with the remove() method.
A more detailed implementation isn't easy to give without having more information.
You can use the data attribute to assign unique id to the checkbox, once it is checked, input element with same data-uid is added and once unchecked we remove the input element with same data-uid
$(document).ready(function() {
$("#cb_new").change(function() {
if ($(this).prop('checked')) {
$("#item_list").append($("<input data-uid='"+$(this).data('uid')+"' type='text' name='post[]' class='newItem' value='" + $(this).val() + "'>"));
} else {
$('.newItem[data-uid='+$(this).data('uid')+']').remove();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="cb_new" data-uid="8080" value="tick Me" name="test"/><label for="test">Tick Me</label>
<div id="item_list" style="border:1px solid tomato">
</div>
In the markup, i have several divs with same id and inside those divs there are paragraphs and buttons. Now when a button is clicked, i want to get the value of a corresponding paragraph tag under the same div as that particular button. How can i do this with jQuery? The markup is as followed:
<div class="col-sm-5 narrow">
<p id="title">Jhon123</p>
<p id="text">This is the status of jhon</p>
<p>posted at 12:30pm GMT6+</p>
<form class="form-inline">
<input type="text" class="form-control" id="reply" placeholder="Type and enter to reply">
<button type="button" class="btn btn-default" id="repost">Re-Tweet</button>
</form>
</div>
When the button with the id #repost is clicked, i want to access the html inside the p tag with the id #text. I tried something like this:
$('#retweet').click(function(e){
e.stopPropagation();
var text = $(this).parent("div").closest('#text');
alert("some retweet button has been pressed which has the text:"+text);
});
You can use the jQuery .closest() function to get the containing <div> and then find the <p> tag you want inside it:
$('#repost').on('click', function () {
var text = $(this).closest('div[class^=col]').find('#text').html();
console.log(text);
});
The div[class^=col] selector means "find the closest div tag with a class starting with col". This allows you to use the other bootstrap column classes as well and have it still work.
$('#repost').click(function(){
console.log($(this).closest('div').find('#text').html());
});
See demo http://jsbin.com/wojupoyosa/1/edit?html,js,console,output
and as comments suggest you IDs should be unique per page so you should use a class or something else instead.
$( "#text" ).text() will give you the value inside P tag. So your code will look something like:
$('#repost').click(function(){
$( "#text" ).text() // save it to wherever you want
});
As a side note it is generally frowned upon to have css id's that are not unique - shared identifiers should use a class.
If you change all your ids into classes as shown in the demo below, then the following code should work fine. Also, you do not need the form element.
$('.repost').click(function(){
var text = $(this).closest('div').find('.text').text();
alert("some retweet button has been pressed which has the text: " + text);
});
$(function() {
$('.repost').click(function(){
var text = $(this).closest('div').find('.text').text();
alert("some retweet button has been pressed which has the text: " + text);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-5 narrow">
<p class="title">Jhon123</p>
<p class="text">This is the status of jhon</p>
<p>posted at 12:30pm GMT6+</p>
<form class="form-inline">
<input type="text" class="form-control reply" placeholder="Type and enter to reply">
<button type="button" class="btn btn-default repost">Re-Tweet</button>
</form>
</div>
<div class="col-sm-5 narrow">
<p class="title">Mary123</p>
<p class="text">This is the status of mary</p>
<p>posted at 12:35pm GMT6+</p>
<form class="form-inline">
<input type="text" class="form-control reply" placeholder="Type and enter to reply">
<button type="button" class="btn btn-default repost">Re-Tweet</button>
</form>
</div>
Sorry but I'm quite a noob if it comes to Javascript with HTML.
I'm trying to make a button that will change the value of it when a multiple checkboxes are checked.
Example:
If one checkbox is checked = Button: Delete 1 row
If two checkboxes are checked = Button: Delete 2 rows
etc.
And I want this to happen automaticly when I check all checkboxes. The only problem is that it won't change anything.
JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('input[type="checkbox"]').click( function() {
$("input[type=submit]").val("Delete "+$('input:checkbox:checked').length+" rows");
});
</script>
HTML:
<input type="submit" name="submit" class="btn btn-success" value="Verwijder" />
The server-side of this(PHP) does work(deleting the rows).
Thank you for helping and your time!
First you must put your code inside this block:
$(document).ready(function(){
// your code
});
We use this because:
The document.ready handler is triggered when the DOM has been loaded
by the browser and ready to be manipulated.
Second:
<input type="submit" name="submit" class="btn js-button btn-success" value="Verwijder" />
$(".js-button").val("Value that you need");
Try this.
Fiddle Demo
HTML
<input type="submit" name="submit" class="btn btn-success" value="Verwijder" />
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
JS Code
$('input[type="checkbox"]').on('change', function(){
var rows = $('input[type="checkbox"]:checked').length,
value = rows < 1 ? 'Verwijder' : 'Delete '+rows+(rows<2 ? ' row':' rows');
$('.btn').attr('value', value);
});
I have a page with multiple divs that all look like the example below.
Each div contains a field, a hidden field and a button.
How can I achieve that by click on the button the (visible) input field gets triggered ?
I need to trigger either a click or focus as both fire the same function.
Each button in question has the class="triggerBtn" and the corresponding input field has the class="inputField".
Example div:
<div>
<input type="text" class="inputField" id="field1" name="field1" />
<input type="hidden" name="field1" />
<button type="button" class="btn btn-primary triggerBtn">Find</button>
</div>
I guess you want:
$(".triggerBtn").click(function () {
$(this).closest('div').find('.inputField').focus();
});
add
Onclick="function()" see here
if you need to trigger it manually using jquery you can to this by
$("#field1").trigger("click");
see also here
$(".triggerBtn").on("click",function(e){
$(this).closest("div").find(".inputField").click();
//or $(this).closest("div").find(".inputField").focus();
});
$(".triggerBtn").parent().children("input[type:text]").first().focus()
Updated Jsfiddle: http://jsfiddle.net/ZmL4y/3/
$(document).on("click",".triggerBtn", function() {
var inputField = $(this).closest('div').find('.inputField');
if($(inputField).is(":visible"))
{
$(inputField ).focus();
}
});
I'm trying to build a general function that get's called from four different checkboxes. When the checkbox is checked it should remove the attribute disabled from a button near the checkbox.
my buttons all have diffrent classes like this
button 1: class="button primary pie list-buy-button list_buy_button_1903"
button 2: class="button primary pie list-buy-button list_buy_button_1901"
button 3: class="button primary pie list-buy-button list_buy_button_1899"
button 4: class="button primary pie list-buy-button list_buy_button_1897"
first i bind the event to my checkboxes
$(".avtalsbox").each(function()
{
$(this).click(function()
{
chbclickeventhandler(this);
});
});
then i handle it with this function.. this i where i encounter a problem
i have tried many solutions but noone works?
function chbclickeventhandler(thebox)
{
if (thebox.checked) {
//SOLUTION 1
var button = $(thebox).closest("[class*='buy_button']");
$(button).removeAttr("disabled");
//SOLUTION 2
var button = $(thebox).parent().children("[class*='buy_button']");
$(button ).removeAttr("disabled");
}
}
this is how my html looks like
<div class="buyonly boxhighlight varmepaket1">
<div width="100%" style="float:right;">
<!---köpknapp--->
<form class="product_form" action="/shoppingcart/increase_product_count/" method="post">
<input type="hidden" name="quantity" value="1" id="quantity">
<span class="button-container pie">
<!-- THIS IS THE INPUT I WANT TO REMOVE DISABLED FROM ASWELL AS ADD IT -->
<input class="button primary pie list-buy-button list_buy_button_1903" type="submit" value="Beställ idag!" disabled="">
</span>
<!---crap--->
<input type="hidden" name="product_id" value="1903">
<input type="hidden" name="article_number" value="varmepaket2">
</form>
<!---köpknapp END--->
</div>
<div width="" style="float:right;">
<a href="#" onclick="eb_klarna_sum=14990; $('body').find('#klarna_payment').click(); return false;">
<img class="symbol" src="/layouts/focus/klarna_symbol.png"> Dela upp betalningen från xxx kr/mån</a></div>
<div style="float:left;"><input type="checkbox" class="avtalsbox" name="godkannavtalet" value="varmepaket1">Jag godkänner avtalet!</div>
</div>
Your usage of closest is incorrect try this way: Closest will only get you to the parent or itself provided there is a match in the selector. So here use closest to get to the parent div with the class .buyonly and find for the button inside that.
$(".avtalsbox").change(chbclickeventhandler);
function chbclickeventhandler() {
if (this.checked) {
//SOLUTION 1
var button = $(this).closest(".buyonly").find("[class*='buy_button']");
$(button).prop("disabled", false);
}
}
Fiddle
If you are looking to toggle the button then you can just do:
$(".avtalsbox").change(chbclickeventhandler);
function chbclickeventhandler() {
$(this)
.closest(".buyonly")
.find("[class*='buy_button']")
.prop("disabled", !this.checked);
}
In your case checkbox is not a children of button, so you cannot use closest!
use
$(thebox).closest('.product_form').find(["class*='buy_button']");