У меня есть форма, у которой есть частичное подобное:
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
. Как я могу отправить форму без обновления частичного при нажатии кнопки radio_button через updateQuestion
вместе с hidden_field_tag
и другими параметрами формы? По сути, мне нужна функциональность answer_btn
или onclick: this.form.submit();
без обновления страницы при частичном нажатии любой переключателя, чтобы я мог полностью удалить answer_button
из parent_form. Также есть еще одна кнопка Mark Questions
в parent_form
. При нажатии на эту кнопку одна из hidden_field_tag
изменяется. Значения hidden_field_tag
s, которые отправляются из parent_form в контроллер при нажатии любой из кнопок, изменяются с javascript. Таким образом, они являются динамическими c. Поэтому hidden_field_tag
должны присутствовать, когда я нажимаю переключатели частично или любую кнопку в parent_form.