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

Popular posts from this blog

sql server - Cannot query correctly (MSSQL - PHP - JSON) -

php - trouble displaying mysqli database results in correct order -

C++ Linked List -