hi I don't remove parnet.
My code:
<div class="prdctfltr_add_scroll">
<div class="prdctfltr_checkboxes">
<label class="prdctfltr_ft_">
<input type="checkbox" value="">
<span>
<img src="" onerror="delNoneOptionFilters(this)" class="product_filter_none_option">
<script>function delNoneOptionFilters( x ){ $(x).closest('label').remove; }</script>
</span>
</label>
<label class="prdctfltr_ft_popularity">
<input type="checkbox" value="popularity">
<span>Popularity</span>
</label>
<label class="prdctfltr_ft_rating">
<input type="checkbox" value="rating">
<span>Average rating</span>
</label>
<label class="prdctfltr_ft_date">
<input type="checkbox" value="date">
<span>Newness</span>
</label>
<label class="prdctfltr_ft_price">
<input type="checkbox" value="price">
<span>Price: low to high</span>
</label>
<label class="prdctfltr_ft_price-desc">
<input type="checkbox" value="price-desc">
<span>Price: high to low</span>
</label>
</div>
</div>
I want delete label class="prdctfltr_ft_"
remove is not a property It is a function you have to use like this $(x).closest('label').remove().
function delNoneOptionFilters( x ){
$(x).closest('label').remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prdctfltr_add_scroll">
<div class="prdctfltr_checkboxes">
<label class="prdctfltr_ft_">
<input type="checkbox" value="">
<span>
<button onclick="delNoneOptionFilters(this)">delete</button>
</span>
</label>
<label class="prdctfltr_ft_popularity"><input type="checkbox" value="popularity"><span>Popularity</span></label><label class="prdctfltr_ft_rating"><input type="checkbox" value="rating"><span>Average rating</span></label><label class="prdctfltr_ft_date"><input type="checkbox" value="date"><span>Newness</span></label><label class="prdctfltr_ft_price"><input type="checkbox" value="price"><span>Price: low to high</span></label><label class="prdctfltr_ft_price-desc"><input type="checkbox" value="price-desc"><span>Price: high to low</span></label>
</div>
</div>
Please Try This:-
function delNoneOptionFilters( x ){ $(x).parents('label').remove(); }
Related
I have a form with many input fields. On each input change there is a checkbox which get checked. Now i want to show only those fields which are checked on button click and hide others. I am not sure what will be the best way to achieve that behaviour. Later on next button click i will submit only checked fields.
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" >click</button>
Following jQuery function is to check checkbox on input field change
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
If I understand your question right, it can help you: https://api.jquery.com/has/
Like this:
$('.form-group:not(:has(input:checked))').hide();
Here's a simple example. Alternatively, you might also look at Select2 plugin.
<script>
$(document).ready(function(){
//hide by default
$('#field1').hide();
$('#check1').click(function(e){
if ($('#check1').prop('checked')){
$('#field1').show();
}else{
$(#field1).hide();
}
});
});
</script>
<body>
<form>
<label for="check1">click me</label>
<input id="check1" type="checkbox"/>
<input id="field1" type="text"/>
</form>
</body>
try this one line of js code
<button type="button" id="btn">click</button>
$('#btn').on('click', function () {
$('[type=checkbox]:not(:checked)').closest(".form-group").hide()
});
Here I tried for a solution
$('.form-group').find('input[type=checkbox]').on('change', function() {
//hide input
$(this).closest('.form-group').find('.field').attr('style', 'display:none');
//hide checkbox
$(this).closest('.form-group').find('.checkbox').attr('style', 'display:none');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox" checked='true' />
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox" checked='true' />
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox" checked='true' />
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="submit">click</button>
Here is a solution for your question.
On button click event you can check the value of each checkbox which is checked or not!
On the basis of is(':checked') hide/show the input field
$('.form-group').find('input[type=text], select').on('change', function () {
$(this).closest('.form-group').find('input[type=checkbox]').prop('checked', true);
});
$("#btn").click(function(){
var count = 0;
$('input[type=checkbox]').each(function(ind,value){
if ($(this).is(':checked')) {
count++;
}
});
//check if atleast one check box is selected
if(count > 0){
$('input[type=checkbox]').each(function(ind,value){
if (!$(this).is(':checked')) {
$(this).parent().hide();
$(this).parent().next().hide();
}
})
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-1" id="checkbox-1" type="checkbox"/>
<label for="checkbox-1"></label>
</div>
<div class="field">
<input type="text" value="" id="field-1" name="field-1">
<label class="form-label">Field 1</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-2" id="checkbox-2" type="checkbox"/>
<label for="checkbox-2"></label>
</div>
<div class="field">
<input type="text" value="" id="field-2" name="field-2">
<label class="form-label">Field 2</label>
</div>
</div>
<div class="form-group">
<div class="checkbox">
<input value="1" name="checkbox-3" id="checkbox-3" type="checkbox"/>
<label for="checkbox-3"></label>
</div>
<div class="field">
<input type="text" value="" id="field-3" name="field-3">
<label class="form-label">Field 3</label>
</div>
</div>
<button type="button" id="btn">click</button>
I have a form with many checkbox. User must select at least one of them to submit the form. I've tested other stacks found here without success. This is my HTML code:
<form id="formnewsletter" action="mypage">
<input name="list" value="1" type="hidden">
<input class="form-control" id="email" name="email" value="" placeholder="Email" required="required" type="email">
<div class="formphonebox">
<input class="form-control" id="prefix" name="prefix" value="0039" style="display:inline; width:25%;" type="text"> <input class="form-control" id="number" name="number" value="" placeholder="Cellulare" style="width:70%; float:right" type="text">
</div>
<hr>
<div class="formlistbox">
<span class="checkbox">
<input class="listchecknewsletter" value="26" id="group26" name="group" type="checkbox">
<label for="group26">group26</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="47" id="group47" name="group" type="checkbox">
<label for="group47">group47</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="41" id="group41" name="group" type="checkbox">
<label for="group41">group41</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="55" id="group55" name="group" type="checkbox">
<label for="group55">group55</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="30" id="group30" name="group" type="checkbox">
<label for="group30">group30</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="58" id="group58" name="group" type="checkbox">
<label for="group58">group58</label>
</span>
</div>
<hr>
<span class="checkbox">
<input id="privacycheck" type="checkbox" required="required">
<label for="privacycheck"><small>Privacy Policy</small></label>
</span>
<div align="center">
<button type="submit" name="Submit" class="btn btn-danger" value="Iscrivimi">Iscrivimi</button>
</div>
</form>
UPDATE with solution. This is the script that worked in my case:
//controlla che almeno un checkbox delle liste/gruppi newsletter sia flaggato
$(document).ready(function () {
function checkMe() {
document.getElementById("formnewsletter").onsubmit = function() {
//controlla che almeno un checkbox delle liste/gruppi newsletter sia flaggato
if (document.querySelector('.listchecknewsletter:checked')) {
// at least one is checked
} else {
// none are checked
alert("Seleziona una lista!");
return false;
}
};
}
window.onload = function() {
checkMe();
}
});
Can someone suggest me the JavaScript code to let it work fine?
Since you haven't tagged it with jQuery, here is a solution in plain ol' javascript.
You can use CSS class of the checkboxes along with querySelector
if (document.querySelector('.listchecknewsletter:checked')) {
// at least one is checked
} else {
// none are checked
}
with jquery it would work like this for example:
$("#submit").on("click", function() {
var checkboxes = $('.formlistbox input[type="checkbox"]');
if(checkboxes.filter(':checked').length < 1) {
alert("please check at least 1 checkbox");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="list" value="1" type="hidden">
<input class="form-control" id="email" name="email" value="" placeholder="Email" required="required" type="email">
<div class="formphonebox">
<input class="form-control" id="prefix" name="prefix" value="0039" style="display:inline; width:25%;" type="text"> <input class="form-control" id="number" name="number" value="" placeholder="Cellulare" style="width:70%; float:right" type="text">
</div>
<hr>
<div class="formlistbox">
<span class="checkbox">
<input class="listchecknewsletter" value="26" id="group26" name="group" type="checkbox">
<label for="group26">group26</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="47" id="group47" name="group" type="checkbox">
<label for="group47">group47</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="41" id="group41" name="group" type="checkbox">
<label for="group41">group41</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="55" id="group55" name="group" type="checkbox">
<label for="group55">group55</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="30" id="group30" name="group" type="checkbox">
<label for="group30">group30</label>
</span>
<span class="checkbox">
<input class="listchecknewsletter" value="58" id="group58" name="group" type="checkbox">
<label for="group58">group58</label>
</span>
</div>
<hr>
<span class="checkbox">
<input id="privacycheck" type="checkbox" required="required">
<label for="privacycheck"><small>Privacy Policy</small></label>
</span>
<div align="center">
<button type="submit" name="Submit" class="btn btn-danger" value="Iscrivimi" id="submit">Iscrivimi</button>
</div>
If you (want to) use jQuery:
if($('.listchecknewsletter:checked').length > 0) {
// one or more are checked
}
Further, if you want to POST all the checkbox values, you have to change their name to group[], to make it an array.
I am using jquery to get data from the database and want to use it as ids for multiple div. I am able to fetch the data from the database and then able to iterate the data as well using loop. But when i try to use the .prop() inside the loop, it does not work at all. When i try to log the values on console, its empty. Below is my code. Please help me out.
$(document).ready(function () {
$.get('/getInfringementTypes', function(data)
{
var parsed = JSON.parse(data);
//I am getting the following data back from db
// ["trademark", "copyright", "patent", "design", "other", "item-infringement"]
var valueArray = [];
$(parsed).each(function(index,value)
{
valueArray[index] = value;
});
var i = 0;
for(i=0; i < valueArray.length; i++)
{
$('#'+ valueArray[i]).click(function() {
if( $('#'+valueArray[i]).prop('checked',true)) {
$('#'+valueArray[i]+'List').show('5000');
}
});
console.log('#'+valueArray[i]+'List');
}
console.log(valueArray);
});
});
Here is my HTML code:
<div class="row">
<section>
<b>Verify Violation *</b>
<br> #foreach(getInfringementTypes() as $infringements_type)
<input type="radio" name="groupVerify" value="{{$infringements_type->infringement_type}}" id="{{Str::slug($infringements_type->infringement_type)}}" />
<label for="{{Str::slug($infringements_type->infringement_type)}}">
{{$infringements_type->infringement_type}}
</label>
#endforeach
</section>
<br>
<section id="subCode">
<div id="trademarkList">
<b>Sub Code *</b>
<br> #foreach(getParentCodeFromDb('Trademark') as $subcode)
<input type="radio" name="groupTrademark" value="{{$subcode}}" id="{{$subcode}}" />
<label for="{{$subcode}}">
{{$subcode}}
</label>
#endforeach
</div>
<div id="copyrightList">
<b>Sub Code *</b>
<br> #foreach(getParentCodeFromDb('Copyright') as $subcode)
<input type="radio" name="groupCopyright" value="{{$subcode}}" id="{{$subcode}}" />
<label for="{{$subcode}}">
{{$subcode}}
</label>
#endforeach
</div>
<div id="patentList">
<b>Sub Code *</b>
<br> #foreach(getParentCodeFromDb('Patent') as $subcode)
<input type="radio" name="sub_code" value="{{$subcode}}" id="{{$subcode}}" />
<label for="{{$subcode}}">
{{$subcode}}
</label>
#endforeach
</div>
<div id="designList">
<b>Sub Code *</b>
<br> #foreach(getParentCodeFromDb('Design') as $subcode)
<input type="radio" name="sub_code" value="{{$subcode}}" id="{{$subcode}}" />
<label for="{{$subcode}}">
{{$subcode}}
</label>
#endforeach
</div>
<div id="otherList">
<b>Sub Code *</b>
<br> #foreach(getParentCodeFromDb('Other') as $subcode)
<input type="radio" name="sub_code" value="{{$subcode}}" id="{{$subcode}}" />
<label for="{{$subcode}}">
{{$subcode}}
</label>
#endforeach
</div>
<div id="itemList">
<b>Sub Code *</b>
<br> #foreach(getParentCodeFromDb('Item infringement') as $subcode)
<input type="radio" name="sub_code" value="{{$subcode}}" id="{{$subcode}}" />
<label for="{{$subcode}}">
{{$subcode}}
</label>
#endforeach
</div>
</section>
<br> #if($filter['status'] == 'suspect')
<section>
<b>Product *</b>
<br>
<input name="groupProduct" type="radio" id="test1" />
<label for="test1">Handbags-Rocco</label>
<input name="groupProduct" type="radio" id="test2" />
<label for="test2">Handbags-Brenda</label>
<input name="groupProduct" type="radio" id="test3" />
<label for="test3">Handbags-Dracy</label>
<input name="groupProduct" type="radio" id="test4" />
<label for="test4">Handbags-Donna Hobo</label>
<input name="groupProduct" type="radio" id="test5" />
<label for="test5">Handbags-Kristen</label>
<input name="groupProduct" type="radio" id="test6" />
<label for="test6">Apparel-Apparel</label>
<input name="groupProduct" type="radio" id="test7" />
<label for="test7">Footwear-Footwear</label>
<input name="groupProduct" type="radio" id="test8" />
<label for="test8">Other-Other</label>
</section>
#endif
</div>
try the following:
$.each(parsed,function(i,v){
if( $('#'+v).is(':checked')) {
$('#'+v+'List').show('5000');
$('div[id$=List]').not($('#'+v+'List')).hide();
}
});
if you are generating the event functions dynamically, you can use on method instead of bidding the click directly over selector
$( '#'+ valueArray[i] ).on( "click", function() {
console.log( $( this ).text() );
});
I have been struggling with getting the following code to work (example taken from jsfiddle after looking at responses in this forum.
Can anyone see where I'm going wrong?
<script type="text/javascript">
var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");
checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<h1>Button should be enabled if at least one checkbox is checked</h1>
<form>
<div>
<input type="checkbox" name="option-1" id="option-1"> <label for="option-1">Option 1</label>
</div>
<div>
<input type="checkbox" name="option-2" id="option-2"> <label for="option-2">Option 2</label>
</div>
<div>
<input type="checkbox" name="option-3" id="option-3"> <label for="option-3">Option 3</label>
</div>
<div>
<input type="checkbox" name="option-4" id="option-4"> <label for="option-4">Option 4</label>
</div>
<div>
<input type="checkbox" name="option-5" id="option-5"> <label for="option-5">Option 5</label>
</div>
<div>
<input type="submit" value="Do thing" disabled>
</div>
</form>
I have the following fields on a form and was wondering if it is possible to update the hidden input field (itemValue) value based on the user selection from radio buttons? So that the hidden field input value will be equal to the value of the selected radio button...Any example is highly appreciated. Thanks
<form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name">
...
...
<input type="hidden" name="itemValue" value="">
...
<div>
<div>
<label class="label_radio" for="item1">
<span class="labelText">$5</span>
<input type="radio" id="item1" name="item1" value="5"/>
</label>
</div>
<div>
<label class="label_radio" for="item2">
<span class="labelText">$10</span>
<input type="radio" id="item2" name="item2" value="10"/>
</label>
</div>
<div>
<label class="label_radio" for="item3">
<span class="labelText">$15</span>
<input type="radio" id="item3" name="item3" value="15"/>
</label>
</div>
<div>
<label class="label_radio" for="item4">
<span class="labelText">$20</span>
<input type="radio" id="item4" name="item4" value="20"/>
</label>
</div>
</div>
....
....
</div>
</form>
Your radio buttons are currently all independent of each other, meaning that you can quite literally select all 4 of them at the same time. In order to get them to work together (so you can only ever select one at any given time), you'll need to give them all an identical name. For example:
<input type="radio" id="item1" name="item" value="5"/>
...
<input type="radio" id="item2" name="item" value="10"/>
Notice how these both have a name of "item"?
Once you've done that, you can use jQuery like this:
$('[name="item"]').on('change', function() {
$('[name="itemValue"]').val($(this).val());
});
JSFiddle demo. (Note that I've used a text input element rather than a hidden one to easily show you that the value changes.)
$("input[type=radio]").change(function () {
if ($(this).prop(":checked")) {
$('#yourId').val($(this).val())
}
});
<form name="clientPaymentForm" id="clientPaymentForm" action="https://...." method="post" target="_top">>
<div>
<fieldset>
<input id="name" type="text" required placeholder="Client Name">
...
...
<input type="hidden" name="itemValue" value="">
...
<div>
<div>
<label class="label_radio" for="item1">
<span class="labelText">$5</span>
<input type="radio" id="item1" name="item" value="5"/>
</label>
</div>
<div>
<label class="label_radio" for="item2">
<span class="labelText">$10</span>
<input type="radio" id="item2" name="item" value="10"/>
</label>
</div>
<div>
<label class="label_radio" for="item3">
<span class="labelText">$15</span>
<input type="radio" id="item3" name="item" value="15"/>
</label>
</div>
<div>
<label class="label_radio" for="item4">
<span class="labelText">$20</span>
<input type="radio" id="item4" name="item" value="20"/>
</label>
</div>
</div>
....
....
</div>
</form>
JQuery>
$(function(){
$("input[name='item']").change(function(){
$("input[name='itemValue']").val($(this).val());
alert($("input[name='itemValue']").val());
});
});
$('input:radio').change(function () {
if (this.checked) {
$('#hidfld').val($(this).val()));
}
});