I have a simple form with some javascript that shows some input fields or others depending on what the user selects. The weird behavior that I'm getting is that whichever div I put on top (for instance div id="id1"), the last f.input (:motivo) is not passed to the controller. If I change positions for the divs, then now the other f.input :motivo is not passed.
<%= simple_form_for(@vacacion, validate: true, html: { class: "form-horizontal", role: "form" }) do |f| %>
<%= f.error_notification %>
<%= display_base_errors @vacacion %>
<%= f.input :tipo, label: 'Tipo', as: :select, collection: [["Registrar días de vacaciones utilizados", "tomadas"], ["Abonar días de vacaciones", "abonadas"]], required: true %>
<div id="id1" style="display:none">
<%= f.input :desde, label: 'Fecha inicio vacaciones', as: :datepicker, input_html: { value: @vacacion.desde.present? ? l(@vacacion.desde, format: :slash) : nil } %>
<%= f.input :hasta, label: 'Fecha fin vacaciones', as: :datepicker, input_html: { value: @vacacion.hasta.present? ? l(@vacacion.hasta, format: :slash) : nil } %>
<%= f.input :dias_tomados, label: 'Días de vacaciones utilizados', input_html: { min: 0 }, hint: '<div id="dias_habiles_div"></div>'.html_safe %>
<%= f.input :motivo, input_html: { id: 'motivo_tomadas'} ,label: 'Motivo de los días tomados' %>
</div>
<div id="id2" style="display:none">
<%= f.input :dias_abonados, label: 'Días de vacaciones a abonar', input_html: { min: 0 } %>
<%= f.input :motivo, input_html: { id: 'motivo_abonadas'},label: 'Motivo de los días abonados' %>
</div>
...
$(document).ready(function(){
$("#vacacion_tipo").change(function(){
if(this.value == "tomadas"){
$("#campos_vacaciones_abonadas").hide("slow");
$("#campos_vacaciones_tomadas").show("slow");
}
if(this.value == "abonadas"){
$("#campos_vacaciones_abonadas").show("slow");
$("#campos_vacaciones_tomadas").show("slow");
}
});
I tried adding ids for the inputs in each case but that didn't help.
When I look at the console to check the parameters, every other param is passed ok but with 'motivo' I get "motivo"=>""
Any suggestion? Thanks
It's actually not a Rails or SimpleForm issue. It's just how forms work.
Look at the HTML that's produced, you'll see that you have two inputs with the name "motivo". The name attribute is what drives the parameters that come through from a form submission. And since you can't have two parameters with the same name, it's just submitting the last one it encounters, effectively overriding the first one.