javascript - 在单击带有所有参数的部分单选按钮时提交父表单，而不是在 Rails 中刷新

问题描述

我有一个像这样的部分表格：

parent_form.html.erb


<%= form_for :questions, url: { controller: 'questions', action: 'update' }, method: :put, authenticity_token: true, html: { id: 'questions_form' }, remote: true do |f| %>
  <%= render :partial => 'question', :locals => {
      :question => question,
      :answers => question.answers
    } %>
  <%= hidden_field_tag :marked_questions_list, '', :id=>'marked_questions_list' %>
  <%= hidden_field_tag :hidden_field_2, '', :id => 'hidden_field_2' %>

<button id="mark_question">Mark Question</button>

<%= f.submit 'Answer', :class => '', id: 'answer_btn' %>

_question.html.erb

<div><%= question.body %></div>
<table class="choices">
    <% answers.each do |answer| %>
      <tr class="answer_selection">
        <td class="answer_input" data-update-url="<%= update_path %>" id="answer_input">
          <%= radio_button_tag 'question[answer_id]',
                                answer.id,
                                false,
                                {
                                  class: 'answer_option',
                                  # onclick: "this.form.submit();"
                                  onclick: "answerQuestion(#{answer.id});"
                                } %>
        </td>
        <td class="answer_text">
          <%= label_tag 'question[answer_id]',
                        html_safe(answer.body_html) %>
        </td>
      </tr>
    <% end %>
  </table>

ajax.js

answerQuestion = async (answerId) => {
  let updateUrl = document.getElementById('answer_input').dataset.updateUrl;
  let marked_questions_list_value = document.getElementById('marked_questions_list').value;
  let hidden_field_2_value = document.getElementById('hidden_field_2').value;
  let data = { marked_questions_list: marked_questions_list_value, hidden_field_2: hidden_field_2_value }
  try {
    const resp = await fetch(updateAnswerUrl, {
      method: 'POST',
      credentials: 'include',
      body: data,
      headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
              },
    });
    const response = await resp.json();
    if (response.success) {
      document.dispatchEvent(answerEvent);
    } else {
      alert('Oops !!! Something went wrong. Check Your Internet connection or try refreshing the page');
    }
  } catch (err) {
    alert('Oops !!! Something went wrong. Check Your Internet connection or try refreshing the page');
  }
};

answer_btn在这里，如果我单击parent_form或如果我使用onclick: this.form.submit();，则表单将连同所有必需的参数一起提交hidden_field_tag。如何提交表单而不刷新通过updateQuestion方法以及hidden_field_tag其他表单参数单击 radio_button 的部分？基本上，我希望在部分单击任何单选按钮时刷新answer_btn或onclick: this.form.submit();不刷新页面的功能，以便我可以answer_button完全从 parent_form 中删除。中还有另一个按钮Mark Questions。parent_form单击此按钮后，其中一个hidden_field_tags 被修改。hidden_field_tag单击任一按钮时从 parent_form 发送到控制器的 s 值从 javascript 更改。所以它们是动态的。所以hidden_field_tag当我单击部分单选按钮或 parent_form 中的任何按钮时，s 应该存在。

标签： javascripthtmlruby-on-rails

javascript - 在单击带有所有参数的部分单选按钮时提交父表单，而不是在 Rails 中刷新

问题描述

解决方案

推荐阅读