Get the values from multiple forms with jquery not working as expected

Question

Please see my code from the fiddle:

$(document).ready(function(){
    $('.forms').submit(function(){
        var name = $('.when', this).attr('name');
        var value = $('.when', this).val();
        alert('the name is:' + name + ' and the value is ' + value);
        return false;
    });
});

And the table:

<table align="center" class='hovertable' width="90%">
    <tr>
        <th colspan="5">Home Gas</th>
    </tr>
    <tr>
        <th>Timestamp</th>
        <th>Image</th>
        <th>Use to train</th>
        <th>Validated</th>
        <th>Action</th>
    </tr>
    <form id='0' class='forms' name='input[0]' action='correct_exec.php' method='GET'>
        <input id='' class='rpiid' type='hidden' name='rpiid[0]' value='00000000c83de86' />
        <input id='' class='sensor_id' type='hidden' name='sensor_id[0]' value='1' />
        <input id='' class='when' type='hidden' name='when[0]' value='2014-02-24 05:00:03' />
        <tr>
            <td align='center'>2014-02-24
                <BR />05:00:03</td>
            <td>
                <input id='' class='val_displayed' type='text' name='val[0]' value='0366167' />
            </td>
            <td>
                <input id='' class='train' type='hidden' name='train[0]' value='False' />
                <input id='' class='train' type='checkbox' name='train[0]' value='True' />
            </td>
            <td>
                <input id='' class='valid' type='hidden' name='valid[0]' value='False' />
                <input id='' class='valid' type='checkbox' name='valid[0]' value='True' />
            </td>
            <td>
                <button id='0' class='submit_button' type='submit' name='button' value='update'>update</button>
            </td>
        </tr>
    </form>
    <form id='1' class='forms' name='input[1]' action='correct_exec.php' method='GET'>
        <input id='' class='rpiid' type='hidden' name='rpiid[1]' value='00000000c83de86' />
        <input id='' class='sensor_id' type='hidden' name='sensor_id[1]' value='1' />
        <input id='' class='when' type='hidden' name='when[1]' value='2014-02-24 04:00:03' />
        <tr>
            <td align='center'>2014-02-24
                <BR />04:00:03</td>
            <td>
                <input id='' class='val_displayed' type='text' name='val[1]' value='0366132' />
            </td>
            <td>
                <input id='' class='train' type='hidden' name='train[1]' value='False' />
                <input id='' class='train' type='checkbox' name='train[1]' value='True' />
            </td>
            <td>
                <input id='' class='valid' type='hidden' name='valid[1]' value='False' />
                <input id='' class='valid' type='checkbox' name='valid[1]' value='True' />
            </td>
            <td>
                <button id='1' class='submit_button' type='submit' name='button' value='update'>update</button>
            </td>
        </tr>
    </form>
</table>

http://jsfiddle.net/starcraft04/BLCJ5/5/

I get always the result name undefined and value undefined.

What is wrong with my javascript code?

Thanks for the help.

Answer 1

Your html is not rendered properly. Because you are using form in tr and you are using tr inside on tr. Try this:

HTML Code:

<table align="center" class='hovertable' width="90%">
    <tr>
        <th colspan="5">Home Gas</th>
    </tr>
    <tr>
        <th>Timestamp</th>
        <th>Image</th>
        <th>Use to train</th>
        <th>Validated</th>
        <th>Action</th>
    </tr>
    <tr id='0' class='forms' name='input[0]' action='correct_exec.php' method='GET'>
        <input id='' class='rpiid' type='hidden' name='rpiid[0]' value='00000000c83de86' />
        <input id='' class='sensor_id' type='hidden' name='sensor_id[0]' value='1' />
        <input id='' class='when' type='hidden' name='when[0]' value='2014-02-24 05:00:03' />
            <td align='center'>2014-02-24
                <BR />05:00:03</td>
            <td>
                <input id='' class='val_displayed' type='text' name='val[0]' value='0366167' />
            </td>
            <td>
                <input id='' class='train' type='hidden' name='train[0]' value='False' />
                <input id='' class='train' type='checkbox' name='train[0]' value='True' />
            </td>
            <td>
                <input id='' class='valid' type='hidden' name='valid[0]' value='False' />
                <input id='' class='valid' type='checkbox' name='valid[0]' value='True' />
            </td>
            <td>
                <input id='0' class='submit_button' type='button' name='button' value='update'/>
            </td>
        </tr>
    <tr id='1' class='forms' name='input[1]' action='correct_exec.php' method='GET'>
        <input id='' class='rpiid' type='hidden' name='rpiid[1]' value='00000000c83de86' />
        <input id='' class='sensor_id' type='hidden' name='sensor_id[1]' value='1' />
        <input id='' class='when' type='hidden' name='when[1]' value='2014-02-24 04:00:03' />
            <td align='center'>2014-02-24
                <BR />04:00:03</td>
            <td>
                <input id='' class='val_displayed' type='text' name='val[1]' value='0366132' />
            </td>
            <td>
                <input id='' class='train' type='hidden' name='train[1]' value='False' />
                <input id='' class='train' type='checkbox' name='train[1]' value='True' />
            </td>
            <td>
                <input id='' class='valid' type='hidden' name='valid[1]' value='False' />
                <input id='' class='valid' type='checkbox' name='valid[1]' value='True' />
            </td>
            <td>
                <input id='1' class='submit_button' type='button' name='button' value='update'/>
            </td>
        </tr>
</table>

jQuery Code:

$(document).ready(function(){
    $('.submit_button').click(function(){
        var name = $(this).parents('tr.forms').find('.when').attr('name');
        var value = $(this).parents('tr.forms').find('.when').val();
        alert('the name is:' + name + ' and the value is ' + value);
        return false;
    });
});

DEMO