Search code examples
ajaxformshtml-tableprototypejs

Prototype: Form.serialize missing some inputs (due to table?)


I'm using JavaScript Prototype (through Ruby on Rails) to handle some Ajax calls; but in one particular case I'm missing a field from the form.

I have a layout like this:

+---------+---------+
| Thing 1 | Thing 2 |
+---------+---------+-----------+
| o Opt 1 | o Opt 1 | <Confirm> |
| o Opt 2 | o Opt 2 |           |
+---------+---------+-----------+

Opt 1 and 2 are Radio buttons, Confirm is a button. The entire table is wrapped in a form, with code like:

<form action="javascript:void(0)">
  <input type="hidden" name="context" value="foo" />
  <input type="hidden" name="subcontext" value="bar" />
  <table>
    <tr><td>Thing 1</td><td>Thing2</td></tr>
    <tr><td>
      <input type="radio" name="choice" value="1.1" />Opt 1<br />
      <input type="radio" name="choice" value="1.2" />Opt 2<br />
    </td><td>
      <input type="radio" name="choice" value="2.1" />Opt 1<br />
      <input type="radio" name="choice" value="2.2" />Opt 2<br />
    </td><td>
      <input name="choice_btn" type="button" value="Confirm"
             onclick="new AJAX.Updater('my_form', '/process_form',
                      {asynchronous:true, evalScripts:true,
                       parameters:Form.serialize(this.form)});
                       return false;" />
    </td></tr>
  </table>
</form>

But I can see that the POST generated by clicking the Confirm button contains the foo and bar values for the hidden fields, but not the choice of the radio buttons.

Is this because I've got a table inside my form? How can I get around this?


Solution

  • Found the problem, which isn't evident from the pasted code above. Before the AJAX request is built, the onclick handler is disabling a number of form objects, including the radio buttons and the button itself. If I move those steps to the AJAX onLading parameter, it all gets sent.