jQuery each field inside parent - javascript

I'm trying to build a common clear fields button that has the following html structure:
<td colspan="2">
<input type="text" name="unpublish_date" id="unpublish_date" class="calendar" />
<img class="clear_date" src="ico_delete.gif" title="Reset date field"></span>
<input type="hidden" name="_unpublish_date" id="_unpublish_date" />
</td>
So I though that the right way to do the function is by working with the inputs, inside the parent of .clear_date
What I would like to know is how to select each input after $(this).parent
$('.clear_date').click(function(){
$(this).parent().each() ... ?
});

Just use .siblings with a filter:
$(this).siblings('input').each()...;

You can use this:
$(this).parent().find("input").each(function(){
$(this).val("");
});

Try this:
$(this).parent().find('input').each() ...
See jQerty .find()

$('.clear_date').click(function(){
$(this).siblings().each(function() {
$(this).val("");
});
});

$('input', $('.clear_dates').parent()).each(function
{
...
});
or
$('.clear_dates').parent().find('input').each(function
{
...
});
You can of course replace $('.clear_dates') with $(this) so:
$('input', $(this).parent()).each(function
{
...
});
or
$(this).parent().find('input').each(function
{
...
});

Related

JQuery loop through multiple input checkboxes

I am tasked with having one checkbox within multiple divs. When the checkbox is checked, I want to hide the div. I want to use Jquery to implement this functionality. I feel I am close, but missing something essential.
Here is my code and any help would be greatly appreciated.
Thanks,
Roka
<div id='legGroup1' class="elementGroup">
<input type="checkbox" class="delCheck" id="1" />Delete</label>
</div>
<div id='legGroup2' class="elementGroup">
<input type="checkbox" class="delCheck" id="2" />Delete</label>
</div>
<button type='button' id='removeLeg'></button>
$("#removeLeg").click(function (e) {
$('.delCheck').each(function () {
if (this.id.prop('checked')) {
$("#legGroup" + this.id).hide();
}
});
});
You can simply find the parent element:
$("#removeLeg").click(function() {
$('.delCheck:checked').each(function() {
// ^^^^^^^^ -> look it filters only checked elements
$(this).parent().hide();
});
});
Or, more accurate, using closest method:
$(this).closest('.elementGroup').hide();
Since your using an each function, base it off the value of the items in the array the function returns.
$("#removeLeg").click(function (e) {
$('.delCheck').each(function (key, value) {
if ($(value).is(':checked')) {
$(value).parent().hide();
}
});
});
First of all, you're missing an open label tag in your HTML.
<label><input type="checkbox" class="delCheck" id="1" />Delete</label>
As for the click event, you can try this, to loop through each checked checkbox and hide their closest div parent.
$(document).ready(function(){
$('#removeLeg').on('click', function(){
$('.delCheck:checked').each(function(){
$(this).parents('div').hide();
});
});
});
Here's a demo: https://jsfiddle.net/nx9e1yp5/1/

Short syntax for multiple selectors of one HTML element

I have the following code:
<form id="form">
<input type="checkbox" name="foo" />
<input type="checkbox" name="bar" />
</form>
<form>
<input type="checkbox" name="foo">
<input type="checkbox" name="bar">
</form>
And this jQuery:
$(document).ready(function(){
$('#form input[name=foo], input[name=bar]').change(function (){
alert('foo');
});
});
Now, if I check #form foo, 'foo' will be displayed. This happens not if I check the other checkbox "foo", but by both 'bar' checkboxes.
What I want is, that only the action will be recognized that was taken in the form with the id 'form'. I can do that by modifying this line to:
$('#form input[name=foo], #form input[name=bar]').change(function (){
I was just wondering if there is a 'short' syntax possibility?
Best regards
If I were you, I would assign the same class for them and apply the jquery for that class like this:
$('#form .classname').change(function (){
alert('foo');
});
Well, not really shorter, but you can avoid using #form twice by doing:
$('#form').find('input[name=foo], input[name=bar]').change(function () {
Slightly shorter:
$('#form input').filter('[name=foo], [name=bar]').change(function () {
You can use select the #form and then use find on the element:
Example:
$(document).ready(function () {
$('#form').find('input[name=foo], input[name=bar]').change(function () {
alert('foo');
});
});
Fiddler: http://jsfiddle.net/5LH7G/
Documentation find:
Get the descendants of each element in the current set of matched
elements, filtered by a selector, jQuery object, or element.
You can use selector by attribute value :
$('form [name=foo], form [name=bar]').change(function (){
alert('foo');
});

Jquery Closest getting Attributes of Elements of Parent Div

I have a repetitive div structure
<div class="parent">
<input type="text" name="name" class="name" value="test">
<input type="hidden" name="id" class="id" value="123">
<span class="btns">
<button name="btn_clr" class="clear" type="button" value="Clear"></button>
</span>
</div>
in Jquery i have a onclick function for clear button as
$('.clear').bind("click", function (e){
$(this).closest('.parent').find('input').each(function (index){
console.log(this);
});
});
I want to clear out the values of input elements of Paret Class DIV but its not getting the INPUT elements in the each function
Try this,
$('.clear').bind("click", function (e){
$(this).closest('.parent').find('input').each(function (index){
$(this).val(''); // to clear the value
});
});
Demo
Try with .parent() like
$('.clear').bind("click", function (e){
$(this).closest('.btns').parent().find('input').each(function (index){
console.log(this);
});
});
Or even try like
$('.clear').bind("click", function (e){
$(this).closest('.parent').find('input').each(function (index){
console.log(this);
});
});
parent is the class value of the target element, so you need to use it with a class selector like .parent
$('.clear').bind("click", function (e) {
$(this).closest('.parent').find('input').each(function (index) {
console.log(this);
});
});

how to set event if cursor is out of an input tag in jquery

im new to jquery and i want to know how to get value of an input tag when a cursor is out/left to that input element/tag. Thank you in advance.
Use blur event
$(function() {
$('input[type="text"]').on('blur' , function() {
// Your code here
});
});
CHECK DEMO
I think the method you're searching is focusout
$(function() {
$('#input-element').focusout(function() {
// put your code here!
});
});
I hope it helps.
<form>
<input id="target" type="text" value="Field 1" />
<input type="text" value="Field 2" />
</form>
<div id="other">
Trigger the handler
</div>
<script>
$('#target').blur(function() {
alert('Handler for .blur() called.');
});

onchange insert value into hidden input jquery

When i select some data from my option i need the value to be showed when "onchange" the select... can someone help me ?
<select name="search_school" id="search_school" onchange="$('#search_school').val() = $('#school_name').val()">
I want the selected option value to be showed in the hidden input
<input type="hidden" name="school_name" id="school_name" value="" />
I think you want this as your onchange event:
<select name="search_school" id="search_school" onchange="$('#school_name').val($('#search_school').val())">
When you call val() without a parameter, it fetches the value of the element. If you call it with a parameter like val('some value');, it sets the value of the element.
If you can, avoid inline event definition on html:
<select name="search_school" id="search_school">
...
</select>
<input type="hidden" name="school_name" id="school_name" />
$(document).ready(function () {
$('#search_school').change(function () {
$('#school_name').val($(this).val());
});
});
You want something like this, I think:
$("#search_school").change(function(){
$(this).val($("#search_school option:selected").text());
});
To set the selected value to your hidden control you should :
<select name="search_school" id="search_school" onchange="$('#school_name').val($('#search_school').val())">
<script type="text/javascript">
$(document).ready(function() {
$("#search_school").change(
function () {
$('#school_name').attr('value', $("#search_school").val());
}
);
});
</script>

Categories