Jquery onclick image id to form input field

Question

i have a dynamic form... and it has a input field something like

<form class=""
<input name="image_0" .. />
<input name="image_1" .. />
<input name="image_4" .. />
<input name="image_6" .. />
<input name="image_7" .. />
....
</form>

and i have a another ul li block which gets images from Facebook albums... when we click on the image its "id" has to fill in empty of anyone of input field and no repeated selection...

Image: Check this image may be it helps to understand

EDIT:

<form class="fb_upload_id" method="get">
    image_2:<input name="image_2" type="text">
    image_3:<input name="image_3" type="text">
    image_4:<input name="image_4" type="text">
</form>

<ul class="facebook_album_photo_list">
    <li alt="Paradise Vision from http://Stockwallpapers.in" title="Paradise Vision from http://Stockwallpapers.in" id="463526207001195">
        <a style="background: url(https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/427440_463526207001195_392636722_s.jpg) center top no-repeat;" class="overlay_photo" href="javascript:void(0);" onclick="add_image_fb('463526207001195');"></a>
    </li>
    <li alt="Anonymous Mask from http://Stockwallpapers.in" title="Anonymous Mask from http://Stockwallpapers.in" id="463151140372035">
        <a style="background: url(https://fbcdn-photos-a.akamaihd.net/hphotos-ak-snc6/10476_463151140372035_468769127_s.jpg) center top no-repeat;" class="overlay_photo" href="javascript:void(0);" onclick="add_image_fb('463151140372035');"></a>
    </li>
    <li alt="Mirana Nightshade Priestess of the Moon from http://Stockwallpapers.in" title="Mirana Nightshade Priestess of the Moon from http://Stockwallpapers.in" id="463137303706752">
        <a style="background: url(https://fbcdn-photos-a.akamaihd.net/hphotos-ak-ash4/482085_463137303706752_723444526_s.jpg) center top no-repeat;" class="overlay_photo" href="javascript:void(0);" onclick="add_image_fb('463137303706752');"></a>
    </li>
    <li alt="Fluid Flow in Lauterbrunnen from http://Stockwallpapers.in" title="Fluid Flow in Lauterbrunnen from http://Stockwallpapers.in" id="459694870717662">
        <a style="background: url(https://fbcdn-photos-a.akamaihd.net/hphotos-ak-snc7/312978_459694870717662_1068867909_s.jpg) center top no-repeat;" class="overlay_photo" href="javascript:void(0);" onclick="add_image_fb('459694870717662');"></a>
    </li>
</ul>

Give us more example html. What you have given us isn't enough. Some html concerning how the pictures are laid out would help us. — Daedalus
– Daedalus, Commented Sep 9, 2012 at 3:38
Do you have an input for each image? What happens if I click 4 different images and you only have 3 inputs? Overwrite one of them? — João Silva
– João Silva, Commented Sep 9, 2012 at 3:48
i think u need more specific.. please check this site.. link ... login using ur facebook account and click on upload from facebook button... — Rajesh Dante
– Rajesh Dante, Commented Sep 9, 2012 at 3:52
yes u have input for each images...some image have 3 some of them have 5 (different input) .. — Rajesh Dante
– Rajesh Dante, Commented Sep 9, 2012 at 4:00

The Alpha · Accepted Answer · 2012-09-09 04:10:38Z

2

Since the onclick event handler is already bound to add_image_fb, just add the following:

function add_image_fb(id) {
  $('.fb_upload_id input:text[value=""]').first().val(id);
}

Update:

function add_image_fb(id) {
    var inputs=$(".fb_upload_id input:text[value='']");
    if(!inputs.length) alert('All input fields filled up!');
    else inputs.first().val(id);
}

Demo.

edited Sep 9, 2012 at 4:10

The Alpha

147k30 gold badges294 silver badges313 bronze badges

answered Sep 9, 2012 at 3:50

João Silva

91.8k29 gold badges156 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rajesh Dante Over a year ago

how to get if users selected all input fields...?

João Silva Over a year ago

To see if users filled all input fields, you need to compare the total number of fields against the ones that have been filled, i.e., $('.fb_upload_id input:text').length == $('.fb_upload_id input:text[value!=""]').

The Alpha Over a year ago

I was just trying to answer but, anyway, you can use this.

Collectives™ on Stack Overflow

Jquery onclick image id to form input field

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related