Question

I have a remote form like this and a checkbox in it. When I select or deselect the checkbox I would like to

1. set the value of a hidden field

2. ajax submit this form to its designated url.

I tried $(‘search_form’).onsubmit(), but I get an error saying onsubmit is not a function. Using prototype. Whats the best way to do this?

<form onsubmit="new Ajax.Request('/searches/search_set?stype=1', {asynchronous:true, evalScripts:true, parameters:Form.serialize(this)}); return false;" method="post" id="new_search" class="new_search" action="/searches/search_set?stype=1">
  <div style="margin: 0pt; padding: 0pt; display: inline;">
    <input type="hidden" value="3TWSyMsZXI0nltz7zHAxuj1KX=" name="authenticity_token">
  </div>

  <a onclick="setSubmit(this);" href="#" class="submit-link-button fg-button ui-state-default fg-button-icon-left ui-corner-all" id="search_submit">
    <span class="ui-icon ui-icon-search"></span>'Search'
  </a>
  </div>   

  <input type="checkbox" value="Energy" onclick="refreshResults(this);" name="search[conditions][article_tag][0]" id="search_conditions_article_tag_0">

Answer 1

Maybe you can try something like this :

<form method="post" id="new_search" class="new_search" action="/searches/search_set?stype=1">
  <a href="#" class="submit-link-button fg-button ui-state-default fg-button-icon-left ui-corner-all" id="search_submit">
    <span class="ui-icon ui-icon-search">Search</span>
  </a>
  <input type="hidden" name="hidden_field_name" value="" id="hidden_field_id" />
  <input type="checkbox" value="Energy" name="search[conditions][article_tag][0]" id="search_conditions_article_tag_0" />
</form>

<script type="text/javascript">
  var Search = {
    send: function(event, element) {
      $('hidden_field_id').value = element.value;
      var form = element.up('form');
      new Ajax.Request('/searches/search_set?stype=1', {asynchronous:true, evalScripts:true, parameters:Form.serialize(form)}); return false;
      Event.stop(event);
    }
  };
  document.observe('dom:loaded', function(event) {
    $("search_conditions_article_tag_0").on("click", Search.send);
  });
</script>

Is that what you are looking for ?