Frank004 Frank004 - 6 months ago 53
jQuery Question

Select option submit on change Rails4

Im making a code that auto submit a form after selecting an option. The submit button is hidden on the form.Im usign ajax in the form so the updates is going to reander in the same page. any help will be grateful.

view.html.erb

<tbody>
<% @complaints.each do |complaint| %>
<tr>
<td id="priority">
<%= bootstrap_form_for complaint do |p| %>
<%= p.select(:priority,[['Selecione Nivel'],['Nivel Alto', {:class=>'btn-danger'}],['Nivel Mediano', {:class=>'btn-warning'}],['Nivel Bajo', {:class=>'btn-primary'}]])%>
<%= p.submit 'Update', :class => "btn" %>
<% end %>
</td>
<td><%= complaint.id %>

</tr>
<% end %>
</tbody>


Html Output

<form accept-charset="UTF-8" action="/complaints/4" class="edit_complaint" id="edit_complaint_4" method="post"><div style="display:none"><input name="utf8" type="hidden" value="✓" class="form-control input-sm" placeholder="Buscar"><input name="_method" type="hidden" value="patch" class="form-control input-sm" placeholder="Buscar"><input name="authenticity_token" type="hidden" value="E8gNdFLaMhswXNo3rUk/j875u5rk8j2Gx+NM9zGWrTA=" class="form-control input-sm" placeholder="Buscar"></div>
<div class="form-group"><label class="control-label" for="complaint_priority">Priority</label><div class="select2-container form-control" id="s2id_complaint_priority"><a href="javascript:void(0)" class="select2-choice" tabindex="-1"> <span class="select2-chosen" id="select2-chosen-3">Selecione Nivel</span><abbr class="select2-search-choice-close"></abbr> <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><label for="s2id_autogen3" class="select2-offscreen">PriorityPriorityPriority</label><input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-3" id="s2id_autogen3"><div class="select2-drop select2-display-none"> <div class="select2-search select2-search-hidden select2-offscreen"> <label for="s2id_autogen3_search" class="select2-offscreen">PriorityPriorityPriority</label> <input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" role="combobox" aria-expanded="true" aria-autocomplete="list" aria-owns="select2-results-3" id="s2id_autogen3_search" placeholder=""> </div> <ul class="select2-results" role="listbox" id="select2-results-3"> </ul></div></div><select class="form-control select2-offscreen" id="complaint_priority" name="complaint[priority]" tabindex="-1" title="PriorityPriorityPriority"><option value="Selecione Nivel">Selecione Nivel</option>
<option class="btn-danger" value="Nivel Alto">Nivel Alto</option>
<option class="btn-warning" value="Nivel Mediano">Nivel Mediano</option>
<option class="btn-primary" value="Nivel Bajo">Nivel Bajo</option></select></div>
<input class="btn form-control input-sm" name="commit" type="submit" value="Update" placeholder="Buscar">
</form>


My jquery code

$(document).ready(function($) {
jQuery.fn.submitOnChange = function() {
this.find('input[type=submit]').remove();
this.find('input[type=select]').change(function() {
$(this).parents('form').submit();
});
return this;
}

$(function() {
$('.edit_complaint').submitOnChange();
});
});

This code hide the but dont submit.

Answer

The following code should submit the form upon select change. Since I do not know your logic pertaining to updating the status of a complaint priority, you would have to tweak the statement in the success handler, $('.status-selector').html( data ); to suit your needs:

$(function() {
    $('form.edit_complaint').on('submit',function() {
        var url = this.action,
            data = $(this).serialize(),
            method = this.method.toUpperCase();
        $.ajax({
            url: url,
            type: method,
            data: data,
            success: function( data ) {
                $('.status-selector').html( data );
            }
        });
    });
    $('form.edit_complaint').find('select').on('change',function() {
        $('form.edit_complaint').triggerHandler( 'submit' );
    });
});