Submit a form using jquery by clicking on a table cell

Question

How is it possible that the form represents only the input field in the click 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 the following:

 <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 radio buttons between label this way, even if you use css to hide the radio buttons , the text will propagate the event to the radio button.