CODEWITHSUNDEEP
jqueryclosest
Clinton Green
Clinton Green

Reputation: 9977

Refine jQuery selector to target correct input element

I have a function that writes a value from a select to an input. I am using a live("change", function to trigger this.

if ($(this).val( ) == 'MyValue') {$(".my_input").val(VarValue);}

This works fine but I need to target the closest input so it only writes to that one input and not all of them. What I have tried below does not work. Please help if you can, thanks.

if ($(this).val( ) == 'MyValue') {$(this).closest(".my_input").val(VarValue);}

UPDATE

Here is a link to the Jsfiddle, please note, the functionality is not working here, but you can see my html. http://jsfiddle.net/clintongreen/9x6kv/

Upvotes: 1

Views: 450

Answers (4)

Alper
Alper

Reputation: 1105

UPDATE: Final Code (if someone needs)

$(document).ready(function(){
var $theme = $("#clonned").clone();
// The Function in Question
var dept_1 = "Person #1, Person #2, Person #3, Person #4, Person #5";
var dept_2 = "Person #6, Person #7, Person #8, Person #9, Person #10";
var dept_3 = "Finance Persons";
var dept_4 = "IT Persons";
var dept_5 = "Marketing Persons";

$(".clone_dept").live("change", function() {
    if ($(this).val() == 'Dept #1') {
        $(this).closest("tr").find("td:eq(1) .clone_attendees").val(dept_1);
    }
    if ($(this).val() == 'Dept #2') {
        $(this).closest("tr").find("td:eq(1) .clone_attendees").val(dept_2);
    }
    if ($(this).val() == 'Dept #3') {
        $(this).closest("tr").find("td:eq(1) .clone_attendees").val(dept_3);
    }
    if ($(this).val() == 'Dept #4') {
        $(this).closest("tr").find("td:eq(1) .clone_attendees").val(dept_4);
    }
    if ($(this).val() == 'Dept #5') {
        $(this).closest("tr").find("td:eq(1) .clone_attendees").val(dept_5);
    }
}).change(); // trigger once if needed
// Clone Function
$(".tr_clone_add").live('click', function() {
    var $newone = $theme.clone();
    $newone.attr("id", "clonned"+Math.floor(Math.random()*11));
    $newone.appendTo('.table_clone');
});
});

Upvotes: 1

sicks
sicks

Reputation: 767

Your fiddle, but it works :Click here

You had an issue with your js - Change: 

$(".clone_dept").live("change", function() { //<-- not really sure why live isn't working
    if ($(this).val() == 'Dept #1') {$(".clone_attendees").val(dept_1);}
    if ($(this).val() == 'Dept #2') {$(".clone_attendees").val(dept_1);}
    if ($(this).val() == 'Dept #3') {$(".clone_attendees").val(dept_1);}
    if ($(this).val() == 'Dept #4') {$(".clone_attendees").val(dept_1);}
    if ($(this).val() == 'Dept #5') {$(".clone_attendees").val(dept_1);}
    }).change(); // trigger once if needed
}); // <-- This shouldnt be here

to:

$(".clone_dept").change(function() {
    if ($(this).val() == 'Dept #1') {$(".clone_attendees").val(dept_1);}
    if ($(this).val() == 'Dept #2') {$(".clone_attendees").val(dept_2);}
    if ($(this).val() == 'Dept #3') {$(".clone_attendees").val(dept_3);}
    if ($(this).val() == 'Dept #4') {$(".clone_attendees").val(dept_4);}
    if ($(this).val() == 'Dept #5') {$(".clone_attendees").val(dept_5);}
}).change(); // trigger once if needed

Although this doesn't really address how to select the closest input. In the case of your fiddle, it's the only element that's using that class. If this row structure is going to be copied and reused, use this to select the right input.

if($(this).val() == 'Dept #1') {$(this).parent().next("td").children(".clone_attendees").val(dept_1);}

Edit: Better yet, use an array to assign the right value rather than having 5 lines of if statments.

var dept = ["Person #1, Person #2, Person #3, Person #4, Person #5","Person #6, Person #7, Person #8, Person #9, Person #10","Finance Persons","IT Persons","Marketing Persons"];

add values to the option tags

<option value=0>Dept #1</option>

and then 

$(".clone_dept").change(function() {
    if($(this).val() == 'Dept #1') {
        $(this).parent()
        .next("td")
        .children(".clone_attendees")
        .val(dept[$(this).val()])
    }
}).change(); // trigger once if needed

Upvotes: 1

Matt H
Matt H

Reputation: 6532

Assuming the input is next in the DOM, this should work:

if ($(this).val( ) == 'MyValue') {$(this).next().val(VarValue);}

Upvotes: 0

Luke Schafer
Luke Schafer

Reputation: 9265

if you're sure there is at least one, you can try 

if ($(this).val( ) == 'MyValue') {$(".my_input").eq(0).val(VarValue);}

that gets the first from the set, but it doesn't have any idea of 'closest'

first sibling? try

if ($(this).val( ) == 'MyValue') {$(this).siblings(".my_input").eq(0).val(VarValue);}

but that will get any that appear BEFORE yours anyway. totally depends what 'closest' means

Upvotes: 0

Related Questions