CODEWITHSUNDEEP
javascriptjqueryhtml
user2738640
user2738640

Reputation: 1227

Send the value to the clicked item

When clicking on an element, I want to copy the value from another element to the closest input field to the clicked element.

For example: In the following code, when I click on the span with class .add, I want to display the div .values, which contains list items. Then on clicking on any of the list item, I want to copy its class to the input field which was clicked.

enter image description here

I'm having problem with the step 3, I'm unable to find out which element was clicked so I cannot send the value there. How can I pass the reference of the clicked element, so that it knows where to send back the value?

Here's what I'm trying:

HTML:

<div class="wrap">

    <div class="item">
        <label>Item 1 </label>
        <span class="add">Add</span>
        <input type="text" name="item1" />
    </div>   

    <div class="item">
        <label>Item 2 </label>
        <span class="add">Add</span>
        <input type="text" name="item2" />
    </div>           

</div>

<div class="values">
    <ul>
        <li class="one">One </li>
        <li class="two">Two </li>
        <li class="three">Three </li>
    </ul>
</div>

jQuery:

$(document).on('click','.add',function(e){
    $(".values").css("display","block");
});

$(document).on('click','.values ul li',function(e){
    var value = $(this).attr('class');    
    $(this).closest(".item").find("input[type=text]").val(value);
});

Demo: http://jsfiddle.net/YJE8d/

Upvotes: 1

Views: 254

Answers (3)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

HTML

<div class="wrap">
    <div class="item" id="first">
        <label>Item 1 </label>
            <span class="add">Add</span>
            <input type="text" name="item1" />
    </div>   

    <div class="item" id="second">
        <label>Item 2 </label>
            <span class="add">Add</span>
            <input type="text" name="item2" />
    </div>           

</div>

<div class="values">
    <ul>
        <li class="one">One </li>
        <li class="two">Two </li>
        <li class="three">Three </li>
    </ul>
</div>

SCRIPT

$(document).on('click','.add',function(e){
    itemData=$(this).closest('.item').attr('id');
    $(".values").css("display","block").data('item',itemData);
});

$(document).on('click','.values ul li',function(e){
    var value = $(this).attr('class');    
    d=$('.values').data('item');
    $('input[type="text"]').val('');
    $('#'+d).find("input[type=text]").val(value);
});

Demo

Upvotes: 1

Anton
Anton

Reputation: 32581

You can add class to the .add text and search for that to add value to the input

$(document).on('click','.add',function(e){
    $(".values").css("display","block");
    $(this).closest('.wrap').find('.add').removeClass('clicked');
    $(this).addClass('clicked');
});

$(document).on('click','.values ul li',function(e){
    var value = $(this).attr('class');    
    $('.clicked').next().val(value);
});

.closest() searches for the closest parent element therefore it wont work the way you tried to use it

DEMO

Upvotes: 4

user1129360
user1129360

Reputation: 140

$(document).on('click','.add',function(e){
    $(".values").css("display","block");
    $(this).closest(".item").find("input[type=text]").addClass("active");
});

$(document).on('click','.values ul li',function(e){
    var value = $(this).attr('class');    
    $(".active").val(value);
    $(".active").removeClass("active");
});

Upvotes: 2

Related Questions