not able to change input value on select change

Question

I've been trying to update the value of an input in the very next td, but with no success..

this code is created by a 'new item' button which triggers a javascript:

<tr class="item1"><!-- contenido de tabla -->
    <td>
        <select name="postArrayProducto[]">
        <option>Suave</option>
            <option>Fuerte</option>
        <option>Merken</option>
        </select>
    </td>
    <td>
        <select name="postArrayFormato[]" onchange="cambiarUnidades(this.value)">
             <option value="frascoG">Frasco 370g</option>
         <option value="frascoC">Frasco 220g</option>
         <option value="sachet">Sachet 200g</option>
         <option value="doypack">Doy/Pack 250g</option>
        </select>
    </td>
    <td>
        <input type="text" name="postArrayUnidades[]" size="1" maxlength="3" readonly value="20"> unidades
    </td>
    <td>
        <input type="text" name="postArrayCajas[]" size="1" maxlength="3"> cajas
    </td>
</tr><!-- fin contenido tabla -->

so when cambiarUnidades(this.value) is triggered I want to change the postArrayUnidades[]

The JS:

<script type="text/javascript">
    $(window).load(function(){
        cambiarUnidades = function(el) {
            if(el == "frascoG"){
                $(el).parents('td').next('td').find('input').val('99');         
            }
            if(el == "frascoC"){
                $(el).parent('tr').find('td:nth-child(3)').find('input').val('99');             
            }
            if(el == "sachet"){
                $(el).parent('tr').find('td:nth-child(3)').find('input').value='99';  
            }
            if(el == "doypack"){
                $(el).parent().next('td').find('input').val('99'); 
            }      
        }
    });
</script>

I've tried all those and is not working, I haven't been able to change the input value :( please help!

Answer 1

fiddle:

http://jsfiddle.net/gM2vX/2/

html:

<table>
    <tr class="item1"><!-- contenido de tabla -->
        <td>
            <select name="postArrayProducto[]">
                <option>Suave</option>
                <option>Fuerte</option>
                <option>Merken</option>
            </select>
        </td>
        <td>
            <select name="postArrayFormato[]" id="test">
                <option value="frascoG">Frasco 370g</option>
                <option value="frascoC">Frasco 220g</option>
                <option value="sachet">Sachet 200g</option>
                <option value="doypack">Doy/Pack 250g</option>
            </select>
        </td>
        <td>
            <input type="text" name="postArrayUnidades[]" size="1" maxlength="3" readonly value="20"/> unidades
        </td>
        <td>
            <input type="text" name="postArrayCajas[]" size="1" maxlength="3"> cajas
        </td>
    </tr>
</table><!-- fin contenido tabla -->

jquery:

$(function(){
    $("body").on("change","#test",function(){
        $(this).parent().next().find("input").val("99");
   });

});

instead of body, you can have some div which is not dynamically loaded through ajax. it improves performance. it doesnot go searching for the element from document level, instead it checks from the element specified like I did (body)

Answer 2

you pass the function the value of the select (onchange="cambiarUnidades(this.value)"), this way you can not use anything like $(el).parents('td').... because el is the value, not the object.

so first you should change the onchange to cambiarUnidades(this)

then you have to use $(el).val() == ... in the if statements.

the next thing is that parent('tr') is not right, because parent() will not go up 2 levels, so you should use parents('tr')

so one line would look like this:

if ($(el).val() == "frascoC") {  
  $(el).parents('tr').find('td:nth-child(3)').find('input').val('99');             
}

one more thing is that you should wrap the TR element in a TABLE to make it work.

(obviously there are other solutions, i tried to point at the wrong parts of your code, not to write another solution)