I have a datepicker in a div with class pickergroup, I have 3 datepicker in my page, and this is why I use a group and different names
<div class="pickergroup">
<input type="text" name="day1" id="day1"/> /
<input type="text" name="month1" id="month1"/> /
<input type="text" name="year1" id="year1"/>
<input type="hidden" id="date1" name="date1"/>
<div id="datepicker1" name="calendar"></div>
</div>
In my jquery I want to detect when clicking the id wich starts with "datepicker", I guess something like:
$(document).on('click', '.pickergroup id^="datepicker"', function() {
$(".pickergroup").find('[id^="datepicker"]').datepicker({
//my datepicker code
});
});
but this is not correct.
how can I do it?
The problem is how you're selecting the element inside of the event handler.
$(".pickergroup").find('[id^="datepicker"]')
means "find all elements with the class of pickergroup. Find all of their children which have an ID starting with datepicker." Instead, you want to use this and fix your selector from
.pickergroup id^="datepicker"
to
.pickergroup [id^="datepicker"]
$(document).on('click', '.pickergroup [id^="datepicker"]', function() {
var $this = $(this); // The div that was clicked
console.log($this.text());
});
.pickergroup div {
float: left;
margin-right: 1em;
width: 200px;
height: 200px;
background: #0F0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pickergroup">
<div id="datepicker1">A</div>
</div>
<div class="pickergroup">
<div id="datepicker2">B</div>
</div>
<div class="pickergroup">
<div id="datepicker3">C</div>
</div>
<div class="pickergroup">
<div id="can-t-click-me">D</div>
</div>
First of all, the datepicker element needs to be an input. And remember, ID's are unique. If you using starts with selector, it is ok. But please dont get confusing with this.
Second, why need seperate fields? You could use one datepicker, decide the format you want to display and you could also parse the returned value from the datepicker in the format you need/want. Please have a look at the documentation.
Related
Why is my code not working? i need to simulate click on radio button. Radio button has click event.
$(".form-group").click(function() {
alert("clicked")
$(this).closest(".hotelObj", function() {
$(this).trigger("click");
})
});
.form-group {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="male" style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Given the markup you've provided, javascript isn't necessary for this task, unless there's some other requirement you've left out.
Since the label contains all the area that you want the click handler to affect, it should just work as is (clicking anywhere in the pink box will cause the radio button to become selected).
.form-group {
background-color: pink;
}
<div class="form-group">
<label style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Your code is not working because you are using .closest() jquery method which will look for element starting from itself and then up in DOM tree.
This way element with class.hotelObj is never found.
You need to use .find() method to find .hotelObj, because it's inside .form-group.
$(".form-group").click(function() {
$(this)
.find(".hotelObj")
.trigger("click");
});
Try onClickHandled property
<input type="checkbox" onclick="onClickHandler()" id="box" />
<script>
function onClickHandler(){
var chk=document.getElementById("box").value;
//use this value
}
</script>
I have a div and I want to duplicate it. I mean that I wanted the same div to be duplicated once. I have used such code for it.
$("#btnAddRules").click(function(){
$(".div1_section").clone().insertAfter($(".div1_section"));
});
But, when click on the button again and again , it is adding multiple of the DIVs and I wanted only one div to be inserted after the last div.
<div class="col-md-8">
<div class="row div1_section">
<div class="col-md-6">
<label>hey hey hey</label>
<select class="form-control">
<option>klklk</option>
<option>huhuuh</option>
</select>
<br/>
</div>
<div class="col-md-6">
<label>abc</label>
<div class="input-group-currency">
<span class="currency">pk</span>
<input type="text" class="form-control input-currency" name="start" value="20'000" style="float:left">
</div>
</div>
</div>
Hope to hear from you, soon.
Thanks
Use last() to target just the last element from the collection:
$("#btnAddRules").click(function() {
$(".div1_section").last().clone().insertAfter($(".div1_section").last());
});
.div1_section {
line-height:50px;
margin:20px 0;
padding:0 20px;
background:tomato;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnAddRules">Add More Rules</button>
<div class="div1_section">Original</div>
Remove the event listener after the first click like this:
var callback = function () {
document.getElementById('btnAddRules').removeEventListener('click', callback);
$(".div1_section").clone().insertAfter($(".div1_section"));
}
document.getElementById('btnAddRules').addEventListener('click', callback);
Sorry for using vanilla JS and your jquery, I'm more used to write vanilla JS.
Use last() to target just the last element from the collection and after() to put div after a div:
$("#btnAddRules").click(function(){
$(".div1_section").last().after($(".div1_section").last().clone());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1_section" >
Hi this is testing
</div>
<button type="button" id="btnAddRules">
Add DIV
</button>
I am trying to replace three check boxes within an html form with three different images. The idea being that the user can select the pictures by clicking on them rather than clicking on a check box. I've been putting togther some code but can't figure out how to make all the checkboxes selectable. At the moment only the first images works when it is clicked on. Can anyone help me? I'm a real novice with javascript I'm afraid. See fiddle here
The form
<form id="form1" action="" method="GET" name="form1">
<div class="col-md-3">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck" name="pic1" value=9></div><div class="col-md-3">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck" name="pic2" value=12></div><div class="col-md-3">
<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png" title="blr" id="blr"><input type="checkbox" id="imgCheck" name="pic3" value=7></div>
<input type="submit" name="submit" value="Add" />
</div>
</form>
The javascript
$('#blr').on('click', function(){
var $$ = $(this)
if( !$$.is('.checked')){
$$.addClass('checked');
$('#imgCheck').prop('checked', true);
} else {
$$.removeClass('checked');
$('#imgCheck').prop('checked', false);
}
})
Why use JavaScript at all? You can do this with CSS, the :checked attribute and a label element.
input[type=checkbox] {
display: none;
}
:checked+img {
border: 2px solid red;
}
<label>
<input type="checkbox" name="checkbox" value="value">
<img src="http://lorempixel.com/50/50/" alt="Check me">
</label>
This is happening because you're using the same ID more than one. IDs should be unique. Instead of using id="blr", try using class="blr". I updated the fiddle:
http://jsfiddle.net/0rznu4ks/1/
First, as Amar said, id should be unique. Use classes for multiple elements.
Also pay attention for semicolons and closing html tags.
To your question:
use the function .siblings() to get the relevant checkbox element.
$('.blr').on('click', function () {
var $$ = $(this);
if (!$$.is('.checked')) {
$$.addClass('checked');
$$.siblings('input.imgCheck').prop('checked', true);
} else {
$$.removeClass('checked');
$$.siblings('input.imgCheck').prop('checked', false);
}
});
See demo here:
http://jsfiddle.net/yd5oq032/1/
Good luck!
i am new to jQuery, and i am trying to figure out how to create the jQuery function of the checkboxes, what i want to attain is that, when a user clicked on Yes the checkboxes(which will have a display:none) will have a checkmark. But if a user will click on No the checkmark will be removed.
This will be a selection of multiple Yes and multiple No
have a look at the page im working on http://jsfiddle.net/4x2f52ka/
I have started the script for it, but for some reason, when i started to select Yes on the first selection, another yes to the second selection, and if im gonna select No to the 3rd item, the 2 Yes will be removed. It is fine if i will select all yes and all no, but if im gonna select alternate Yes and No, it doesnt allow me to.
this is my code for the html
<div class="row marginBottom">
<div class="col-xs-6">
<label class="alignMid">Have you found a property?</label>
</div>
<div class="col-xs-6">
<span class="opt_yes"><p style="line-height: 38px; font-size:15px;">YES</p></span>
<span class="opt_no"><p style="line-height: 38px; font-size:15px;">NO</p></span>
<input type="checkbox" name="FoundProperty"/>
</div>
</div>
<div class="row marginBottom">
<div class="col-xs-6">
<label class="alignMid">Would you like a free RP Data Property Report?</label>
</div>
<div class="col-xs-6">
<span class="opt_yes"><p style="line-height: 38px; font-size:15px;">YES</p></span>
<span class="opt_no"><p style="line-height: 38px; font-size:15px;">NO</p></span>
<input type="checkbox" name="FreeRPData" />
</div>
</div>
and this is my code for the jQuery
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.opt_yes').click(function () {
jQuery(this).addClass('selected');
jQuery('.opt_no').removeClass('selected')
if (jQuery(this).hasClass('selected')) {
jQuery(this).parent().find("input[type='checkbox']").prop('checked', true);
}
});
jQuery('.opt_no').click(function () {
jQuery(this).addClass('selected');
jQuery('.opt_yes').removeClass('selected')
if (jQuery(this).hasClass('selected')) {
jQuery(this).parent().find("input[type='checkbox']").prop('checked', false);
}
});
});
</script>
Can anyone help me please?
You're loosing the context of your check boxes. It works for yes, because you use this, but for the no items, you just grab every 'no box' on the document using jQuery('.opt_no'). Because it's so broad, all 'no box' boxes are affected.
You can very easily narrow your selectors with this syntax: jQuery('selector', context).
In this case, I recommend this.parentNode like so :
jQuery('.opt_yes', this.parentNode).removeClass('selected')
See my demo here: http://jsfiddle.net/m5aug81a/
For more info on using contexts for your jQuery objects, see here
You have to remove selected class only from sibling of yes or no. Here's the code:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('.opt_yes').click(function () {
jQuery(this).addClass('selected');
jQuery(this).siblings('.opt_no').removeClass('selected')
if (jQuery(this).hasClass('selected')) {
jQuery(this).parent().find("input[type='checkbox']").prop('checked', true);
}
});
jQuery('.opt_no').click(function () {
jQuery(this).addClass('selected');
jQuery(this).siblings('.opt_yes').removeClass('selected');
if (jQuery(this).hasClass('selected')) {
jQuery(this).parent().find("input[type='checkbox']").prop('checked', false);
}
});
});
</script>
What I'm trying to accomplish is when a user has focus on a text box, the field set that's in will add a class "active_fieldset" so it gives a nice visual cue of where the user is in the form. Using the following javascript, it does affect the parent fieldset but it also affects all sibling fieldsets as well. Am I doing something wrong? Is there something fundamentally wrong with my HTML or javascript?
Example HTML:
<div id="content">
<form action="next_page" method="post">
<fieldset>
<legend>Foo</legend>
<p><label for="one">One</label> <input type="text" class="input_text" name="one" value="" id="one"></p>
</fieldset>
<fieldset>
<legend>Bar</legend>
<p><label for="two">Two:</label><input type="text" class="input_text" name="two" value="" id="two"></p>
</fieldset>
<p><input type="submit" value="Continue →"></p>
</form>
</div>
form.js:
$(document).ready(function(){
$('.input_text').focus(function(){
$(this).parents('fieldset').addClass("active_fieldset");
});
});
EDIT:
I've included my CSS:
fieldset
{
border-width: 10px 0 0 0;
border-style: solid;
border-color: #0D6EB8;
}
fieldset.active_fieldset
{
border-width: 10px 0 0 0;
border-style: solid;
border-color: #0D6EB8;
}
Try using the closest method. You'll probably need to pair this with some more code to make sure that the class has been removed from all the other field sets.
$('.input_text').focus( function() {
$('fieldset').removeClass('active_fieldset');
$(this).closest('fieldset').addClass('active_fieldset');
});
Quoting from the docs:
Closest works by first looking at the
current element to see if it matches
the specified expression, if so it
just returns the element itself. If it
doesn't match then it will continue to
traverse up the document, parent by
parent, until an element is found that
matches the specified expression. If
no matching element is found then none
will be returned.
I'd suggest:
$("input.input_text").focus(function() {
$("fieldset.active_fieldset").removeClass("active_fieldset");
$(this).parents("fieldset").addClass("active_fieldset");
}).blur(function() {
$("fieldset.active_fieldset").removeClass("active_fieldset");
});
Use parents() with parameter.
$("#test").parents('.something'); // will give you the parent that has a something class.
Perhaps it's the CSS code that has a bug. I think the suggestion to use JQuery.closest was correct.