CODEWITHSUNDEEP
jqueryruby-on-railsruby-on-rails-3
user1455116
user1455116

Reputation: 2144

Ruby on Rails: Submit a form as a JS based on a change in select box

I have the following HTML generated by form_tag and select_tag in Rails:

<form accept-charset="UTF-8" action="/deployment_group/show_workflow_list" data-remote="true" id="show_workflow_list_form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
  <select id="folder_name_foldernames" name="folder_name[foldernames]">
    <option value="RISK_ODS" selected="selected">RISK_ODS</option>
    <option value="DETAIL_ADJUSTMENT">DETAIL_ADJUSTMENT</option>
    <option value="ODS_STAGE">ODS_STAGE</option>
    <option value="FINANCE_DM1">FINANCE_DM1</option>
  </select>
</form>

Let me know the JQuery code i need to write so that i can submit the form on change of a select value in the drop down. Please see here that when i use :onchange, it is a html option the form is submitted as html and not as a JS form. So, i cannot use :onchange.

I understood that i need to write something like this in my application.js file:

$(#folder_name_foldernames).change(function(){
    $(#show_workflow_list).submit()
});

I used the above code in application.js file but i have to remove "require_tree ." as i get some error so i added

$('#folder_name_foldernames').change = () ->
  $('#show_workflow_list_form').submit()

to my deployment_group.js.coffee file (the deployment_group is my controller related the above view)

But still i dont see any change when i change the selection in the drop down. Please help.

Upvotes: 2

Views: 2483

Answers (3)

user1455116
user1455116

Reputation: 2144

I solved the problem doing it the following way:

<%= f.select :foldernames, options_for_select(@folders, @folders.first), {}, {:onchange=>"myfunc()"}%>

and i added 

<script type="text/javascript">
function myfunc()
{
    $('#folder_name_foldernames').change(function(){     $('#this_form').submit(); }); 
}
</script>

and the form is being submitted as JS instead of HTML. It would be very helpful if someone can explain me why this is being submitted as JS instead of HTML The same code when i write :onchange=> this.form.submit, is being submitted as HTML

Upvotes: 1

Dougui
Dougui

Reputation: 7230

Try to repliace 'application.js' by 'application.js.coffee' and add #= require_self in the file.

Upvotes: 0

tkone
tkone

Reputation: 22728

If you give an id to your <form> tag you can use the id there.

Like:

<form accept-charset="UTF-8" action="/deployment_group/show_workflow_list" data-remote="true" id="this_form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>
<select id="folder_name_foldernames" name="folder_name[foldernames]"><option value="RISK_ODS" selected="selected">RISK_ODS</option>
    <option value="DETAIL_ADJUSTMENT">DETAIL_ADJUSTMENT</option>
    <option value="ODS_STAGE">ODS_STAGE</option>
    <option value="FINANCE_DM1">FINANCE_DM1</option>
</select>

and then:

$('#folder_name_foldernames').change(function(){
    $('#this_form').submit();
});

Don't forget to wrap your selectors in quotes or you'll get a JavaScript error.

Upvotes: 0

Related Questions