I try to show a message when someone clicks on a checkbox.
Do you have any idea to display a message?
I tried, but it doesn't work.
The Checkbox :
echo '<div><input type="checkbox" value="' . $products_id .'" id="productsCompare" title="Compare" /> Compare</div>';
the script including the element to show a message
<script>
$(function() {
$('input[type=checkbox]').change(function(){
var chkArray = [];
$('#container').html('');
//put the selected checkboxes values in chkArray[]
$('input[type=checkbox]:checked').each(function() {
chkArray.push($(this).val());
});
// message
var toggle = false;
$('#productsCompare').click(function() {
$('input[type=checkbox]').attr('checked',!toggle);
toggle = !toggle;
$(\'productsCompare\').show();
});
//If chkArray is not empty show the <div> and create the list
if(chkArray.length !== 0){
$.ajax({
method: 'POST',
url : "http://localhost/.........test.php",
data : {product_id: chkArray},
});
}
});
})
</script>
The message
<div class="col-md-12" id="productsCompare" style="display:none;">
<div class="separator"></div>
<div class="alert alert-info text-md-center">
<span class="text-md-center">
<button class="btn">Compare</button>
</span>
</div>
</div>
Check my example and try to modify it with your case.
$("#box").addClass('novis');
$("#ch").on('click',function(){
$("#box").toggleClass('novis','vis');
});
.vis{ display: block; }
.novis{ display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Show</label>
<input type="checkbox" id="ch" unchecked>
<div id="box">
<p>Hello world</p>
</div>
Related
How would I adapt this code to show a <div>No Results Found</div> on the page when no results are found?
I've got this simple image gallery with an input to filter results based on the contents of the data-filter attribute:
<input type="text" name="filter" placeholder="Filter" id="filter">
<div class="results-gallery">
<div class="gallery-thumbnail" data-filter="Apple">image</div>
<div class="gallery-thumbnail" data-filter="Orange">image</div>
<div class="gallery-thumbnail" data-filter="Banana">image</div>
</div>
And the jQuery:
$("#filter").keyup(function() {
var value = $(this).val().toLowerCase();
$(".gallery-thumbnail").filter(function() {
$(this).toggle($(this).attr("data-filter").toLowerCase().indexOf(value) > -1);
});
});
You could use the same method and do it like this:
$(document).ready( function(){
$("#filter").keyup( function(){
var value = $(this).val().toLowerCase();
$(".gallery-thumbnail").filter(function() {
$(this).toggle($(this).attr("data-filter").toLowerCase().indexOf(value) > -1);
});
$('.noresult').toggle($(".gallery-thumbnail:visible").length == 0)
});
});
Demo
$(document).ready( function(){
$("#filter").keyup( function(){
var value = $(this).val().toLowerCase();
$(".gallery-thumbnail").filter(function() {
$(this).toggle($(this).attr("data-filter").toLowerCase().indexOf(value) > -1);
});
$('.noresult').toggle($(".gallery-thumbnail:visible").length == 0)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="filter" placeholder="Filter" id="filter">
<div class="results-gallery">
<div class="gallery-thumbnail" data-filter="Apple">image</div>
<div class="gallery-thumbnail" data-filter="Orange">image</div>
<div class="gallery-thumbnail" data-filter="Banana">image</div>
<div class="noresult" style="display:none">No Results Found</div>
</div>
You put 'No Results' div on the page, with a class which initially defaults it to be hidden (display:none). If your filter returns no results, you add a class to the div to show it (display: block). When the filter is cleared, and you have results again, you remove the 'show' class, reverting it back to it's default 'hidden' state.
I have text box(for live search) and whenever i enter more than 3 characters then
result is showing (from database) via ajax response as checkboxes with name, I just want whenever user
select any checkbox so this checkbox should display in div so user can search multiple data and can see
selected checkboxes,How can i do this ?
Right now Here is my html code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form action="/">
<h1>Newsletter Form</h1>
<p class="question">Newsletter Type?</p>
<div class="question-answer">
<label><input type="radio" value="Delas" name="DealType" /> Deals</label>
<label><input type="radio" value="PremiumDeals" name="DealType" /> Premium Deals</label>
</div>
<div id="deals-section" style="display:none;">
<p class="question">Add Merchant Name</p>
<div class="question-answer">
<input type="text" name="merchantname" id="merchantname" value="">
</div>
<div id="suggestions">
<div id="suggestionslist">
</div>
</div>
<img id="loading-image" src="<?php echo base_url(); ?>/assets/images/ajax-loader.gif" style="display:none;"/>
<table id="fees_table">
</table>
<div class="form-group">
<label class="control-label col-xs-3"></label>
<div class="col-xs-8">
<ul id="sparepartList" style="list-style-type: none; padding: 0;"></ul>
</div>
</div>
<div class="btn-block" id="send" >
<button type="submit" href="/">Send</button>
</div>
</div>
</form>
Here is my script which showing "MerchantName"(data from database) with "checkbox",i just want whenever we click on any
checkbox this "Merchant Data" should display in seprate div/belowcheckbox, How can i do this ?
<script>
$('#merchantname').keyup(function() {
var merchantname = $(this).val();
if(merchantname.length>= 3){
$.ajax({
type: 'POST',
url: "<?php echo base_url('Newsletter/GetMerchantName');?>",
cache : false,
data: {'merchantname': merchantname},
dataType: "json",
async: false,
beforeSend: function() {
$("#loading-image").show();
},
success: function(response) {
$('#sparepartList').empty();
$.each(response, function(key,value)
{
let li = $('<li><input type="checkbox" name="merchantName[]" value="' + value.merchantName + '" />' +
'<input type="text" name="sparepart" value="' + value.merchantName + '" /></li>');
$('#sparepartList').append(li);
});
$("#loading-image").hide();
},
error: function(response) {
console.log(response);
}
})
return false;
}
});
</script>
You can get the checkbox value on checked with jquery.
$('input[type=checkbox]').on('change', function() {
var val = this.checked ? this.value : '';
$('#showDiv').html(val);
});
My radio button are named dynamically. How to check all the checkbox on div click. The div and each radio has unique id. The div actually represent cards. I want upon clicking on card how to select all the listed radio in div
How to dynamically get all child node from javascript but check all the radio
<div id=<?= ($counter-1) ?> class="card categoryCard" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title"><?= $rows[$counter-1]["TICKETDESCRIPTION"]?></h5>
<input type="radio" id=<?='TICKETDESCRIPTION'.($counter-1) ?> name="TICKETDESCRIPTION" >
<p class="card-text"><label>RM <?= $rows[$counter-1]["TICKETPRICE"]?></label></p>
<input type="radio" id=<?='TICKETPRICE'.($counter-1) ?> name="TICKETPRICE" >
</div>
</div>
Below is my javascript code
$('.categoryCard').click(function(){
var id = $(this).attr('id');
var radiobtn = document.getElementById("TICKETDESCRIPTION"+id);
radiobtn.checked = true;
alert(id);
});
// assuming jquery
$('.categoryCard').click(function(e){
$('input[type="radio"]', this).each( function( i) {
$(this).prop('checked', true);
});
});
There are many ways to implement the same. I've described the two ways.
You must not use the ID as duplicate.
ID is identifier for the elements, so it must not be duplicate.
$('.categoryCard').click(function(e){
$('input[type="radio"]', this).each( function( index, element) {
$(element).prop('checked', true);
});
});
$('.categoryCard').click(function(e){
var id = $(this).attr('id');
$('input[data-details="'+ id +'"]', this).each( function( index, element) {
$(element).prop('checked', true);
});
});
.categoryCard{
border: 1px solid #d4d4d4;
padding: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="1" class="card categoryCard" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Desc</h5>
<input type="radio" name="TICKETDESCRIPTION">
<p class="card-text">Price</p>
<input type="radio" name="TICKETPRICE" >
</div>
</div>
<!-- 2nd Method there must be no duplicate ID -->
<div id="2" class="card categoryCard" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Desc</h5>
<input type="radio" name="TICKETDESCRIPTION" data-details ="1">
<p class="card-text">Price</p>
<input type="radio" name="TICKETPRICE" data-details ="1" >
</div>
</div>
It can be also solved like this:-
$('.categoryCard').click(function(){
$(this).find('input[type="radio"]').each(function() {
$(this).prop('checked', true);
});
});
sorry i do not speak english well, i want to create a tool that allows to duplicate a div thanks to an "input number" and a button and then I also want to clone this tool by reinitializing it to be able to use the tool again , Here is a piece of code:
$(function() {
$('#btn_dupliquate').on('click', function() {
var numDuplication = $('#num-duplication').val();
if (numDuplication > -1) {
var div = $('.common_preview');
$('.result').html('');
for (var i = 0; i < numDuplication; i++) {
$('.result').append(div.clone());
}
}
});
});
$(function() {
$(".heading").keyup(function() {
var heading=$(this).val();
$(".common_preview").html("<div class='bloc'><p class='model'>"+heading+"</p></div>");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="toNumDuplicate">
<input type="text" class="heading" />
<br/>
<br/>
<input id="num-duplication" type="number" >
<br/>
<br/>
<button id="btn_dupliquate"> dupliquate </button>
</div>
<div id="toDuplicate">
<div class="common_preview" >
<div class="bloc">
<p class="model">test</p>
</div>
</div>
</div>
<div class="result"></div>
<button id="btn_clone">clone</button>
You could abstract your function to take dynamic selector strings for the duplicate button, duplicate number input, preview div and result div.
I have a button Resend , and on click of it , the checkboxes get enable against the following:
id="AlertSent"
id="AlertNotSent"
id="AlertInProgress"
Now the DIV Code for Above mentioned DIVS is as below
<div class="span9">
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox1" name="checkbox1"/>
</div>
<div id="AlertSent" class="span12">
<label><spring:message code='alert.sent' />:</label>
</div>
</div>
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox2" name="checkbox2"/>
</div>
<div id="AlertNotSent" class="span12">
<label><spring:message code='alert.not.sent'/>:</label>
</div>
</div>
<div class="row-fluid">
<div id="enableCheckBox" class ="span12">
<input type="checkbox" id="checkbox3" name="checkbox3" class="required" />
</div>
<div id="AlertInProgress" class="span12">
<label> <spring:message code='alert.in.progress' />:</label>
</div>
</div>
</div>
The button Code for Resend and Done is
<input type="button" value="button" id="resend"/>
<input type="button" value="button" id="done"/>
The JQuery Code is
var j$ = jQuery.noConflict();
j$(document).ready(function() {
var resendbtn = j$('#resend');
var allChkBox = j$('input[name="enableCheckBox"]');
var verifyChecked = function() {
if ! $('#resend').click {
allChkBox.attr('disabled', 'disabled');
} else {
allChkBox.removeAttr('disabled');
}
};
verifyChecked();
resendbtn.change(verifyChecked);
});
The requirement is on click of Resend, the checkboxes appear against above DIVS (AlertSent, AlertNotSent and AlertInProgress), and the Resend button Becomes Done, and if a User unchecks all the checkboxes then the Done Button becomes Resend again.
How do I write a JQuery/JavaScript code to achieve above?
Please suggest
It's hard to know exactly what you want here, but perhaps this will get you started:
http://jsfiddle.net/ZqH7B/
to handle showing the checkboxes:
$("#resend").on( 'click', function () {
$('.enableCheckBox').css('visibility', 'inherit');
$(this).hide().next().show();
$('input:checkbox').prop('checked', true);
});
to handle uncheck behavior:
$('input[type=checkbox]').on( 'change', function() {
var num = $('input:checked').length;
if ( num == 0 ) { $('#resend').show().next().hide(); }
});
Try following code:
HTML:
<input type="checkbox" class="chk">
<input type="button" value="Resend" class="toggle">
JS:
$(document).ready(function(){
$(".chk").prop("checked","checked");
$(".chk").css('display','none');
$(".toggle").click(function(){
$(".chk").css('display','block');
$(".chk").prop("checked","checked");
$(this).val("Done");
});
$(".chk").change(function(){
var all = $(".chk").length;
var chked = $(".chk").not(":checked").length;
if(all == chked){
$(".chk").css('display','none');
$(".toggle").val("Resend");
}
})
});
JSFIDDLE DEMO