submit form with jquery by click on table cell

Question

How is this possible that the form submit only the "input" field of the clickt table cell

<form id="switch" method="POST">
    <table>
        <tr>
            <td>some content<input type="hidden" name="switch_value" value="1"></td>
            <td>some content<input type="hidden" name="switch_value" value="2"></td>
            <td>some content<input type="hidden" name="switch_value" value="3"></td>
            <td>some content<input type="hidden" name="switch_value" value="4"></td>
            <td>some content<input type="hidden" name="switch_value" value="5"></td>
        </tr>
    </table>
</form>

Answer 1

Try this:

<form id="switch" method="POST">
    <table>
        <tr>
            <td><label>some content<input type="radio" name="switch_value" value="1"></label></td>
            <td><label>some content<input type="radio" name="switch_value" value="2"></label></td>
            <td><label>some content<input type="radio" name="switch_value" value="3"></label></td>
            <td><label>some content<input type="radio" name="switch_value" value="4"></label></td>
            <td><label>some content<input type="radio" name="switch_value" value="5"></label></td>
        </tr>
    </table>
</form>
<script>
$(document).ready(function(){
  $('#switch input[type="radio"]').change(function(){
    $('#switch').submit();
  });
});
</script>

I wrapped the text and the radio buttons between label that way, even if you use css to hide the radio buttons, the text would propagate the event down to the radio button.