CODEWITHSUNDEEP
jquery
Carlos
Carlos

Reputation: 11

Jquery selects and inputs texts

I have this form:

<form ...>
<select name="fuits[]" id="fruits[]">
    <option value="A">Apple</option>
    <option value="O">Orange</option>
    <option value="P">Pear</option>   
</select>
<input type="text" name="fruit[]" id="fruit[]" />

<select name="fruits[]" id="fruits[]">
    <option value="A">Apple</option>
    <option value="O">Orange</option>
    <option value="P">Pear</option>   
</select>
<input type="text" name="fruit[]" id="fruit[]" />

<select name="fruits[]" id="fruits[]">
    <option value="A">Apple</option>
    <option value="O">Orange</option>
    <option value="P">Pear</option>   
</select>
<input type="text" name="fruit[]" id="fruit[]" />

...

<input type="submit" value="send" />

So, I need fill each input text from each select option values (match input text with the selected option)

I have this JQuery, but it doesn't work fine =(, 

$("select[name='type[]']").change(function() {
    $("input[name='tvalue[]']").eq($(this).index()).val(this.value);
}).change();

Here is the DEMO (thanks to karim79): http://jsfiddle.net/GKrd9/4/ suggestions please?

Thanks! Carlos

Upvotes: 0

Views: 118

Answers (3)

FishBasketGordo
FishBasketGordo

Reputation: 23142

Try this: 

$(function() {
    $("select").change(function() {
        var jqThis = $(this);
        jqThis
            .next('input')
            .val(jqThis.find('option:selected').val())
    }).change();
});

Here's a jsfiddle: http://jsfiddle.net/HPYxy/

Upvotes: 0

Sylvain
Sylvain

Reputation: 3873

The only thing missing in your code is a selector in index().

This fixes your problem :

$("select[name='type[]']").change(function() {
    $("input[name='tvalue[]']").eq($(this).index("select")).val(this.value);
}).change();

jsFiddle example

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76880

I'v edited your fiddle, hope this is what you want.

$("select[name='type[]']").change(function() {
    $(this).next().val(this.value);
}).change();

http://jsfiddle.net/GKrd9/5/

Upvotes: 3

Related Questions