javascript - Form submitted as HTML instead of JS only when return on input -
i have modal containing 2 forms , list of forms. has following structure :
form1 header form1_part1 /header body form1_part2 /form1 form2 /form2 forms_list /body i need have first part in modal header, second in modal body, , close form <% end %>. however, can see, means open div (body) within form, , close after close form.
this structure doesn't raise error, origin of following problem :
the form 2 composed of text_field, submitted on return. before having structure, used submitted js, whereas html , causes me problems (invalid authenticity token example, if there wasn't error don't want handle html response in controller).
here code of form 2 :
<%= form_for @task, :url => card_tasks_path(@card), remote: true |f2| %> <div class="field"> <%= f2.text_field :title, placeholder: "what done?", :id => "new_task_input", class: "form-control", maxlength: 140 %> </div> <%= f2.hidden_field :card_id, :value => @card.id %> <% end %> concerning forms list, 1 item (one form) composed of checkbox , input. clicking on checkbox submits form because binded click submit using javascript. action work, submitted js, if type return in input field, same form 2, submitted html instead of js, , causes me problems.
here 1 form of forms list :
<%= form_for task, html: {class: "form-horizontal"}, remote: true |e| %> <div class="form-group" style="display: flex; flex-direction: row; margin-bottom: 0px;"> <label class="control-label"> <%= e.check_box :is_completed, class: "checkbox_completed_task" %> </label> <% if task.is_completed %> <%= e.text_field :title, :style => "border: none; border-width: 0px; flex:1; margin-left: 0px; text-decoration: line-through;", :class => "form-control" %> <% else %> <%= e.text_field :title, :style => "border: none; border-width: 0px; flex:1; margin-left: 0px;", :class => "form-control" %> <% end %> <%= e.hidden_field :card_id, :value => @card.id %> </div> <% end %> and related javascript function :
$(document).on('change', '.checkbox_completed_task', function (e) { $(e.target).parent().parent().parent().submit(); }); when go following structure, works :
header /header body form1 form1_part1 form1_part2 /form1 form2 /form2 forms_list /body but can't because need first part of form 1 in header.
please note both inputs supposed update same attribute, if can of help.
is having idea of what's happening, solution or workaround ? thank in advance.
Comments
Post a Comment